material-react-table-narender 1.0.0

package/packages/material-react-table/stories/fixed-bugs/gridLayout.stories.tsx

@@ -0,0 +1,80 @@
+import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
+import { faker } from '@faker-js/faker';
+import { type Meta } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Fixed Bugs/Grid Layout',
+};
+
+export default meta;
+
+type Person = {
+  address: string;
+  city: string;
+  firstName: string;
+  lastName: string;
+  state: string;
+};
+
+const columns: MRT_ColumnDef<Person>[] = [
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+  },
+  {
+    accessorKey: 'address',
+    header: 'Address',
+  },
+  {
+    accessorKey: 'city',
+    header: 'City',
+  },
+  {
+    accessorKey: 'state',
+    header: 'State',
+  },
+];
+
+const data = [...Array(6)].map(() => ({
+  address: faker.location.streetAddress(),
+  city: faker.location.city(),
+  firstName: faker.person.firstName(),
+  lastName: faker.person.lastName(),
+  state: faker.location.state(),
+}));
+
+export const CenterAlignInGridLayoutMode = () => {
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      layoutMode="grid"
+      muiTableBodyCellProps={{
+        align: 'center',
+      }}
+      muiTableHeadCellProps={{
+        align: 'center',
+      }}
+    />
+  );
+};
+
+export const RightAlignInGridLayoutMode = () => {
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      layoutMode="grid"
+      muiTableBodyCellProps={{
+        align: 'right',
+      }}
+      muiTableHeadCellProps={{
+        align: 'right',
+      }}
+    />
+  );
+};

package/packages/material-react-table/stories/fixed-bugs/loading.stories.tsx

@@ -0,0 +1,260 @@
+import { useMemo } from 'react';
+import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
+import { type Meta } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Fixed Bugs/Loading Data',
+};
+
+export default meta;
+
+type Person = {
+  address: string;
+  city: string;
+  name: {
+    firstName: string;
+    lastName: string;
+  };
+  state: string;
+};
+
+export const NestedLoadingDataWithInitialExpanded = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      //column definitions...
+      {
+        accessorKey: 'name.firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'name.lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+      //end
+    ],
+    [],
+  );
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={[]}
+      state={{
+        expanded: true,
+        isLoading: true,
+      }}
+    />
+  );
+};
+
+export const NestedLoadingDataWithInitialFilter = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      //column definitions...
+      {
+        accessorKey: 'name.firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'name.lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+      //end
+    ],
+    [],
+  );
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={[]}
+      state={{
+        columnFilters: [{ id: 'name.firstName', value: 'Branson' }],
+        isLoading: true,
+      }}
+    />
+  );
+};
+
+export const NestedLoadingDataWithInitialGroup = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      //column definitions...
+      {
+        accessorKey: 'name.firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'name.lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+      //end
+    ],
+    [],
+  );
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={[]}
+      state={{
+        grouping: ['name.firstName'],
+        isLoading: true,
+      }}
+    />
+  );
+};
+
+export const NestedLoadingDataWithInitialPage = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      //column definitions...
+      {
+        accessorKey: 'name.firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'name.lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+      //end
+    ],
+    [],
+  );
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={[]}
+      state={{
+        isLoading: true,
+        pagination: { pageIndex: 2, pageSize: 5 },
+      }}
+    />
+  );
+};
+
+export const NestedLoadingDataWithInitialSort = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      //column definitions...
+      {
+        accessorKey: 'name.firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'name.lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+      //end
+    ],
+    [],
+  );
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={[]}
+      state={{
+        isLoading: true,
+        sorting: [{ desc: false, id: 'name.lastName' }],
+      }}
+    />
+  );
+};
+
+export const AccessorKeyWhileLoading = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorFn: (row) =>
+          `${row.name.firstName.toUpperCase()} ${row.name.lastName.toUpperCase()}`,
+        header: 'Name',
+        id: 'name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+    ],
+    [],
+    //end
+  );
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={[]}
+      state={{ isLoading: true }}
+    />
+  );
+};

package/packages/material-react-table/stories/fixed-bugs/mobile-date-pickers.stories.tsx

@@ -0,0 +1,70 @@
+import { MaterialReactTable } from '../../src';
+import { faker } from '@faker-js/faker';
+import { type Meta } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Fixed Bugs/mobile date pickers',
+};
+
+export default meta;
+
+const data = [...Array(120)].map(() => ({
+  arrivalTime: faker.date.recent(),
+  birthDate: faker.date.birthdate({ max: 2020, min: 1980, mode: 'age' }),
+  deliverySlot: faker.date.recent(),
+  departureTime: faker.date.recent(),
+  hireDate: faker.date.birthdate({ max: 2024, min: 2011, mode: 'age' }),
+  startTime: faker.date.recent(),
+}));
+
+export const MobileDateTimePickers = () => (
+  <MaterialReactTable
+    columns={[
+      {
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), //transform data to readable format for cell render
+        accessorFn: (row) => new Date(row.birthDate), //transform data before processing so sorting works
+        filterFn: 'lessThan',
+        filterVariant: 'date',
+        header: 'Birth Date',
+        id: 'birthDate',
+      },
+      {
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), //transform data to readable format for cell render
+        accessorFn: (row) => new Date(row.hireDate), //transform data before processing so sorting works
+        filterVariant: 'date-range',
+        header: 'Hire Date',
+        id: 'hireDate',
+      },
+      {
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleString(), //transform data to readable format for cell render
+        accessorFn: (row) => new Date(row.departureTime), //transform data before processing so sorting works
+        filterVariant: 'datetime',
+        header: 'Departure',
+        id: 'departureTime',
+      },
+      {
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleString(), //transform data to readable format for cell render
+        accessorFn: (row) => new Date(row.arrivalTime), //transform data before processing so sorting works
+        filterVariant: 'datetime-range',
+        header: 'Arrival time',
+        id: 'arrivalTime',
+      },
+      {
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleString(), //transform data to readable format for cell render
+        accessorFn: (row) => new Date(row.startTime), //transform data before processing so sorting works
+        filterVariant: 'time',
+        header: 'Start Time',
+        id: 'startTime',
+      },
+      {
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleString(), //transform data to readable format for cell render
+        accessorFn: (row) => new Date(row.deliverySlot), //transform data before processing so sorting works
+        filterVariant: 'time-range',
+        header: 'Delivery Slot',
+        id: 'deliverySlot',
+      },
+    ]}
+    data={data}
+    initialState={{ showColumnFilters: true }}
+  />
+);

package/packages/material-react-table/stories/fixed-bugs/sticky-footer.stories.tsx

@@ -0,0 +1,154 @@
+import { MaterialReactTable } from '../../src';
+import { type Meta } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Fixed Bugs/sticky-footer',
+};
+
+export default meta;
+
+const mockData: any = [
+  {
+    firstName: 'Michael',
+    lastName: 'Jordan',
+    middleName: 'Jeffrey',
+    name: 'Michael Jeffrey Jordan',
+    no: 23,
+    salary: 1030000,
+    total: 86760000,
+  },
+  {
+    firstName: 'Kobe',
+    lastName: 'Bryant',
+    middleName: 'Bean',
+    name: 'Kobe Bean Bryant',
+    no: 24,
+    salary: 25000000,
+    total: 328237108,
+  },
+  {
+    firstName: 'LeBron',
+    lastName: 'James',
+    middleName: 'Raymone',
+    name: 'LeBron Raymone James',
+    no: 6,
+    salary: 44474988,
+    total: 431859107,
+  },
+  {
+    firstName: 'Michael',
+    lastName: 'Jordan',
+    middleName: 'Jeffrey',
+    name: 'Michael Jeffrey Jordan',
+    no: 23,
+    salary: 1030000,
+    total: 86760000,
+  },
+  {
+    firstName: 'Kobe',
+    lastName: 'Bryant',
+    middleName: 'Bean',
+    name: 'Kobe Bean Bryant',
+    no: 24,
+    salary: 25000000,
+    total: 328237108,
+  },
+  {
+    firstName: 'LeBron',
+    lastName: 'James',
+    middleName: 'Raymone',
+    name: 'LeBron Raymone James',
+    no: 6,
+    salary: 44474988,
+    total: 431859107,
+  },
+  {
+    firstName: 'Michael',
+    lastName: 'Jordan',
+    middleName: 'Jeffrey',
+    name: 'Michael Jeffrey Jordan',
+    no: 23,
+    salary: 1030000,
+    total: 86760000,
+  },
+  {
+    firstName: 'Kobe',
+    lastName: 'Bryant',
+    middleName: 'Bean',
+    name: 'Kobe Bean Bryant',
+    no: 24,
+    salary: 25000000,
+    total: 328237108,
+  },
+  {
+    firstName: 'LeBron',
+    lastName: 'James',
+    middleName: 'Raymone',
+    name: 'LeBron Raymone James',
+    no: 6,
+    salary: 44474988,
+    total: 431859107,
+  },
+];
+
+const mockColumns: any = [
+  {
+    accessorKey: 'no',
+    filterVariant: 'multi-select',
+    footer: 'SUM',
+    header: 'No. ',
+    size: 80,
+  },
+  {
+    accessorKey: 'name',
+    header: 'NAME',
+    size: 190,
+  },
+  {
+    accessorKey: 'firstName',
+    header: 'FIRST NAME',
+  },
+  {
+    accessorKey: 'middleName',
+    header: 'MIDDLE NAME',
+    size: 150,
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'LAST NAME',
+  },
+  {
+    accessorKey: 'salary',
+    footer: '211514964',
+    header: 'SALARY',
+  },
+  {
+    accessorKey: 'total',
+    footer: '2540568645',
+    header: 'TOTAL',
+  },
+];
+
+export const PinnedColumnsWithStickyFooter = () => {
+  return (
+    <MaterialReactTable
+      columns={mockColumns}
+      data={mockData}
+      enableColumnPinning
+      enableStickyFooter
+      enableStickyHeader
+      initialState={{ columnPinning: { left: ['no', 'name', 'firstName'] } }}
+      muiTableBodyCellProps={{
+        align: 'center',
+        sx: { borderLeft: '1px solid black' },
+      }}
+      muiTableContainerProps={{
+        sx: { maxHeight: 300 },
+      }}
+      muiTableHeadCellProps={{
+        align: 'center',
+        sx: { borderLeft: '1px solid black' },
+      }}
+    />
+  );
+};