material-react-table-narender 1.0.0

package/packages/material-react-table/stories/features/RowOrdering.stories.tsx

@@ -0,0 +1,282 @@
+import { useState } from 'react';
+import {
+  type MRT_ColumnDef,
+  type MRT_Row,
+  MaterialReactTable,
+} from '../../src';
+import { faker } from '@faker-js/faker';
+import { type Meta } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Features/Row Ordering Examples',
+};
+
+export default meta;
+
+type Person = {
+  address: string;
+  city: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  num: number;
+  state: string;
+};
+
+const columns: MRT_ColumnDef<Person>[] = [
+  {
+    accessorKey: 'num',
+    header: '#',
+  },
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email Address',
+  },
+  {
+    accessorKey: 'address',
+    header: 'Address',
+  },
+  {
+    accessorKey: 'city',
+    header: 'City',
+  },
+  {
+    accessorKey: 'state',
+    header: 'State',
+  },
+];
+
+const initData = [...Array(100)].map((_, i) => ({
+  address: faker.location.streetAddress(),
+  city: faker.location.city(),
+  email: faker.internet.email(),
+  firstName: faker.person.firstName(),
+  lastName: faker.person.lastName(),
+  num: i,
+  state: faker.location.state(),
+}));
+
+export const RowOrderingEnabled = () => {
+  const [data, setData] = useState(() => initData);
+
+  return (
+    <MaterialReactTable
+      autoResetPageIndex={false}
+      columns={columns}
+      data={data}
+      enableRowOrdering
+      enableSorting={false}
+      muiRowDragHandleProps={({ table }) => ({
+        onDragEnd: () => {
+          const { draggingRow, hoveredRow } = table.getState();
+          if (hoveredRow && draggingRow) {
+            data.splice(
+              (hoveredRow as MRT_Row<Person>).index,
+              0,
+              data.splice(draggingRow.index, 1)[0],
+            );
+            setData([...data]);
+          }
+        },
+      })}
+    />
+  );
+};
+
+export const RowOrderingWithSelect = () => {
+  const [data, setData] = useState(() => initData);
+  const [draggingRow, setDraggingRow] = useState<MRT_Row<Person> | null>(null);
+  const [hoveredRow, setHoveredRow] = useState<Partial<MRT_Row<Person>> | null>(
+    null,
+  );
+
+  return (
+    <MaterialReactTable
+      autoResetPageIndex={false}
+      columns={columns}
+      data={data}
+      enableRowOrdering
+      enableRowSelection
+      enableSorting={false}
+      getRowId={(row) => row.email}
+      muiRowDragHandleProps={{
+        onDragEnd: () => {
+          if (hoveredRow && draggingRow) {
+            data.splice(
+              hoveredRow?.index ?? 0,
+              0,
+              data.splice(draggingRow.index, 1)[0],
+            );
+            setData([...data]);
+          }
+        },
+      }}
+      onDraggingRowChange={setDraggingRow}
+      onHoveredRowChange={setHoveredRow}
+      state={{
+        draggingRow,
+        hoveredRow,
+      }}
+    />
+  );
+};
+
+export const RowOrderingWithPinning = () => {
+  const [data, setData] = useState(() => initData);
+  const [draggingRow, setDraggingRow] = useState<MRT_Row<Person> | null>(null);
+  const [hoveredRow, setHoveredRow] = useState<Partial<MRT_Row<Person>> | null>(
+    null,
+  );
+
+  return (
+    <MaterialReactTable
+      autoResetPageIndex={false}
+      columns={columns}
+      data={data}
+      enableColumnPinning
+      enableRowOrdering
+      enableSorting={false}
+      muiRowDragHandleProps={{
+        onDragEnd: () => {
+          if (hoveredRow && draggingRow) {
+            data.splice(
+              hoveredRow?.index ?? 0,
+              0,
+              data.splice(draggingRow.index, 1)[0],
+            );
+            setData([...data]);
+          }
+        },
+      }}
+      onDraggingRowChange={setDraggingRow}
+      onHoveredRowChange={setHoveredRow}
+      state={{
+        draggingRow,
+        hoveredRow,
+      }}
+    />
+  );
+};
+
+export const RowAndColumnOrdering = () => {
+  const [data, setData] = useState(() => initData);
+  const [draggingRow, setDraggingRow] = useState<MRT_Row<Person> | null>(null);
+  const [hoveredRow, setHoveredRow] = useState<Partial<MRT_Row<Person>> | null>(
+    null,
+  );
+
+  return (
+    <MaterialReactTable
+      autoResetPageIndex={false}
+      columns={columns}
+      data={data}
+      enableColumnOrdering
+      enableColumnPinning
+      enableRowOrdering
+      enableSorting={false}
+      muiRowDragHandleProps={{
+        onDragEnd: () => {
+          if (hoveredRow && draggingRow) {
+            data.splice(
+              hoveredRow.index ?? 0,
+              0,
+              data.splice(draggingRow.index, 1)[0],
+            );
+            setData([...data]);
+          }
+        },
+      }}
+      onDraggingRowChange={setDraggingRow}
+      onHoveredRowChange={setHoveredRow}
+      state={{
+        draggingRow,
+        hoveredRow,
+      }}
+    />
+  );
+};
+
+export const RowOrderingWithRowVirtualization = () => {
+  const [data, setData] = useState(() => initData);
+
+  return (
+    <MaterialReactTable
+      autoResetPageIndex={false}
+      columns={columns}
+      data={data}
+      enablePagination={false}
+      enableRowOrdering
+      enableRowVirtualization
+      enableSorting={false}
+      muiRowDragHandleProps={({ table }) => ({
+        onDragEnd: () => {
+          const { draggingRow, hoveredRow } = table.getState();
+          if (hoveredRow && draggingRow) {
+            data.splice(
+              (hoveredRow as MRT_Row<Person>).index,
+              0,
+              data.splice(draggingRow.index, 1)[0],
+            );
+            setData([...data]);
+          }
+        },
+      })}
+    />
+  );
+};
+
+const fakeColumns = [...Array(500)].map((_, i) => {
+  return {
+    accessorKey: i.toString(),
+    header: 'Column ' + i.toString(),
+  };
+});
+
+const fakeData = [...Array(500)].map(() => ({
+  ...Object.fromEntries(
+    fakeColumns.map((col) => [col.accessorKey, faker.person.firstName()]),
+  ),
+}));
+
+export const RowOrderingWithColumnVirtualization = () => {
+  const [data, setData] = useState(() => fakeData);
+
+  return (
+    <MaterialReactTable
+      autoResetPageIndex={false}
+      columns={fakeColumns}
+      data={data}
+      displayColumnDefOptions={{
+        'mrt-row-drag': {
+          enableColumnDragging: true,
+          enableColumnOrdering: true,
+        },
+      }}
+      enableColumnOrdering
+      enableColumnVirtualization
+      enableRowOrdering
+      enableSorting={false}
+      muiRowDragHandleProps={({ table }) => ({
+        onDragEnd: () => {
+          const { draggingRow, hoveredRow } = table.getState();
+          if (hoveredRow && draggingRow) {
+            data.splice(
+              (hoveredRow as MRT_Row<any>).index,
+              0,
+              data.splice(draggingRow.index, 1)[0],
+            );
+            setData([...data]);
+          }
+        },
+      })}
+    />
+  );
+};

package/packages/material-react-table/stories/features/RowPinning.stories.tsx

@@ -0,0 +1,281 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
+import { faker } from '@faker-js/faker';
+import { type Meta } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Features/Row Pinning Examples',
+};
+
+export default meta;
+
+const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email Address',
+  },
+  {
+    accessorKey: 'address',
+    header: 'Address',
+  },
+  {
+    accessorKey: 'city',
+    header: 'City',
+  },
+  {
+    accessorKey: 'state',
+    header: 'State',
+  },
+];
+
+const data = [...Array(50)].map(() => ({
+  address: faker.location.streetAddress(),
+  city: faker.location.city(),
+  email: faker.internet.email(),
+  firstName: faker.person.firstName(),
+  lastName: faker.person.lastName(),
+  state: faker.location.state(),
+}));
+
+export const RowPinningStickyDefaultEnabled = () => (
+  <MaterialReactTable columns={columns} data={data} enableRowPinning />
+);
+
+export const RowPinningEnabledConditionally = () => {
+  const [enableRowPinning, setEnableRowPinning] = useState(false);
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableRowPinning={enableRowPinning}
+      renderTopToolbarCustomActions={() => (
+        <Button onClick={() => setEnableRowPinning(!enableRowPinning)}>
+          Toggle Row Pinning
+        </Button>
+      )}
+    />
+  );
+};
+
+export const RowPinningStickyNoPagination = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enablePagination={false}
+    enableRowPinning
+    muiTableContainerProps={{
+      sx: {
+        maxHeight: '600px',
+      },
+    }}
+  />
+);
+
+export const RowPinningStickyCustomRowHeight = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enablePagination={false}
+    enableRowPinning
+    muiTableBodyRowProps={{
+      sx: {
+        height: '100px',
+      },
+    }}
+    muiTableContainerProps={{
+      sx: {
+        maxHeight: '600px',
+      },
+    }}
+    rowPinningDisplayMode="sticky"
+  />
+);
+
+export const RowPinningSelectStickyMode = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enablePagination={false}
+    enableRowPinning
+    enableRowSelection
+    muiTableContainerProps={{
+      sx: {
+        maxHeight: '600px',
+      },
+    }}
+    rowPinningDisplayMode="select-sticky"
+  />
+);
+
+export const RowPinningTopAndBottomMode = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enablePagination={false}
+    enableRowPinning
+    muiTableContainerProps={{
+      sx: {
+        maxHeight: '600px',
+      },
+    }}
+    rowPinningDisplayMode="top-and-bottom"
+  />
+);
+
+export const RowPinningTopMode = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enablePagination={false}
+    enableRowPinning
+    keepPinnedRows={false}
+    muiTableContainerProps={{
+      sx: {
+        maxHeight: '600px',
+      },
+    }}
+    rowPinningDisplayMode="top"
+  />
+);
+
+export const RowPinningSelectTopMode = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enablePagination={false}
+    enableRowPinning
+    enableRowSelection
+    muiTableContainerProps={{
+      sx: {
+        maxHeight: '600px',
+      },
+    }}
+    rowPinningDisplayMode="select-top"
+  />
+);
+
+export const RowPinningBottomMode = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enablePagination={false}
+    enableRowPinning
+    muiTableContainerProps={{
+      sx: {
+        maxHeight: '600px',
+      },
+    }}
+    rowPinningDisplayMode="bottom"
+  />
+);
+
+export const RowPinningSelectBottomMode = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enablePagination={false}
+    enableRowPinning
+    enableRowSelection
+    muiTableContainerProps={{
+      sx: {
+        maxHeight: '600px',
+      },
+    }}
+    rowPinningDisplayMode="select-bottom"
+  />
+);
+
+export const RowPinningWithStickyHeader = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enablePagination={false}
+    enableRowPinning
+    enableStickyFooter
+    enableStickyHeader
+    muiTableContainerProps={{
+      sx: {
+        maxHeight: '600px',
+      },
+    }}
+  />
+);
+
+export const RowPinningWithGridLayout = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enablePagination={false}
+    enableRowPinning
+    layoutMode="grid"
+    muiTableContainerProps={{
+      sx: {
+        maxHeight: '600px',
+      },
+    }}
+  />
+);
+
+export const RowPinningStickyWithVirtualization = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enablePagination={false}
+    enableRowPinning
+    enableRowVirtualization
+    muiTableContainerProps={{
+      sx: {
+        maxHeight: '600px',
+      },
+    }}
+  />
+);
+
+export const RowPinningTopWithVirtualization = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enablePagination={false}
+    enableRowPinning
+    enableRowVirtualization
+    muiTableContainerProps={{
+      sx: {
+        maxHeight: '600px',
+      },
+    }}
+    rowPinningDisplayMode="top"
+  />
+);
+
+export const RowAndColumnPinning = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enableColumnPinning
+    enablePagination={false}
+    enableRowPinning
+    initialState={{
+      columnPinning: {
+        left: ['firstName'],
+        right: ['lastName'],
+      },
+      rowPinning: {
+        top: ['3', '5'],
+      },
+    }}
+    muiTableContainerProps={{
+      sx: {
+        maxHeight: '600px',
+      },
+    }}
+  />
+);

package/packages/material-react-table/stories/features/Search.stories.tsx

@@ -0,0 +1,149 @@
+import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
+import { faker } from '@faker-js/faker';
+import { type Meta } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Features/Search Examples',
+};
+
+export default meta;
+
+const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+  },
+  {
+    accessorKey: 'age',
+    header: 'Age',
+  },
+  {
+    accessorKey: 'address',
+    header: 'Address',
+  },
+  {
+    accessorKey: 'state',
+    header: 'State',
+  },
+  {
+    accessorKey: 'phoneNumber',
+    header: 'Phone Number',
+  },
+];
+
+const data = [...Array(200)].map(() => ({
+  address: faker.location.streetAddress(),
+  age: +faker.number.float({ max: 100, min: 0 }),
+  firstName: faker.person.firstName(),
+  lastName: faker.person.lastName(),
+  phoneNumber: faker.phone.number(),
+  state: faker.location.state(),
+}));
+
+export const SearchEnabledDefault = () => (
+  <MaterialReactTable columns={columns} data={data} />
+);
+
+export const SearchContains = () => (
+  <MaterialReactTable columns={columns} data={data} globalFilterFn="contains" />
+);
+
+export const CustomGlobalFilterFn = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    filterFns={{
+      myCustomFilterFn: (row, id, filterValue) =>
+        row.getValue<string>(id).startsWith(filterValue),
+    }}
+    globalFilterFn="myCustomFilterFn"
+  />
+);
+
+export const SearchGlobalFilterModes = () => (
+  <MaterialReactTable columns={columns} data={data} enableGlobalFilterModes />
+);
+
+export const SearchGlobalFilterModeOptions = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enableGlobalFilterModes
+    globalFilterModeOptions={['asfd', 'contains', 'fuzzy']}
+  />
+);
+
+export const SearchRankedResultsEnabledByDefault = () => (
+  <MaterialReactTable columns={columns} data={data} enableRowNumbers />
+);
+
+export const SearchDisableRankedResults = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enableGlobalFilterRankedResults={false}
+    enableRowNumbers
+  />
+);
+
+export const ShowSearchRightBoxByDefault = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    initialState={{ showGlobalFilter: true }}
+  />
+);
+
+export const ShowSearchBoxLeftByDefault = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    initialState={{ showGlobalFilter: true }}
+    positionGlobalFilter="left"
+  />
+);
+
+export const ShowSearchBoxLeftByDefaultWithSelection = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enableRowSelection
+    initialState={{ showGlobalFilter: true }}
+    positionGlobalFilter="left"
+  />
+);
+
+export const JustASearchBox = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enableToolbarInternalActions={false}
+    initialState={{ showGlobalFilter: true }}
+  />
+);
+
+export const SearchDisabled = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enableGlobalFilter={false}
+  />
+);
+
+export const CustomizeSearchTextBox = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    initialState={{ showGlobalFilter: true }}
+    muiSearchTextFieldProps={{
+      InputLabelProps: { shrink: true },
+      label: 'Search',
+      placeholder: 'Search 100 rows',
+      variant: 'outlined',
+    }}
+  />
+);