Merge pull request #1218 from layer5io/copilot/switch-mui-datatables-provider

Switch mui-datatables to actively maintained leecalcote fork

Author: leecalcote

examples/next-12/package.json

@@ -17,7 +17,7 @@
     "@mui/icons-material": "^5.14.16",
     "@mui/material": "^5.14.17",
     "@reduxjs/toolkit": "^1.9.7",
-    "mui-datatables": "^4.3.0",
+    "@sistent/mui-datatables": "^5.1.2",
     "next": "^15.5.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package-lock.json

@@ -68,7 +68,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.5.0",
-    "@sistent/mui-datatables": "^5.0.0",
+    "@sistent/mui-datatables": "^5.1.2",
     "notistack": "^3.0.2",
     "prettier": "^3.5.3",
     "prettier-plugin-organize-imports": "^4.1.0",
@@ -115,7 +115,7 @@
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
-    "mui-datatables": "*",
+    "mui-datatables": "github:leecalcote/mui-datatables#decbb0493fdd95d674d2dd748d3d35cefb801195",
     "re-resizable": "^6.11.2",
     "react-draggable": "^4.4.6",
     "react-share": "^5.1.0",

package.json

@@ -0,0 +1,124 @@
+import React, { act } from 'react';
+import { render, waitFor } from '@testing-library/react';
+import type { MUIDataTableColumn, MUIDataTableOptions, MUIDataTableProps } from 'mui-datatables';
+import ResponsiveDataTable from '../custom/ResponsiveDataTable';
+
+const muiDataTableMock = jest.fn();
+
+jest.mock('react-markdown', () => {
+  const React = require('react');
+  return {
+    __esModule: true,
+    default: (props: unknown) => React.createElement('div', props)
+  };
+});
+
+jest.mock('rehype-raw', () => () => null);
+jest.mock('remark-gfm', () => () => null);
+
+jest.mock('../custom', () => {
+  const React = require('react');
+  return {
+    __esModule: true,
+    CustomTooltip: ({ children }: { children: React.ReactNode }) =>
+      React.createElement('div', null, children)
+  };
+});
+
+jest.mock('mui-datatables', () => {
+  const React = require('react');
+  return {
+    __esModule: true,
+    default: (props: MUIDataTableProps) => {
+      muiDataTableMock(props);
+      return React.createElement('div', { 'data-testid': 'mui-datatables' });
+    },
+    MUIDataTableColumn: {}
+  };
+});
+
+describe('ResponsiveDataTable', () => {
+  beforeEach(() => {
+    muiDataTableMock.mockClear();
+  });
+
+  it('applies default table options', () => {
+    const columns: MUIDataTableColumn[] = [{ name: 'id', label: 'ID' }];
+
+    render(
+      <ResponsiveDataTable
+        columns={columns}
+        data={[]}
+        tableCols={columns}
+        columnVisibility={{}}
+      />
+    );
+
+    expect(muiDataTableMock).toHaveBeenCalled();
+    const props = muiDataTableMock.mock.calls[0][0] as MUIDataTableProps;
+    const options = props.options as MUIDataTableOptions;
+
+    expect(options).toEqual(
+      expect.objectContaining({
+        print: false,
+        download: false,
+        search: false,
+        filter: false,
+        viewColumns: false,
+        rowsPerPageOptions: [10, 25, 50, 100],
+        elevation: 0,
+        enableNestedDataAccess: '.'
+      })
+    );
+  });
+
+  it('updates column visibility via onViewColumnsChange', async () => {
+    const columns: MUIDataTableColumn[] = [{ name: 'name', label: 'Name', options: { display: true } }];
+    const updateCols = jest.fn();
+
+    render(
+      <ResponsiveDataTable
+        columns={columns}
+        data={[]}
+        tableCols={columns}
+        columnVisibility={{ name: true }}
+        updateCols={updateCols}
+      />
+    );
+
+    await waitFor(() => expect(updateCols).toHaveBeenCalled());
+
+    const props = muiDataTableMock.mock.calls[0][0] as MUIDataTableProps;
+    const options = props.options as MUIDataTableOptions;
+
+    act(() => {
+      options.onViewColumnsChange?.('name', 'remove');
+    });
+
+    expect(columns[0].options?.display).toBe(false);
+    expect(updateCols).toHaveBeenCalledTimes(2);
+  });
+
+  it('attaches date renderer for known date columns', async () => {
+    const columns: MUIDataTableColumn[] = [{ name: 'updated_at', label: 'Updated At', options: {} }];
+    const updateCols = jest.fn();
+
+    render(
+      <ResponsiveDataTable
+        columns={columns}
+        data={[]}
+        tableCols={columns}
+        columnVisibility={{ updated_at: true }}
+        updateCols={updateCols}
+      />
+    );
+
+    await waitFor(() => expect(updateCols).toHaveBeenCalled());
+
+    const renderer = columns[0].options?.customBodyRender;
+    expect(typeof renderer).toBe('function');
+
+    const element = renderer && renderer('2024-01-01T00:00:00Z');
+    expect(element).toBeTruthy();
+  });
+});