Mui datatables@2.12 (#40941)

* mui-datatables, add filterType as column option, add missing field on TableState, ask what are sorting options?

* Update tests

* resolve definitions of TODO

* Use Array<>

* remove TODO

Co-Authored-By: Jeroen Claassens <jeroen.claassens@live.nl>

* Remove TODO

* Remove duplicate

Co-authored-by: Jeroen Claassens <jeroen.claassens@live.nl>

types/mui-datatables/index.d.ts

@@ -28,7 +28,12 @@ interface MUIDataTableStateRows {
 export interface MUIDataTableState {
     activeColumn: string | null;
     announceText: string | null;
+    columns: MUIDataTableColumnState[];
+    count: number;
+    data: any[];
+    displayData: Array<{dataIndex: number; data: any[]}>;
     expandedRows: MUIDataTableStateRows;
+    filterData: any[];
     filterList: string[][];
     page: number;
     rowsPerPage: number;
@@ -109,6 +114,11 @@ export interface MUIDataTableFilterOptions {
     logic?: (prop: string, filterValue: any[]) => boolean;
 }
 
+export interface MUIDataTableColumnState extends MUIDataTableColumnOptions {
+    name: string;
+    label?: string;
+}
+
 export interface MUIDataTableColumnOptions {
     customBodyRender?: (value: any, tableMeta: MUIDataTableMeta, updateValue: (s: any, c: any, p: any) => any) => string | React.ReactNode;
     customHeadRender?: (columnMeta: MUIDataTableCustomHeadRenderer, updateDirection: (params: any) => any) => string | React.ReactNode;
@@ -117,8 +127,8 @@ export interface MUIDataTableColumnOptions {
     download?: boolean;
     empty?: boolean;
     filter?: boolean;
-    filterList?: string[];
     filterType?: FilterType;
+    filterList?: string[];
     filterOptions?: MUIDataTableFilterOptions;
     hint?: string;
     print?: boolean;
@@ -126,7 +136,7 @@ export interface MUIDataTableColumnOptions {
     setCellHeaderProps?: (columnMeta: MUIDataTableCustomHeadRenderer) => object;
     setCellProps?: (cellValue: string, rowIndex: number, columnIndex: number) => object;
     sort?: boolean;
-    sortDirection?: 'asc' | 'desc';
+    sortDirection?: 'asc' | 'desc' | 'none';
     viewColumns?: boolean;
 }
 

types/mui-datatables/mui-datatables-tests.tsx

@@ -1,4 +1,4 @@
-import MUIDataTable, { MUIDataTableOptions, MUIDataTableTextLabels } from 'mui-datatables';
+import MUIDataTable, { MUIDataTableOptions, MUIDataTableTextLabels, MUIDataTableState, MUIDataTableColumn } from 'mui-datatables';
 import * as React from 'react';
 
 interface Props extends MUIDataTableOptions {
@@ -9,11 +9,25 @@ interface Props extends MUIDataTableOptions {
 
 const MuiCustomTable: React.FC<Props> = (props) => {
     const data: string[][] = props.data.map((asset: any) => Object.values(asset));
-    const columns = props.data
-        .map((entry: any) => Object.keys(entry))
-        .flat()
-        .map((title: string) => title.toUpperCase())
-        .filter((element: string, index: number, array: string[]) => array.indexOf(element) === index);
+    const columns: MUIDataTableColumn[] = [
+        {
+            name: 'id',
+            label: 'id'
+        },
+        {
+            name: 'name',
+            label: 'Name',
+            options: {
+                filterType: 'custom',
+                sortDirection: 'none'
+            }
+        },
+        {
+            name: 'amount',
+            label: 'Amount'
+        }
+    ];
+
     const TableOptions: MUIDataTableOptions = {
         filterType: 'checkbox',
         responsive: 'scrollFullHeight',
@@ -50,6 +64,16 @@ const MuiCustomTable: React.FC<Props> = (props) => {
                 </span>
             );
         },
+        onTableChange: (action, tableState: MUIDataTableState) => {
+            switch (action) {
+                case 'sort':
+                    tableState.columns.forEach(c => {
+                        if (c.sort && (c.sortDirection === 'asc' || c.sortDirection === 'desc')) {
+                            console.log(`${c.sortDirection} sort set on ${c.name}`);
+                        }
+                    });
+            }
+        },
         textLabels: {
             body: {
                 noMatch: 'Sorry, no matching records found',