@lminii/material-react-table-mcp 4.0.1

package/data/examples/aggregation-and-grouping.tsx

@@ -0,0 +1,153 @@
+import { useMemo } from 'react';
+import { Box, Stack } from '@mui/material';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const averageSalary = useMemo(
+    () => data.reduce((acc, curr) => acc + curr.salary, 0) / data.length,
+    [],
+  );
+
+  const maxAge = useMemo(
+    () => data.reduce((acc, curr) => Math.max(acc, curr.age), 0),
+    [],
+  );
+
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        header: 'First Name',
+        accessorKey: 'firstName',
+        enableGrouping: false, //do not let this column be grouped
+      },
+      {
+        header: 'Last Name',
+        accessorKey: 'lastName',
+      },
+      {
+        header: 'Age',
+        accessorKey: 'age',
+        aggregationFn: 'max', //show the max age in the group (lots of pre-built aggregationFns to choose from)
+        //required to render an aggregated cell
+        AggregatedCell: ({ cell, table }) => (
+          <>
+            Oldest by{' '}
+            {table.getColumn(cell.row.groupingColumnId ?? '').columnDef.header}:{' '}
+            <Box
+              sx={{ color: 'info.main', display: 'inline', fontWeight: 'bold' }}
+            >
+              {cell.getValue<number>()}
+            </Box>
+          </>
+        ),
+        Footer: () => (
+          <Stack>
+            Max Age:
+            <Box
+              sx={{
+                color: 'warning.main',
+              }}
+            >
+              {Math.round(maxAge)}
+            </Box>
+          </Stack>
+        ),
+      },
+      {
+        header: 'Gender',
+        accessorKey: 'gender',
+        //optionally, customize the cell render when this column is grouped. Make the text blue and pluralize the word
+        GroupedCell: ({ cell, row }) => (
+          <Box sx={{ color: 'primary.main' }}>
+            <strong>{cell.getValue<string>()}s </strong> ({row.subRows?.length})
+          </Box>
+        ),
+      },
+      {
+        header: 'State',
+        accessorKey: 'state',
+      },
+      {
+        header: 'Salary',
+        accessorKey: 'salary',
+        aggregationFn: 'mean',
+        //required to render an aggregated cell, show the average salary in the group
+        AggregatedCell: ({ cell, table }) => (
+          <>
+            Average by{' '}
+            {table.getColumn(cell.row.groupingColumnId ?? '').columnDef.header}:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell.getValue<number>()?.toLocaleString?.('en-US', {
+                style: 'currency',
+                currency: 'USD',
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 0,
+              })}
+            </Box>
+          </>
+        ),
+        //customize normal cell render on normal non-aggregated rows
+        Cell: ({ cell }) => (
+          <>
+            {cell.getValue<number>()?.toLocaleString?.('en-US', {
+              style: 'currency',
+              currency: 'USD',
+              minimumFractionDigits: 0,
+              maximumFractionDigits: 0,
+            })}
+          </>
+        ),
+        Footer: () => (
+          <Stack>
+            Average Salary:
+            <Box
+              sx={{
+                color: 'warning.main',
+              }}
+            >
+              {averageSalary?.toLocaleString?.('en-US', {
+                style: 'currency',
+                currency: 'USD',
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 0,
+              })}
+            </Box>
+          </Stack>
+        ),
+      },
+    ],
+    [averageSalary, maxAge],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    displayColumnDefOptions: {
+      'mrt-row-expand': {
+        enableResizing: true,
+      },
+    },
+    enableColumnResizing: true,
+    enableGrouping: true,
+    enableStickyHeader: true,
+    enableStickyFooter: true,
+    initialState: {
+      density: 'compact',
+      expanded: true, //expand all groups by default
+      grouping: ['state'], //an array of columns to group by by default (can be multiple)
+      pagination: { pageIndex: 0, pageSize: 20 },
+      sorting: [{ id: 'state', desc: false }], //sort by state by default
+    },
+    muiToolbarAlertBannerChipProps: { color: 'primary' },
+    muiTableContainerProps: { sx: { maxHeight: 700 } },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/aggregation-multi.js

@@ -0,0 +1,89 @@
+import { useMemo } from 'react';
+import { Box } from '@mui/material';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+const localeStringOptions = {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+};
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            header: 'First Name',
+            accessorKey: 'firstName',
+        },
+        {
+            header: 'Last Name',
+            accessorKey: 'lastName',
+        },
+        {
+            header: 'Gender',
+            accessorKey: 'gender',
+        },
+        {
+            header: 'State',
+            accessorKey: 'state',
+        },
+        {
+            header: 'Salary',
+            accessorKey: 'salary',
+            aggregationFn: ['count', 'mean', 'median', 'min', 'max'],
+            //required to render an aggregated cell, show the average salary in the group
+            AggregatedCell: ({ cell }) => (<>
+            Count:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell.getValue()?.[0]}
+            </Box>
+            Average:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                    .getValue()?.[1]
+                    ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+            Median:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                    .getValue()?.[2]
+                    ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+            Min:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                    .getValue()?.[3]
+                    ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+            Max:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                    .getValue()?.[4]
+                    ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+          </>),
+            //customize normal cell render on normal non-aggregated rows
+            Cell: ({ cell }) => (<>
+            {cell
+                    .getValue()
+                    ?.toLocaleString?.('en-US', localeStringOptions)}
+          </>),
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableGrouping: true,
+        enableStickyHeader: true,
+        initialState: {
+            density: 'compact',
+            expanded: true, //expand all groups by default
+            grouping: ['state'], //an array of columns to group by by default (can be multiple)
+            pagination: { pageIndex: 0, pageSize: 20 },
+            sorting: [{ id: 'state', desc: false }], //sort by state by default
+        },
+        muiToolbarAlertBannerChipProps: { color: 'primary' },
+        muiTableContainerProps: { sx: { maxHeight: 700 } },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/aggregation-multi.tsx

@@ -0,0 +1,105 @@
+import { useMemo } from 'react';
+import { Box } from '@mui/material';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+
+const localeStringOptions = {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+} as const;
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        header: 'First Name',
+        accessorKey: 'firstName',
+      },
+      {
+        header: 'Last Name',
+        accessorKey: 'lastName',
+      },
+      {
+        header: 'Gender',
+        accessorKey: 'gender',
+      },
+      {
+        header: 'State',
+        accessorKey: 'state',
+      },
+      {
+        header: 'Salary',
+        accessorKey: 'salary',
+        aggregationFn: ['count', 'mean', 'median', 'min', 'max'],
+        //required to render an aggregated cell, show the average salary in the group
+        AggregatedCell: ({ cell }) => (
+          <>
+            Count:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell.getValue<Array<number>>()?.[0]}
+            </Box>
+            Average:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                .getValue<Array<number>>()?.[1]
+                ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+            Median:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                .getValue<Array<number>>()?.[2]
+                ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+            Min:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                .getValue<Array<number>>()?.[3]
+                ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+            Max:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                .getValue<Array<number>>()?.[4]
+                ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+          </>
+        ),
+        //customize normal cell render on normal non-aggregated rows
+        Cell: ({ cell }) => (
+          <>
+            {cell
+              .getValue<number>()
+              ?.toLocaleString?.('en-US', localeStringOptions)}
+          </>
+        ),
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableGrouping: true,
+    enableStickyHeader: true,
+    initialState: {
+      density: 'compact',
+      expanded: true, //expand all groups by default
+      grouping: ['state'], //an array of columns to group by by default (can be multiple)
+      pagination: { pageIndex: 0, pageSize: 20 },
+      sorting: [{ id: 'state', desc: false }], //sort by state by default
+    },
+    muiToolbarAlertBannerChipProps: { color: 'primary' },
+    muiTableContainerProps: { sx: { maxHeight: 700 } },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/alternate-column-filtering.js

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'id',
+            header: 'ID',
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'gender',
+            header: 'Gender',
+            filterFn: 'equals',
+            filterSelectOptions: ['Male', 'Female', 'Other'],
+            filterVariant: 'select',
+        },
+        {
+            accessorKey: 'age',
+            header: 'Age',
+            filterVariant: 'range',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        columnFilterDisplayMode: 'popover',
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/alternate-column-filtering.tsx

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        accessorKey: 'id',
+        header: 'ID',
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'gender',
+        header: 'Gender',
+        filterFn: 'equals',
+        filterSelectOptions: ['Male', 'Female', 'Other'],
+        filterVariant: 'select',
+      },
+      {
+        accessorKey: 'age',
+        header: 'Age',
+        filterVariant: 'range',
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    columnFilterDisplayMode: 'popover',
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/alternate-detail-panel.js

@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { Box, Typography, useMediaQuery } from '@mui/material';
+import { data } from './makeData';
+const Example = () => {
+    const isMobile = useMediaQuery('(max-width: 720px)');
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'id',
+            header: 'ID',
+            size: 50,
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'middleName',
+            header: 'Middle Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        // displayColumnDefOptions: { //built-in now in v2.6.0 when positionExpandColumn is 'last'
+        //   'mrt-row-expand': {
+        //     muiTableHeadCellProps: {
+        //       align: 'right',
+        //     },
+        //     muiTableBodyCellProps: {
+        //       align: 'right',
+        //     },
+        //   },
+        // },
+        enableColumnPinning: isMobile, //alternative
+        initialState: {
+            expanded: true,
+        },
+        state: {
+            columnPinning: isMobile
+                ? { end: ['mrt-row-expand'], start: [] }
+                : { end: [], start: [] }, //alternative
+        },
+        renderDetailPanel: ({ row }) => (<Box sx={{
+                display: 'grid',
+                margin: 'auto',
+                gridTemplateColumns: '1fr 1fr',
+                width: '100%',
+            }}>
+        <Typography>Address: {row.original.address}</Typography>
+        <Typography>City: {row.original.city}</Typography>
+        <Typography>State: {row.original.state}</Typography>
+        <Typography>Country: {row.original.country}</Typography>
+      </Box>),
+        positionExpandColumn: 'last',
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/alternate-detail-panel.tsx

@@ -0,0 +1,81 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { Box, Typography, useMediaQuery } from '@mui/material';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const isMobile = useMediaQuery('(max-width: 720px)');
+
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'id',
+        header: 'ID',
+        size: 50,
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'middleName',
+        header: 'Middle Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    // displayColumnDefOptions: { //built-in now in v2.6.0 when positionExpandColumn is 'last'
+    //   'mrt-row-expand': {
+    //     muiTableHeadCellProps: {
+    //       align: 'right',
+    //     },
+    //     muiTableBodyCellProps: {
+    //       align: 'right',
+    //     },
+    //   },
+    // },
+    enableColumnPinning: isMobile, //alternative
+    initialState: {
+      expanded: true,
+    },
+    state: {
+      columnPinning: isMobile
+        ? { end: ['mrt-row-expand'], start: [] }
+        : { end: [], start: [] }, //alternative
+    },
+    renderDetailPanel: ({ row }) => (
+      <Box
+        sx={{
+          display: 'grid',
+          margin: 'auto',
+          gridTemplateColumns: '1fr 1fr',
+          width: '100%',
+        }}
+      >
+        <Typography>Address: {row.original.address}</Typography>
+        <Typography>City: {row.original.city}</Typography>
+        <Typography>State: {row.original.state}</Typography>
+        <Typography>Country: {row.original.country}</Typography>
+      </Box>
+    ),
+    positionExpandColumn: 'last',
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/alternate-pagination.js

@@ -0,0 +1,17 @@
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { columns, data } from './makeData';
+const Example = () => {
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        muiPaginationProps: {
+            color: 'primary',
+            shape: 'rounded',
+            showRowsPerPage: false,
+            variant: 'outlined',
+        },
+        paginationDisplayMode: 'pages',
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/alternate-pagination.tsx

@@ -0,0 +1,23 @@
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+} from 'material-react-table';
+import { columns, data } from './makeData';
+
+const Example = () => {
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    muiPaginationProps: {
+      color: 'primary',
+      shape: 'rounded',
+      showRowsPerPage: false,
+      variant: 'outlined',
+    },
+    paginationDisplayMode: 'pages',
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;