npm - material-react-table-narender - Versions diffs - 1.0.0 → 3.0.4 - Mend

material-react-table-narender 1.0.0 → 3.0.4

Files changed (1957) hide show

package/apps/material-react-table-docs/pages/docs/guides/memoization.mdx DELETED Viewed

@@ -1,164 +0,0 @@
-import Head from 'next/head';
-import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
-<Head>
-  <title>{'Memoization Guide - Material React Table V3 Docs'}</title>
-  <meta
-    name="description"
-    content="How and what to memoize to improve performance in Material React Table."
-  />
-</Head>
-## Memoization (Performance) Guide
-Material React Table already uses some memoization techniques to improve performance for you automatically under the hood to improve performance during some events like column resizing. In this guide, we'll go over the basics of what is recommended to be memoized, what you need to keep in mind for performance, and how to tweak advanced memoization settings for your specific use case.
-### Relevant Table Options
-<TableOptionsTable onlyOptions={new Set(['columns', 'data', 'memoMode'])} />
-### What to Memoize
-First of all, when these docs refer to memoization, we are not necessarily talking just about the React `useMemo` hook. Using the `useMemo` hook is just one way to give an variable a stable reference in React. `useMemo`, `useState`, `useReducer`, `useQuery` (React Query), storing state in a state management library like Zustand or Redux, or even just defining a variable outside of a component are all ways to give a variable a stable reference.
-#### Give Data a Stable Reference
-The only truly required thing that must have a stable reference for both Material React Table and TanStack Table is the `data` table option. If your `data` does not have a stable reference, the table will enter an infinite loop of re-rendering upon any state change.
-> Failing to give `data` a stable reference can cause an infinite loop of re-renders.
-##### _Why does this happen? Is this a bug in MRT or TanStack Table?_
-No, this is not a bug in either MRT or TanStack Table. This is just fundamentally how React works. TanStack Table is designed to re-render whenever the `data` changes. You would probably be equally surprised and upset if MRT only accepted what you passed in as `data` on the first render and never updated after a refetch or state change.
-```jsx
-export default function MyComponent() {
-  const columns = [
-    // ...
-  ];
-  //😵 BAD: This will cause an infinite loop of re-renders because `data` is redefined as a new array on every render
-  const data = [
-    // ...
-  ];
-  const table = useMaterialReactTable({
-    columns,
-    data, //data is defined as a const in the same scope as `useMaterialReactTable`, will cause infinite loop
-  });
-  return <MaterialReactTable table={table} />;
-}
-```
-##### I'm still getting an infinite loop of re-renders, but I'm using useMemo!
-Sometimes developers will properly memoize their `data`, but don't end up passing that memoized `data` to the table, and apply some extra transformation or filtering to the `data` before passing it to the table. This common mistake will still cause an infinite loop of re-renders.
-```jsx
-export default function MyComponent() {
-  const columns = [
-    // ...
-  ];
-  //GOOD: Storing `data` in state gives it a stable reference
-  const [data, setData] = useState([
-    // ...
-  ]);
-  //GOOD: This still preserves the stable reference of `data` and will not cause an infinite loop of re-renders
-  const filteredData = useMemo(
-    () => data.filter((row) => row.isActive),
-    [data],
-  );
-  const table = useMaterialReactTable({
-    columns,
-    //GOOD: Reading from the `data` state is stable
-    data,
-    //😵 BAD: This is ignoring the stable reference of `data` and re-creating a new array on every render
-    data: data.filter((row) => row.isActive),
-    //GOOD: This is still reading from the stable reference from a `useMemo` hook
-    data: filteredData,
-  });
-  return <MaterialReactTable table={table} />;
-}
-```
-#### Memoize Columns
-You will generally have better performance if you properly memoize your `columns` array, or give it a stable reference like you would with `data`. Not giving `columns` a stable reference will not cause an infinite loop of re-renders like `data`, but it will still cause the table to re-render more than necessary. The columns `useMemo` dependency array does not need to be an empty array. If your column definitions are derived from other state, you should include that state in the dependency array.
-```jsx
-const columns = useMemo(
-  () => [
-    // ...
-  ],
-  [],
-);
-//OR
-const columns = useMemo(
-  () => [
-    // ...
-  ],
-  [dependency1, dependency2], //if column defs are derived from other state, don't forget to include that state in the dependency array
-);
-//OR
-const [columns, setColumns] = useState(() => [
-  // ...
-]);
-```
-#### Other Options to Memoize
-Usually you will not need to memoize any other options besides `columns` and `data`. However, if you have any expensive logic in any of the `render*` options, you may benefit from wrapping that logic in a React `useCallback` hook. It is not recommended to start off by wrapping all of your `render*` options in `useCallback` hooks, as this usually does not even provide a noticeable performance improvement. This usually takes some experimentation.
-Here's an example for how to render detail panels with a `useCallback` optimization. Getting the TypeScript types correct in the `useCallback` can be tricky, but here's how you can do it:
-```tsx
-const table = useMaterialReactTable({
-  columns,
-  data,
-  renderDetailPanel: useCallback<
-    Required<MRT_TableOptions<Person>>['renderDetailPanel'] //TS needed to get the correct type of the inner arrow function below
-  >(
-    ({ row, table }) =>
-      <DetailPanelComponent row={row} />
-    [], //add proper dependencies here if needed
-  ),
-});
-```
-All of the other `mui*Props` components could also be memoized with either `useMemo` or `useCallback` if you have complicated expensive logic in them for some reason in the same way as above.
-### Memo Mode
-Material React Table already memoizes columns and the entire `<tbody>` component during column resizing, and column/row drag and drop events. This actually does make a significant performance improvement, and is why it is possible to have the performance that it does during these events.
-If you need to reach into the internals and apply some custom memoization, MRT exposes a limited way to do this. The Table Body, Table Rows, or all Table Cells can be memoized with the `memoMode` table option.
-```jsx
-const table = useMaterialReactTable({
-  columns,
-  data,
-  //memoize all cells. This value can be applied dynamically based on a certain scenario/condition if needed
-  memoMode: 'cells', // 'cells' | 'rows' | 'table-body'
-});
-```
-Usually you should not ever need to do this, and be aware that this will stop certain features from functioning correctly. For example, if you memoize all table cells, the density toggle feature will not work anymore. If you memoize the entire table body, most features including virtualization will not work anymore. You'll be left with a table that is mostly frozen after first render, but it could improve the overall performance of your web page if you don't need any of these interactive features.
-> Don't use `memoMode` unless you know what you're doing and have a specific use case for it.
-### React Forget
-In the future, React may finally release their magical "React Forget" compiler that will make all memoization problems in React disappear, and you won't have to worry about any of this. But until then, the above solutions are the best we have.
-View Extra Storybook [Examples](https://www.material-react-table.dev/?path=/story/features-memo-mode-examples)

package/apps/material-react-table-docs/pages/docs/guides/pagination.mdx DELETED Viewed

@@ -1,190 +0,0 @@
-import Head from 'next/head';
-import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
-import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
-import AlternatePaginationExample from '../../../examples/alternate-pagination';
-import RemoteExample from '../../../examples/remote';
-<Head>
-  <title>{'Pagination Guide - Material React Table V3 Docs'}</title>
-  <meta
-    name="description"
-    content="How to use, customize, or disable pagination features in Material React Table"
-  />
-</Head>
-## Pagination Feature Guide
-Client-side pagination is enabled by default in Material React Table. There are a number of ways to customize pagination, turn off pagination, or completely replace the built-in pagination with your own manual or server-side pagination logic.
-### Relevant Table Options
-<TableOptionsTable
-  onlyOptions={
-    new Set([
-      'autoResetPagination',
-      'enablePagination',
-      'getPaginationRowModel',
-      'manualPagination',
-      'muiPaginationProps',
-      'onPaginationChange',
-      'pageCount',
-      'paginateExpandedRows',
-      'paginationDisplayMode',
-      'positionPagination',
-      'rowCount',
-    ])
-  }
-/>
-### Relevant State Options
-<StateOptionsTable onlyOptions={new Set(['pagination'])} />
-### Disable Pagination
-If you simply want to disable pagination, you can set the `enablePagination` table option to `false`. This will both hide the pagination controls and disable the pagination functionality.
-If you only want to disable the pagination logic, but still want to show and use the pagination controls, take a look down below at the [Manual Pagination](#manual-or-server-side-pagination) docs.
-```jsx
-const table = useMaterialReactTable({
-  columns,
-  data,
-  enablePagination: false,
-  enableBottomToolbar: false, //hide the bottom toolbar as well if you want
-});
-```
-### Customize Pagination
-#### Pagination State
-If you want to change the rows per page value or the initial page index, you can do that through either the `initialState` or `state` table option.
-```jsx
-//using initialState if you do not need to manage the pagination state yourself
-const table = useMaterialReactTable({
-  columns,
-  data,
-  initialState: { pagination: { pageSize: 25, pageIndex: 2 } }, //customize the default page size and page index
-});
-```
-```jsx
-//using state if you want to manage the pagination state yourself
-const [pagination, setPagination] = useState({
-  pageIndex: 0,
-  pageSize: 5, //customize the default page size
-});
-const table = useMaterialReactTable({
-  columns,
-  data,
-  onPaginationChange: setPagination, //hoist pagination state to your state when it changes internally
-  state: { pagination }, //pass the pagination state to the table
-});
-```
-> Note: Do not pass pagination state to both `initialState` and `state` at the same time. The `state` will overwrite the `initialState` values.
-#### Customize Pagination Behavior
-There are a few table options that you can use to customize the pagination behavior. The first one is `autoResetPageIndex`. This table option is `true` by default, and causes a table to automatically reset the table back to the first page whenever sorting, filtering, or grouping occurs. This makes sense for most use cases, but if you want to disable this behavior, you can set this table option to `false`.
-Next there is `paginateExpandedRows`, which works in conjunction expanding features. This table option is `true` by default, and forces the table to still only render the same number of rows per page that is set as the page size, even as sub-rows become expanded. However, this does cause expanded rows to sometimes not be on the same page as their parent row, so you can turn this off to keep sub rows with their parent row on the same page.
-#### Customize Pagination Components
-> Note: In v2, muiPaginationProps is now based on mui's `PaginationProps` instead of `TablePaginationProps`.
-You can customize the pagination component with the `muiPaginationProps` table option to change things like the `rowsPerPageOptions` or whether or not to show the first and last page buttons, and more.
-```jsx
-const table = useMaterialReactTable({
-  columns,
-  data,
-  muiPaginationProps: {
-    rowsPerPageOptions: [5, 10, 20],
-    showFirstButton: false,
-    showLastButton: false,
-  },
-});
-```
-#### Alternate Pagination UI
-> New in v2
-By default, Material React Table provides its own Table Pagination UI that is more compact and traditional for data tables. However, if you want to use the Material Pagination component instead, it is as easy as setting the `paginationDisplayMode` table option to `pages`.
-```jsx
-const table = useMaterialReactTable({
-  columns,
-  data,
-  paginationDisplayMode: 'pages',
-});
-```
-<AlternatePaginationExample />
-### Manual or Server-Side Pagination
-#### Manual Pagination
-The default pagination features are client-side. This means you have to have all of your data fetched and stored in the table all at once. This may not be ideal for large datasets, but do not worry, Material React Table supports server-side pagination.
-When the `manualPagination` table option is set to `true`, Material React Table will assume that the `data` that is passed to the table already has had the pagination logic applied. Usually you would do this in your back-end logic.
-#### Override Page Count and Row Count
-If you are using manual pagination, the default page count and row count in the MRT Pagination component will be incorrect, as it is only derived from the number of rows provided in the client-side `data` table option. Luckily, you can override these values and set your own page count or row count in the `pageCount` and `rowCount` table options.
-```jsx
-const table = useMaterialReactTable({
-  columns,
-  data,
-  manualPagination: true,
-  rowCount: data.meta.totalDBRowCount, //you can tell the pagination how many rows there are in your back-end data
-});
-```
-### Manage Pagination State
-For either client-side or server-side pagination, you may want to have access to the pagination state yourself. You can do this like so with `state`:
-```jsx
-//store pagination state in your own state
-const [pagination, setPagination] = useState({
-  pageIndex: 0,
-  pageSize: 5, //customize the default page size
-});
-useEffect(() => {
-  //do something when the pagination state changes
-}, [pagination.pageIndex, pagination.pageSize]);
-const table = useMaterialReactTable({
-  columns,
-  data,
-  onPaginationChange: setPagination, //hoist pagination state to your state when it changes internally
-  state: { pagination }, //pass the pagination state to the table
-});
-return <MaterialReactTable table={table} />;
-```
-Alternatively, if all you care about is customizing the initial pagination state and do not need to react to its changes, like customizing the default page size or the page index, you can do that like so with `initialState`:
-```jsx
-const table = useMaterialReactTable({
-  columns,
-  data,
-  initialState: { pagination: { pageSize: 25, pageIndex: 2 } },
-});
-```
-Here is the full Remote Data example showing off server-side filtering, **pagination**, and sorting.
-<RemoteExample />
-View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-pagination-examples)**

package/apps/material-react-table-docs/pages/docs/guides/row-actions.mdx DELETED Viewed

@@ -1,133 +0,0 @@
-import Head from 'next/head';
-import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
-import MenuItemsExample from '../../../examples/row-actions-menu-items';
-import ButtonsExample from '../../../examples/row-actions-buttons';
-<Head>
-  <title>{'Row Actions Guide - Material React Table V3 Docs'}</title>
-  <meta
-    name="description"
-    content="How to add row action buttons to each row in Material React Table"
-  />
-</Head>
-## Row Actions Feature Guide
-The row actions feature is simply a pre-built [Display Column](/docs/guides/display-columns) feature that adds a column as a place to store either a row action menu or other row action buttons.
-Using the built-in Row Actions column is optional, as you can simply create your own display columns, but this feature has some built-in conveniences that make it easy to add row actions to your table.
-### Relevant Table Options
-<TableOptionsTable
-  onlyOptions={
-    new Set([
-      'displayColumnDefOptions',
-      'enableRowActions',
-      'renderRowActionMenuItems',
-      'renderRowActions',
-      'positionActionsColumn',
-    ])
-  }
-/>
-### Enable Row Actions
-You can enable the row actions feature by setting the `enableRowActions` table option to `true`.
-You can then add your row action components with either the `renderRowActions` or `renderRowActionMenuItems` props.
-#### Add Row Actions Menu Items
-If you want to embed all of your row actions into a single menu, you can use the `renderRowActionMenuItems` table option.
-```jsx
-const table = useMaterialReactTable({
-  columns,
-  data,
-  enableRowActions: true,
-  renderRowActionMenuItems: ({ row }) => [
-    <MenuItem key="edit" onClick={() => console.info('Edit')}>
-      Edit
-    </MenuItem>,
-    <MenuItem key="delete" onClick={() => console.info('Delete')}>
-      Delete
-    </MenuItem>,
-  ],
-});
-return <MaterialReactTable table={table} />;
-```
-<MenuItemsExample />
-#### Add Row Action Buttons
-If you want to add row action buttons, you can use the `renderRowActions` table option.
-```jsx
-const table = useMaterialReactTable({
-  columns,
-  data,
-  enableRowActions: true,
-  renderRowActions: ({ row }) => (
-    <Box>
-      <IconButton onClick={() => console.info('Edit')}>
-        <EditIcon />
-      </IconButton>
-      <IconButton onClick={() => console.info('Delete')}>
-        <DeleteIcon />
-      </IconButton>
-    </Box>
-  ),
-});
-return <MaterialReactTable table={table} />;
-```
-<ButtonsExample />
-### Customize Row Actions Column
-#### Change Row Actions Display Column Options
-You can customize all column def options for the row actions column, including the column width, header text, and more using the `displayColumnDefOptions` table option.
-```jsx
-const table = useMaterialReactTable({
-  columns,
-  data,
-  enableRowActions: true,
-  displayColumnDefOptions: {
-    'mrt-row-actions': {
-      header: 'Change Account Settings', //change header text
-      size: 300, //make actions column wider
-    },
-  },
-  renderRowActions: ({ table }) => (
-    <Box>
-      <Button>Button 1</Button>
-      <Button>Button 2</Button>
-      <Button>Button 3</Button>
-    </Box>
-  ),
-});
-```
-#### Position Row Actions Column
-You can position the row actions column to the left or right (first or last column) of the table using the `positionActionsColumn` table option. The default is as the first column.
-```jsx
-const table = useMaterialReactTable({
-  columns,
-  data,
-  enableRowActions: true,
-  positionActionsColumn: 'last',
-  renderRowActions: ({ table }) => (
-    //...
-  ),
-})
-```
-View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-row-actions-examples)**

package/apps/material-react-table-docs/pages/docs/guides/row-numbers.mdx DELETED Viewed

@@ -1,36 +0,0 @@
-import Head from 'next/head';
-import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
-import OriginalExample from '../../../examples/enable-row-numbers-original';
-import StaticExample from '../../../examples/enable-row-numbers-static';
-<Head>
-  <title>Row Numbers Guide - Material React Table V3 Docs</title>
-  <meta
-    name="description"
-    content="How to use and customize automatic row numbers in Material React Table"
-  />
-</Head>
-## Row Numbers Feature Guide
-Material React Table has an easy to implement row number features. There are two row number modes that you can enable. You can have row numbers that are associated with the data in the table ([original mode](<#enable-row-numbers-(original-mode)>)), or you can have row numbers that are just statically part of the table ([static mode](<#enable-row-numbers-(static-mode)>)).
-### Relevant Table Options
-<TableOptionsTable
-  onlyOptions={new Set(['enableRowNumbers', 'rowNumberDisplayMode'])}
-/>
-### Enable Row Numbers (Static Mode)
-In the default rowNumberDisplayMode (`static`), row numbers are just a static part of the table in their own column. They act like the row numbers in an excel spreadsheet. Sorting and filtering will not affect the row numbers.
-<StaticExample />
-### Enable Row Numbers (Original Mode)
-Alternatively, use the `"original"` rowNumberDisplayMode to have row numbers linked to the original index of the data array. This means that when you search or filter, the same row numbers will stay with the same rows as data is sorted and filtered.
-<OriginalExample />
-View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-row-number-examples)**

package/apps/material-react-table-docs/pages/docs/guides/row-ordering-dnd.mdx DELETED Viewed

@@ -1,66 +0,0 @@
-import Head from 'next/head';
-import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
-import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
-import EnableOrderingExample from '../../../examples/enable-row-ordering';
-import EnableDraggingExample from '../../../examples/enable-row-dragging';
-<Head>
-  <title>{'Row Ordering/DnD Guide - Material React Table V3 Docs'}</title>
-  <meta
-    name="description"
-    content="How to use and customize the row drag and drop and row ordering features of Material React Table"
-  />
-</Head>
-## Row Ordering (DnD) Feature Guide
-Material React Table has exposed all the APIs necessary to enable rich row drag-and-drop features that you can easily build to meet your needs. This includes the ability to reorder rows, drag rows to other tables, or drag rows to other UI in your application.
-> This is not the [Sorting Guide](/docs/guides/sorting), which is a different feature.
-### Relevant Table Options
-<TableOptionsTable
-  onlyOptions={
-    new Set([
-      'enableRowOrdering',
-      'muiRowDragHandleProps',
-      'onDraggingRowChange',
-      'onHoveredRowChange',
-    ])
-  }
-/>
-### Relevant State
-<StateOptionsTable onlyOptions={new Set(['draggingRow', 'hoveredRow'])} />
-### Enable Row Ordering
-A common use for row drag and drop is to allow users to reorder rows in a table. This can be done by setting the `enableRowOrdering` table option to `true`, then setting up an `onDragEnd` event handler on the `muiRowDragHandleProps` table option.
-```jsx
-const table = useMaterialReactTable({
-  columns,
-  data,
-  enableRowOrdering: true,
-  enableSorting: false, //usually you do not want to sort when re-ordering
-  muiRowDragHandleProps: {
-    onDragEnd: (event, data) => {
-      //data re-ordering logic here
-    },
-  },
-});
-return <MaterialReactTable table={table} />;
-```
-<EnableOrderingExample />
-### Drag and Drop Rows to Other UI or Tables
-The drag-and-drop features are not limited to just internally within the same table. You can also use them to drag rows to other UI elements in your application or even to other tables. This can be done by setting the `enableRowDragging` table option to `true` and setting up an `onDragEnd` event handler on the `muiRowDragHandleProps` table option to perform whatever logic you want to happen when a row is dropped.
-<EnableDraggingExample />
-View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-row-ordering-examples)**