[Feature] set up structure to allow for filter and preprocessing of data tables.

components/table/event-table/EventTableImpl.tsx

@@ -9,8 +9,8 @@ import { TableContainer } from '@/styles/table.styles';
 import Link from 'next/link';
 import CreateEventPopupWindow from '@/components/Forms/CreateEventPopupWindow';
 import TagEventPopupWindow from '@/components/Forms/TagEventPopupWindow';
-import { EventDataIndex, EventRowData } from '@/utils/table-types';
-import { handleExport } from '@/utils/utils';
+import { EventDataIndex, EventRowData, FilterOption } from '@/utils/table-types';
+import { handleExport, handleJsonExport } from '@/utils/utils';
 import TableHeader from '@/components/table/event-table/TableHeader';
 
 /**
@@ -129,7 +129,40 @@ const EventTableImpl = ({
       ),
     },
   ];
-
+  const onExportPress = (option: FilterOption[]) => {
+    // delete once option is implemented
+    option = [
+      {
+        key: 'name',
+        text: 'Event Name',
+      },
+      {
+        key: 'startDate',
+        text: 'Start Date',
+      },
+    ]
+    // replace with the keys you want to keep for each row in the table.
+    // these keys are the member values of the dataForTable array.
+    const keep = option.map((opt) => opt.key); 
+    // for each option, there should be a corresponding header for it
+    // example: name -> Event Name or programName -> Program
+    const header = [option.map((opt) => opt.text)]; 
+    const data = dataForTable.map((row) => {
+      return keep.map((key) => {
+        // can do some preprocessing here
+        // todo: abstract this to be a part of filter options
+        if (key === 'tags') {
+          return row[key].map((tag) => tag.tagName).join('; ');
+        }
+        // if (key === 'startDate' || key === 'endDate') {
+        //   return row[key].toLocaleDateString();
+        // }
+        return row[key];
+      });
+    });
+    console.log(data);
+    handleJsonExport(data, 'events', header);
+  }
   return (
     <>
       {showPopup && <CreateEventPopupWindow setShowPopup={setShowPopup} />}
@@ -139,6 +172,7 @@ const EventTableImpl = ({
         showPopup={showPopup}
         setShowPopupTag={setShowPopupTag}
         showPopupTag={showPopup}
+        onExportPress={onExportPress}
       />
       <TableContainer>
         <div id="table-container">

components/table/event-table/TableHeader.tsx

@@ -9,11 +9,13 @@ const TableHeader = ({
   showPopup,
   setShowPopupTag,
   showPopupTag,
+  onExportPress,
 }: {
   setShowPopup: (a: boolean) => void;
   showPopup: boolean;
   setShowPopupTag: (a: boolean) => void;
   showPopupTag: boolean;
+  onExportPress: () => void;
 }) => {
   return (
     <>
@@ -42,7 +44,7 @@ const TableHeader = ({
             />
           </TableButton>
           <Button
-            onClick={() => handleExport('events')}
+            onClick={onExportPress}
             style={{
               width: 250,
               marginLeft: 90,

utils/table-types.ts

@@ -22,3 +22,9 @@ export interface ProgramRowData
   description: string;
 }
 export type ProgramDataIndex = keyof ProgramRowData;
+
+// Filter Option
+export type FilterOption = {
+  key: string;
+  text: string;
+}

utils/utils.ts

@@ -43,10 +43,14 @@ export const fetchData = async (route: string) => {
 export const fetcher = (url: string) => fetch(url).then(res => res.json());
 
 // function to export what is on the table at the time to an excel file
+
 export const handleExport = (fileName: string) => {
   const workbook = XLSX.utils.table_to_book(
     document.querySelector('#table-container')
   );
+  const sheet = workbook.Sheets[workbook.SheetNames[0]];
+  const options = ['Event Name', 'Program']
+  console.log(sheet['!cols']);
   const excelBuffer = XLSX.write(workbook, {
     bookType: 'xlsx',
     type: 'array',
@@ -56,3 +60,20 @@ export const handleExport = (fileName: string) => {
   });
   saveAs(blob, fileName + '.xlsx');
 };
+
+export const handleJsonExport = (data: any, fileName: string, headers: string[][]) => {
+  const workbook = XLSX.utils.book_new();
+  const sheet = XLSX.utils.json_to_sheet([]);
+  XLSX.utils.sheet_add_aoa(sheet, headers);
+  XLSX.utils.sheet_add_json(sheet, data, { origin: 'A2', skipHeader: true});
+  XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1');
+  const excelBuffer = XLSX.write(workbook, {
+    bookType: 'xlsx',
+    type: 'array',
+  });
+  const blob = new Blob([excelBuffer], {
+    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  });
+  saveAs(blob, fileName + '.xlsx');
+
+}