material-react-table-narender 1.0.0 → 2.13.4

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

@@ -1,1102 +0,0 @@
-import { useState } from 'react';
-import Button from '@mui/material/Button';
-import MenuItem from '@mui/material/MenuItem';
-import {
-  type MRT_Cell,
-  type MRT_TableOptions,
-  MaterialReactTable,
-} from '../../src';
-import { faker } from '@faker-js/faker';
-import { type Meta } from '@storybook/react';
-
-const meta: Meta = {
-  title: 'Features/Editing Examples',
-};
-
-export default meta;
-
-const usStates = [
-  'Alabama',
-  'Alaska',
-  'American Samoa',
-  'Arizona',
-  'Arkansas',
-  'California',
-  'Colorado',
-  'Connecticut',
-  'Delaware',
-  'Florida',
-  'Georgia',
-  'Guam',
-  'Hawaii',
-  'Idaho',
-  'Illinois',
-  'Indiana',
-  'Iowa',
-  'Kansas',
-  'Kentucky',
-  'Louisiana',
-  'Maine',
-  'Maryland',
-  'Massachusetts',
-  'Michigan',
-  'Minnesota',
-  'Mississippi',
-  'Missouri',
-  'Montana',
-  'Nebraska',
-  'Nevada',
-  'New Hampshire',
-  'New Jersey',
-  'New Mexico',
-  'New York',
-  'North Carolina',
-  'North Dakota',
-  'Ohio',
-  'Oklahoma',
-  'Oregon',
-  'Palau',
-  'Pennsylvania',
-  'Rhode Island',
-  'South Carolina',
-  'South Dakota',
-  'Tennessee',
-  'Texas',
-  'Utah',
-  'Vermont',
-  'Virgin Island',
-  'Virginia',
-  'Washington',
-  'West Virginia',
-  'Wisconsin',
-  'Wyoming',
-];
-
-type Person = {
-  address: string;
-  firstName: string;
-  lastName: string;
-  phoneNumber: string;
-  state: string;
-};
-
-const data: Person[] = [...Array(100)].map(() => ({
-  address: faker.location.streetAddress(),
-  firstName: faker.person.firstName(),
-  lastName: faker.person.lastName(),
-  phoneNumber: faker.phone.number(),
-  state: faker.location.state(),
-}));
-
-export const EditingEnabledEditModeModalDefault = () => {
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
-    exitEditingMode,
-    row,
-    values,
-  }) => {
-    tableData[row.index] = values;
-    setTableData([...tableData]);
-    exitEditingMode();
-  };
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-        },
-        {
-          accessorKey: 'phoneNumber',
-          enableEditing: false,
-          header: 'Phone Number',
-        },
-      ]}
-      data={tableData}
-      enableEditing
-      onEditingRowSave={handleSaveRow}
-      renderTopToolbarCustomActions={({ table }) => (
-        <Button onClick={() => table.setCreatingRow(true)}>Add</Button>
-      )}
-    />
-  );
-};
-
-export const EditingFeatureEnabledConditionally = () => {
-  const [enabled, setEnabled] = useState(false);
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
-    exitEditingMode,
-    row,
-    values,
-  }) => {
-    tableData[row.index] = values;
-    setTableData([...tableData]);
-    exitEditingMode();
-  };
-
-  const columns = [
-    {
-      accessorKey: 'firstName',
-      header: 'First Name',
-    },
-    {
-      accessorKey: 'lastName',
-      header: 'Last Name',
-    },
-    {
-      accessorKey: 'address',
-      header: 'Address',
-    },
-    {
-      accessorKey: 'state',
-      header: 'State',
-    },
-    {
-      accessorKey: 'phoneNumber',
-      enableEditing: false,
-      header: 'Phone Number',
-    },
-  ];
-
-  return (
-    <MaterialReactTable
-      columns={columns}
-      data={tableData}
-      enableEditing={enabled}
-      initialState={{
-        columnOrder: ['mrt-row-actions', ...columns.map((c) => c.accessorKey!)],
-      }}
-      onEditingRowSave={handleSaveRow}
-      renderTopToolbarCustomActions={() => (
-        <Button onClick={() => setEnabled(!enabled)}>Toggle Editing</Button>
-      )}
-    />
-  );
-};
-
-export const EditingEnabledEditModeRow = () => {
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
-    exitEditingMode,
-    row,
-    values,
-  }) => {
-    tableData[row.index] = values;
-    setTableData([...tableData]);
-    exitEditingMode();
-  };
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-        },
-        {
-          accessorKey: 'phoneNumber',
-          enableEditing: false,
-          header: 'Phone Number',
-        },
-      ]}
-      createDisplayMode="row"
-      data={tableData}
-      editDisplayMode="row"
-      enableEditing
-      onCreatingRowSave={() => {}}
-      onEditingRowSave={handleSaveRow}
-      renderTopToolbarCustomActions={({ table }) => (
-        <Button onClick={() => table.setCreatingRow(true)}>Add</Button>
-      )}
-    />
-  );
-};
-
-export const EditingEnabledEditModeRowCustomSave = () => {
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
-    exitEditingMode,
-    row,
-    values,
-  }) => {
-    tableData[row.index] = values;
-    setTableData([...tableData]);
-    exitEditingMode();
-  };
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-        },
-        {
-          accessorKey: 'phoneNumber',
-          enableEditing: false,
-          header: 'Phone Number',
-        },
-      ]}
-      createDisplayMode="row"
-      data={tableData}
-      editDisplayMode="row"
-      enableEditing
-      onEditingRowSave={handleSaveRow}
-      renderTopToolbarCustomActions={({ table }) =>
-        table.getState().creatingRow ? (
-          <Button color="success" onClick={() => {}}>
-            Save
-          </Button>
-        ) : (
-          <Button onClick={() => table.setCreatingRow(true)}>Add</Button>
-        )
-      }
-    />
-  );
-};
-
-export const EditingEnabledEditModeRowVirtualized = () => {
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
-    exitEditingMode,
-    row,
-    values,
-  }) => {
-    tableData[row.index] = values;
-    setTableData([...tableData]);
-    exitEditingMode();
-  };
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-        },
-        {
-          accessorKey: 'phoneNumber',
-          enableEditing: false,
-          header: 'Phone Number',
-        },
-      ]}
-      createDisplayMode="row"
-      data={tableData}
-      displayColumnDefOptions={{
-        'mrt-row-actions': {
-          size: 100,
-        },
-      }}
-      editDisplayMode="row"
-      enableEditing
-      enablePagination={false}
-      enableRowSelection
-      enableRowVirtualization
-      muiTableContainerProps={{ sx: { height: 400 } }}
-      onCreatingRowSave={() => {}}
-      onEditingRowSave={handleSaveRow}
-      renderTopToolbarCustomActions={({ table }) => (
-        <Button onClick={() => table.setCreatingRow(true)}>Add</Button>
-      )}
-    />
-  );
-};
-
-export const EditingEnabledEditModeCell = () => {
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveCell = (cell: MRT_Cell<Person>, value: any) => {
-    //@ts-ignore
-    tableData[cell.row.index][cell.column.id] = value;
-    setTableData([...tableData]);
-  };
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-        },
-        {
-          accessorKey: 'phoneNumber',
-          enableEditing: false,
-          header: 'Phone Number',
-        },
-      ]}
-      createDisplayMode="row"
-      data={tableData}
-      editDisplayMode="cell"
-      enableEditing
-      muiEditTextFieldProps={({ cell }) => ({
-        onBlur: (event) => {
-          handleSaveCell(cell, event.target.value);
-        },
-      })}
-      onCreatingRowSave={() => {}}
-      renderTopToolbarCustomActions={({ table }) => (
-        <Button onClick={() => table.setCreatingRow(true)}>Add</Button>
-      )}
-    />
-  );
-};
-
-export const EditingEnabledEditModeCellWithRowActions = () => {
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveCell = (cell: MRT_Cell<Person>, value: any) => {
-    //@ts-ignore
-    tableData[cell.row.index][cell.column.id] = value;
-    setTableData([...tableData]);
-  };
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-        },
-        {
-          accessorKey: 'phoneNumber',
-          enableEditing: false,
-          header: 'Phone Number',
-        },
-      ]}
-      createDisplayMode="row"
-      data={tableData}
-      editDisplayMode="cell"
-      enableEditing
-      enableRowActions
-      muiEditTextFieldProps={({ cell }) => ({
-        onBlur: (event) => {
-          handleSaveCell(cell, event.target.value);
-        },
-      })}
-      onCreatingRowSave={() => {}}
-      renderTopToolbarCustomActions={({ table }) => (
-        <Button onClick={() => table.setCreatingRow(true)}>Add</Button>
-      )}
-    />
-  );
-};
-
-export const EditingEnabledEditModeTable = () => {
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveCell = (cell: MRT_Cell<Person>, value: string) => {
-    //@ts-ignore
-    tableData[+cell.row.index][cell.column.id] = value;
-    setTableData([...tableData]);
-    console.info('saved cell with value: ', value);
-  };
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-        },
-        {
-          accessorKey: 'phoneNumber',
-          header: 'Phone Number',
-        },
-      ]}
-      data={tableData}
-      editDisplayMode="table"
-      enableEditing
-      muiEditTextFieldProps={({ cell }) => ({
-        onBlur: (event) => {
-          handleSaveCell(cell, event.target.value);
-        },
-      })}
-    />
-  );
-};
-
-export const EditSelectVariant = () => {
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
-    row,
-    values,
-  }) => {
-    tableData[+row.index] = values;
-    setTableData([...tableData]);
-  };
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          editSelectOptions: usStates,
-          editVariant: 'select',
-          header: 'State',
-        },
-        {
-          accessorKey: 'phoneNumber',
-          header: 'Phone Number',
-        },
-      ]}
-      data={tableData}
-      enableEditing
-      enableRowActions
-      muiEditTextFieldProps={{ variant: 'outlined' }}
-      onEditingRowSave={handleSaveRow}
-    />
-  );
-};
-
-export const EditSelectVariantAlternate = () => {
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
-    row,
-    values,
-  }) => {
-    tableData[row.index] = values;
-    setTableData([...tableData]);
-  };
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          editSelectOptions: [
-            { label: 'AL', value: 'Alabama' },
-            { label: 'AK', value: 'Alaska' },
-            { label: 'AS', value: 'American Samoa' },
-            { label: 'AZ', value: 'Arizona' },
-            { label: 'AR', value: 'Arkansas' },
-            { label: 'CA', value: 'California' },
-            { label: 'CO', value: 'Colorado' },
-            { label: 'CT', value: 'Connecticut' },
-            { label: 'DE', value: 'Delaware' },
-            { label: 'FL', value: 'Florida' },
-            { label: 'GA', value: 'Georgia' },
-            { label: 'GU', value: 'Guam' },
-            { label: 'HI', value: 'Hawaii' },
-            { label: 'ID', value: 'Idaho' },
-            { label: 'IL', value: 'Illinois' },
-            { label: 'IN', value: 'Indiana' },
-            { label: 'IA', value: 'Iowa' },
-            { label: 'KS', value: 'Kansas' },
-            { label: 'KY', value: 'Kentucky' },
-            { label: 'LA', value: 'Louisiana' },
-            { label: 'ME', value: 'Maine' },
-            { label: 'MD', value: 'Maryland' },
-            { label: 'MA', value: 'Massachusetts' },
-            { label: 'MI', value: 'Michigan' },
-            { label: 'MN', value: 'Minnesota' },
-            { label: 'MS', value: 'Mississippi' },
-            { label: 'MO', value: 'Missouri' },
-            { label: 'MT', value: 'Montana' },
-            { label: 'NE', value: 'Nebraska' },
-            { label: 'NV', value: 'Nevada' },
-            { label: 'NH', value: 'New Hampshire' },
-            { label: 'NJ', value: 'New Jersey' },
-            { label: 'NM', value: 'New Mexico' },
-            { label: 'NY', value: 'New York' },
-            { label: 'NC', value: 'North Carolina' },
-            { label: 'ND', value: 'North Dakota' },
-            { label: 'MP', value: 'Northern Mariana Islands' },
-            { label: 'OH', value: 'Ohio' },
-            { label: 'OK', value: 'Oklahoma' },
-            { label: 'OR', value: 'Oregon' },
-            { label: 'PA', value: 'Pennsylvania' },
-            { label: 'PR', value: 'Puerto Rico' },
-            { label: 'RI', value: 'Rhode Island' },
-            { label: 'SC', value: 'South Carolina' },
-          ],
-          editVariant: 'select',
-          header: 'State',
-        },
-        {
-          accessorKey: 'phoneNumber',
-          header: 'Phone Number',
-        },
-      ]}
-      data={tableData}
-      editDisplayMode="row"
-      enableEditing
-      enableRowActions
-      muiEditTextFieldProps={{ variant: 'outlined' }}
-      onEditingRowSave={handleSaveRow}
-    />
-  );
-};
-
-export const EditingCustomizeInput = () => {
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
-    row,
-    values,
-  }) => {
-    tableData[row.index] = values;
-    setTableData([...tableData]);
-  };
-
-  const usStates = [
-    'Alabama',
-    'Alaska',
-    'American Samoa',
-    'Arizona',
-    'Arkansas',
-    'California',
-    'Colorado',
-    'Connecticut',
-    'Delaware',
-    'Florida',
-    'Georgia',
-    'Guam',
-    'Hawaii',
-    'Idaho',
-    'Illinois',
-    'Indiana',
-    'Iowa',
-    'Kansas',
-    'Kentucky',
-    'Louisiana',
-    'Maine',
-    'Maryland',
-    'Massachusetts',
-    'Michigan',
-    'Minnesota',
-    'Mississippi',
-    'Missouri',
-    'Montana',
-    'Nebraska',
-    'Nevada',
-    'New Hampshire',
-    'New Jersey',
-    'New Mexico',
-    'New York',
-    'North Carolina',
-    'North Dakota',
-    'Ohio',
-    'Oklahoma',
-    'Oregon',
-    'Palau',
-    'Pennsylvania',
-    'Rhode Island',
-    'South Carolina',
-    'South Dakota',
-    'Tennessee',
-    'Texas',
-    'Utah',
-    'Vermont',
-    'Virgin Island',
-    'Virginia',
-    'Washington',
-    'West Virginia',
-    'Wisconsin',
-    'Wyoming',
-  ];
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-          muiEditTextFieldProps: () => ({
-            children: usStates.map((state) => (
-              <MenuItem key={state} value={state}>
-                {state}
-              </MenuItem>
-            )),
-            select: true,
-          }),
-        },
-        {
-          accessorKey: 'phoneNumber',
-          header: 'Phone Number',
-        },
-      ]}
-      data={tableData}
-      enableEditing
-      enableRowActions
-      muiEditTextFieldProps={{ variant: 'outlined' }}
-      onEditingRowSave={handleSaveRow}
-    />
-  );
-};
-
-export const EditingEnabledAsync = () => {
-  const [tableData, setTableData] = useState(data);
-  const [isSaving, setIsSaving] = useState(false);
-
-  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
-    row,
-    values,
-  }) => {
-    setIsSaving(true);
-    setTimeout(() => {
-      tableData[row.index] = values;
-      setTableData([...tableData]);
-      setIsSaving(false);
-    }, 1500);
-  };
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-        },
-        {
-          accessorKey: 'phoneNumber',
-          header: 'Phone Number',
-        },
-      ]}
-      data={tableData}
-      enableEditing
-      enableRowActions
-      onEditingRowSave={handleSaveRow}
-      state={{
-        showProgressBars: isSaving,
-      }}
-    />
-  );
-};
-
-const nestedData = [...Array(10)].map(() => ({
-  address: faker.location.streetAddress(),
-  name: {
-    firstName: faker.person.firstName(),
-    lastName: faker.person.lastName(),
-  },
-  phoneNumber: faker.phone.number(),
-  state: faker.location.state(),
-}));
-
-export const EditingNestedData = () => {
-  const [tableData, setTableData] = useState(() => nestedData);
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorFn: (row) => row.name.firstName,
-          header: 'First Name',
-          id: 'firstName',
-        },
-        {
-          accessorKey: 'name.lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-        },
-        {
-          accessorKey: 'phoneNumber',
-          enableEditing: false,
-          header: 'Phone Number',
-        },
-      ]}
-      data={tableData}
-      enableEditing
-      onEditingRowSave={({ row, values }) => {
-        tableData[row.index] = {
-          address: row._valuesCache.address,
-          name: {
-            firstName: values.firstName,
-            lastName: values['name.lastName'],
-          },
-          phoneNumber: row._valuesCache.phoneNumber,
-          state: row._valuesCache.state,
-        };
-        setTableData([...tableData]);
-      }}
-    />
-  );
-};
-
-export const EditingEnabledEditModeTableWithGroupedRows = () => {
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
-    exitEditingMode,
-    row,
-    values,
-  }) => {
-    tableData[row.index] = values;
-    setTableData([...tableData]);
-    exitEditingMode();
-  };
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-        },
-        {
-          accessorKey: 'phoneNumber',
-          enableEditing: false,
-          header: 'Phone Number',
-        },
-      ]}
-      data={tableData}
-      editDisplayMode="table"
-      enableEditing
-      enableGrouping
-      onEditingRowSave={handleSaveRow}
-    />
-  );
-};
-
-export const EnableEditingConditionally = () => {
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
-    exitEditingMode,
-    row,
-    values,
-  }) => {
-    tableData[row.index] = values;
-    setTableData([...tableData]);
-    exitEditingMode();
-  };
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-        },
-        {
-          accessorKey: 'phoneNumber',
-          enableEditing: (row) => row.original.state.includes('N'),
-          header: 'Phone Number',
-        },
-      ]}
-      data={tableData}
-      editDisplayMode="row"
-      enableEditing={(row) => row.index % 2 === 0}
-      onEditingRowSave={handleSaveRow}
-    />
-  );
-};
-
-export const EnableEditingConditionallyCell = () => {
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
-    exitEditingMode,
-    row,
-    values,
-  }) => {
-    tableData[row.index] = values;
-    setTableData([...tableData]);
-    exitEditingMode();
-  };
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-        },
-        {
-          accessorKey: 'phoneNumber',
-          enableEditing: (row) => row.original.state.includes('N'),
-          header: 'Phone Number',
-        },
-      ]}
-      data={tableData}
-      editDisplayMode="cell"
-      enableEditing={(row) => row.index % 2 === 0}
-      onEditingRowSave={handleSaveRow}
-    />
-  );
-};
-
-export const EnableEditingConditionallyTable = () => {
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
-    exitEditingMode,
-    row,
-    values,
-  }) => {
-    tableData[row.index] = values;
-    setTableData([...tableData]);
-    exitEditingMode();
-  };
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-        },
-        {
-          accessorKey: 'phoneNumber',
-          enableEditing: (row) => row.original.state.includes('N'),
-          header: 'Phone Number',
-        },
-      ]}
-      data={tableData}
-      editDisplayMode="table"
-      enableEditing={(row) => row.index % 2 === 0}
-      onEditingRowSave={handleSaveRow}
-    />
-  );
-};
-
-export const EditingCellManualOnChange = () => {
-  const [tableData, setTableData] = useState(data);
-
-  const handleSaveCell = (cell: MRT_Cell<Person>, value: any) => {
-    //@ts-ignore
-    tableData[cell.row.index][cell.column.id] = value;
-    setTableData([...tableData]);
-  };
-
-  return (
-    <MaterialReactTable
-      columns={[
-        {
-          accessorKey: 'firstName',
-          header: 'First Name',
-        },
-        {
-          accessorKey: 'lastName',
-          header: 'Last Name',
-        },
-        {
-          accessorKey: 'address',
-          header: 'Address',
-        },
-        {
-          accessorKey: 'state',
-          header: 'State',
-          muiEditTextFieldProps: ({ cell }) => ({
-            onBlur: (event) => {
-              handleSaveCell(cell, event.target.value);
-            },
-            onChange: (event) =>
-              console.log('state col onChange', event.target.value),
-          }),
-        },
-        {
-          accessorKey: 'phoneNumber',
-          enableEditing: false,
-          header: 'Phone Number',
-        },
-      ]}
-      data={tableData}
-      editDisplayMode="cell"
-      enableEditing
-      muiEditTextFieldProps={({ cell }) => ({
-        onBlur: (event) => {
-          handleSaveCell(cell, event.target.value);
-        },
-        onChange: (event) =>
-          console.log('all col onChange', event.target.value),
-      })}
-    />
-  );
-};