material-react-table-narender 1.0.0 → 2.13.4

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

@@ -1,391 +0,0 @@
-import { useState } from 'react';
-import Button from '@mui/material/Button';
-import Stack from '@mui/material/Stack';
-import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
-import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
-
-const meta: Meta = {
-  title: 'Features/Virtualization',
-};
-
-export default meta;
-
-const longColumns: MRT_ColumnDef<any>[] = [
-  {
-    accessorKey: 'firstName',
-    header: 'First Name',
-  },
-  {
-    accessorKey: 'middleName',
-    header: 'Middle Name',
-  },
-  {
-    accessorKey: 'lastName',
-    header: 'Last Name',
-  },
-  {
-    accessorKey: 'email',
-    header: 'Email Address',
-    size: 300,
-  },
-  {
-    accessorKey: 'phoneNumber',
-    header: 'Phone Number',
-  },
-  {
-    accessorKey: 'address',
-    header: 'Address',
-  },
-  {
-    accessorKey: 'zipCode',
-    header: 'Zip Code',
-  },
-  {
-    accessorKey: 'city',
-    header: 'City',
-  },
-  {
-    accessorKey: 'state',
-    header: 'State',
-  },
-  {
-    accessorKey: 'country',
-    header: 'Country',
-    size: 200,
-  },
-  {
-    accessorKey: 'favoriteColor',
-    header: 'Favorite Color',
-  },
-  {
-    accessorKey: 'favoriteQuote',
-    header: 'Favorite Quote',
-    size: 700,
-  },
-  {
-    accessorKey: 'petName',
-    header: 'Pet Name',
-  },
-  {
-    accessorKey: 'petType',
-    header: 'Pet Type',
-  },
-];
-
-const longData = [...Array(5000)].map(() => ({
-  address: faker.location.streetAddress(),
-  city: faker.location.city(),
-  country: faker.location.country(),
-  email: faker.internet.email(),
-  favoriteColor: faker.internet.color(),
-  favoriteQuote: faker.lorem.sentence(),
-  firstName: faker.person.firstName(),
-  lastName: faker.person.lastName(),
-  middleName: faker.person.firstName(),
-  petName: faker.animal.cat(),
-  petType: faker.animal.type(),
-  phoneNumber: faker.phone.number(),
-  state: faker.location.state(),
-  zipCode: faker.location.zipCode(),
-}));
-
-export const EnableRowVirtualizationDense = () => (
-  <MaterialReactTable
-    columns={longColumns}
-    data={longData}
-    enableBottomToolbar={false}
-    enablePagination={false}
-    enableRowVirtualization
-    initialState={{ density: 'compact' }}
-  />
-);
-
-export const EnableRowVirtualizationComfortable = () => (
-  <MaterialReactTable
-    columns={longColumns}
-    data={longData}
-    enableBottomToolbar={false}
-    enablePagination={false}
-    enableRowVirtualization
-  />
-);
-
-export const EnableRowVirtualizationSpacious = () => (
-  <MaterialReactTable
-    columns={longColumns}
-    data={longData}
-    enableBottomToolbar={false}
-    enablePagination={false}
-    enableRowVirtualization
-    initialState={{ density: 'spacious' }}
-  />
-);
-
-export const EnableRowVirtualizationTallContent = () => (
-  <MaterialReactTable
-    columns={longColumns}
-    data={longData}
-    enableBottomToolbar={false}
-    enableColumnResizing
-    enablePagination={false}
-    enableRowNumbers
-    enableRowVirtualization
-  />
-);
-
-export const VirtualizationConditionallyWontToggle = () => {
-  const [enabled, setEnabled] = useState(true);
-  return (
-    <MaterialReactTable
-      columns={longColumns}
-      data={longData}
-      enableBottomToolbar={false}
-      enableColumnVirtualization={enabled}
-      enablePagination={false}
-      enableRowNumbers
-      enableRowVirtualization={enabled}
-      initialState={{ density: 'compact' }}
-      renderTopToolbarCustomActions={() => (
-        <Stack alignItems="center" direction="row">
-          <Button onClick={() => setEnabled(!enabled)}>
-            Toggle Virtualization
-          </Button>
-          * Virtualization features cannot be toggled
-        </Stack>
-      )}
-    />
-  );
-};
-
-export const EnableRowVirtualizationWithColumnResizing = () => (
-  <MaterialReactTable
-    columns={longColumns}
-    data={longData}
-    enableBottomToolbar={false}
-    enableColumnResizing
-    enablePagination={false}
-    enableRowNumbers
-    enableRowVirtualization
-  />
-);
-
-export const EnableRowVirtualizationWithDetailPanel = () => (
-  <MaterialReactTable
-    columns={longColumns}
-    data={longData}
-    enableBottomToolbar={false}
-    enablePagination={false}
-    enableRowNumbers
-    enableRowVirtualization
-    renderDetailPanel={() => <div>Detail Panel</div>}
-  />
-);
-
-export const EnableRowVirtualizationWithMemoizedCells = () => (
-  <MaterialReactTable
-    columns={longColumns}
-    data={longData}
-    enableBottomToolbar={false}
-    enableDensityToggle={false}
-    enablePagination={false}
-    enableRowNumbers
-    enableRowVirtualization
-    initialState={{ density: 'compact' }}
-    memoMode="cells"
-  />
-);
-
-export const EnableRowVirtualizationWithMemoizedRows = () => (
-  <MaterialReactTable
-    columns={longColumns}
-    data={longData}
-    enableBottomToolbar={false}
-    enableDensityToggle={false}
-    enablePagination={false}
-    enableRowNumbers
-    enableRowVirtualization
-    initialState={{ density: 'compact' }}
-    memoMode="rows"
-  />
-);
-
-export const EnableRowVirtualizationStickyFooter = () => (
-  <MaterialReactTable
-    columns={[
-      {
-        accessorKey: 'firstName',
-        footer: 'First Name',
-        header: 'First Name',
-      },
-      {
-        accessorKey: 'middleName',
-        footer: 'Middle Name',
-        header: 'Middle Name',
-      },
-      {
-        accessorKey: 'lastName',
-        footer: 'Last Name',
-        header: 'Last Name',
-      },
-    ]}
-    data={longData}
-    enableBottomToolbar={false}
-    enablePagination={false}
-    enableRowNumbers
-    enableRowVirtualization
-    enableStickyFooter
-  />
-);
-
-export const EnableColumnVirtualization = () => (
-  <MaterialReactTable
-    columns={longColumns}
-    data={longData.slice(0, 10)}
-    enableColumnVirtualization
-    enableRowNumbers
-  />
-);
-
-export const EnableColumnVirtualizationWithPinning = () => (
-  <MaterialReactTable
-    columns={longColumns}
-    data={longData.slice(0, 10)}
-    enableColumnPinning
-    enableColumnVirtualization
-    enableRowNumbers
-  />
-);
-
-export const EnableColumnVirtualizationShortColumns = () => (
-  <MaterialReactTable
-    columns={longColumns.slice(0, 3)}
-    data={longData.slice(0, 10)}
-    enableColumnVirtualization
-    enableRowNumbers
-  />
-);
-
-export const EnableColumnVirtualizationWithFooter = () => (
-  <MaterialReactTable
-    columns={[
-      {
-        accessorKey: 'firstName',
-        footer: 'First Name',
-        header: 'First Name',
-      },
-      {
-        accessorKey: 'middleName',
-        footer: 'Middle Name',
-        header: 'Middle Name',
-      },
-      {
-        accessorKey: 'lastName',
-        footer: 'Last Name',
-        header: 'Last Name',
-      },
-    ]}
-    data={longData.slice(0, 15)}
-    enableColumnVirtualization
-    enableRowNumbers
-  />
-);
-
-export const EnableColumnVirtualizationStickyFooter = () => (
-  <MaterialReactTable
-    columns={[
-      {
-        accessorKey: 'firstName',
-        footer: 'First Name',
-        header: 'First Name',
-      },
-      {
-        accessorKey: 'middleName',
-        footer: 'Middle Name',
-        header: 'Middle Name',
-      },
-      {
-        accessorKey: 'lastName',
-        footer: 'Last Name',
-        header: 'Last Name',
-      },
-    ]}
-    data={longData.slice(0, 50)}
-    enableColumnVirtualization
-    enableRowNumbers
-    enableStickyFooter
-  />
-);
-
-export const RowAndColumnVirtualization = () => (
-  <MaterialReactTable
-    columns={longColumns}
-    data={longData}
-    enableBottomToolbar={false}
-    enableColumnVirtualization
-    enablePagination={false}
-    enableRowNumbers
-    enableRowVirtualization
-  />
-);
-
-export const RowAndColumnVirtualizationWithFeatures = () => (
-  <MaterialReactTable
-    columns={longColumns}
-    data={longData}
-    enableBottomToolbar={false}
-    enableColumnOrdering
-    enableColumnPinning
-    enableColumnResizing
-    enableColumnVirtualization
-    enablePagination={false}
-    enableRowNumbers
-    enableRowSelection
-    enableRowVirtualization
-  />
-);
-
-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 MaxVirtualization = () => (
-  <MaterialReactTable
-    columns={fakeColumns}
-    data={fakeData}
-    enableBottomToolbar={false}
-    enableColumnPinning
-    enableColumnResizing
-    enableColumnVirtualization
-    enablePagination={false}
-    enableRowNumbers
-    enableRowVirtualization
-    muiTableContainerProps={{ sx: { maxHeight: 500 } }}
-    muiTablePaperProps={{ sx: { m: 'auto', maxWidth: 1000 } }}
-  />
-);
-
-export const EmptyDataVirtualization = () => (
-  <MaterialReactTable
-    columns={fakeColumns}
-    data={[]}
-    enableBottomToolbar={false}
-    enableColumnPinning
-    enableColumnResizing
-    enableColumnVirtualization
-    enablePagination={false}
-    enableRowNumbers
-    enableRowVirtualization
-    muiTableContainerProps={{ sx: { maxHeight: 500 } }}
-    muiTablePaperProps={{ sx: { margin: 'auto', maxWidth: 1000 } }}
-  />
-);

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

@@ -1,86 +0,0 @@
-import Button from '@mui/material/Button';
-import MenuItem from '@mui/material/MenuItem';
-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/Click Propagation',
-};
-
-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 RowClickAndRowMenuActions = () => {
-  return (
-    <MaterialReactTable
-      columns={columns}
-      data={data}
-      enableEditing
-      enableRowActions
-      muiTableBodyRowProps={{
-        onClick: () => {
-          alert('row click');
-        },
-      }}
-      renderRowActionMenuItems={() => [<MenuItem>Test</MenuItem>]}
-    />
-  );
-};
-
-export const RowClickAndRowButtonActions = () => {
-  return (
-    <MaterialReactTable
-      columns={columns}
-      data={data}
-      enableEditing
-      enableRowActions
-      muiTableBodyRowProps={{
-        onClick: () => {
-          alert('row click');
-        },
-      }}
-      renderRowActions={() => (
-        <Button onClick={(e) => e.stopPropagation()}>Test</Button>
-      )}
-    />
-  );
-};

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

@@ -1,71 +0,0 @@
-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/Data Types',
-};
-
-export default meta;
-
-type Person = {
-  address: string;
-  city: string;
-  firstName: null | string;
-  lastName: string;
-  state: string;
-  states: string[];
-};
-
-const columns: MRT_ColumnDef<Person>[] = [
-  {
-    accessorKey: 'firstName',
-    enableGlobalFilter: true,
-    header: 'First Name',
-  },
-  {
-    accessorKey: 'lastName',
-    header: 'Last Name',
-  },
-  {
-    accessorKey: 'address',
-    header: 'Address',
-  },
-  {
-    accessorKey: 'city',
-    header: 'City',
-  },
-  {
-    accessorKey: 'state',
-    header: 'State',
-  },
-  {
-    Cell: ({ cell }) => cell.getValue<string[]>().join(', '),
-    accessorKey: 'states',
-    header: 'States',
-  },
-];
-
-const data = [...Array(66)].map(() => ({
-  address: faker.location.streetAddress(),
-  city: faker.location.city(),
-  firstName: Math.random() > 0.5 ? faker.person.firstName() : null,
-  lastName: faker.person.lastName(),
-  state: faker.location.state(),
-  states: [
-    faker.location.state(),
-    faker.location.state(),
-    faker.location.state(),
-  ],
-}));
-
-export const NullColumn = () => {
-  return (
-    <MaterialReactTable
-      columns={columns}
-      data={data}
-      enableGlobalFilterModes
-      initialState={{ showGlobalFilter: true }}
-    />
-  );
-};

package/packages/material-react-table/stories/fixed-bugs/fullscreen-with-appbar.stories.tsx

@@ -1,122 +0,0 @@
-import { AppBar, Box, CssBaseline, Toolbar } from '@mui/material';
-import { type Meta } from '@storybook/react';
-import {
-  MaterialReactTable,
-  useMaterialReactTable,
-  type MRT_ColumnDef,
-} from '../../src';
-
-const meta: Meta = {
-  title: 'Fixed Bugs/AppBar overlaps with Fullscreen Modal',
-};
-
-export default meta;
-
-//example data type
-type Person = {
-  name: {
-    firstName: string;
-    lastName: string;
-  };
-  address: string;
-  city: string;
-  state: string;
-};
-
-//nested data is ok, see accessorKeys in ColumnDef below
-const data: Person[] = [
-  {
-    name: {
-      firstName: 'John',
-      lastName: 'Doe',
-    },
-    address: '261 Erdman Ford',
-    city: 'East Daphne',
-    state: 'Kentucky',
-  },
-  {
-    name: {
-      firstName: 'Jane',
-      lastName: 'Doe',
-    },
-    address: '769 Dominic Grove',
-    city: 'Columbus',
-    state: 'Ohio',
-  },
-  {
-    name: {
-      firstName: 'Joe',
-      lastName: 'Doe',
-    },
-    address: '566 Brakus Inlet',
-    city: 'South Linda',
-    state: 'West Virginia',
-  },
-  {
-    name: {
-      firstName: 'Kevin',
-      lastName: 'Vandy',
-    },
-    address: '722 Emie Stream',
-    city: 'Lincoln',
-    state: 'Nebraska',
-  },
-  {
-    name: {
-      firstName: 'Joshua',
-      lastName: 'Rolluffs',
-    },
-    address: '32188 Larkin Turnpike',
-    city: 'Omaha',
-    state: 'Nebraska',
-  },
-];
-
-const columns: MRT_ColumnDef<Person>[] = [
-  {
-    accessorKey: 'name.firstName', //access nested data with dot notation
-    header: 'First Name',
-    size: 150,
-  },
-  {
-    accessorKey: 'name.lastName',
-    header: 'Last Name',
-    size: 150,
-  },
-  {
-    accessorKey: 'address', //normal accessorKey
-    header: 'Address',
-    size: 200,
-  },
-  {
-    accessorKey: 'city',
-    header: 'City',
-    size: 150,
-  },
-  {
-    accessorKey: 'state',
-    header: 'State',
-    size: 150,
-  },
-];
-
-export const FullscreenIsAboveAppbar = () => {
-  const table = useMaterialReactTable({
-    columns,
-    data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
-  });
-
-  return (
-    <>
-      <CssBaseline />
-      <AppBar position="sticky">
-        <Toolbar>
-          <p>App</p>
-        </Toolbar>
-      </AppBar>
-      <Box padding={2}>
-        <MaterialReactTable table={table} />
-      </Box>
-    </>
-  );
-};