@mini_7/material-react-table-mcp 4.0.0

package/data/guides/global-filtering.md

@@ -0,0 +1,237 @@
+## Global Filtering (Search) Feature Guide
+
+Material React Table has a powerful built-in global filtering (search) feature that uses a fuzzy matching algorithm and ranks/sorts the results based on how closely rows match the search query. In this guide, we'll cover how to use, customize, or disable the global filter and search features to fit your needs.
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `enableFilterMatchHighlighting` - type `boolean` - default `true` - Enable or disable highlighting text that matches the filter in the table cells.
+- `enableGlobalFilter` - type `boolean` - default `true`
+- `enableGlobalFilterModes` - type `boolean` - default `true`
+- `enableGlobalFilterRankedResults` - type `boolean` - default `true`
+- `getColumnCanGlobalFilter` - type `(column: Column<TData, unknown>) => boolean`
+- `globalFilterFn` - type `MRT_FilterOption` - The filter function to use for global filtering.
+- `globalFilterModeOptions` - type `Array<MRT_FilterOption | string> | null`
+- `manualFiltering` - type `boolean` - Disables the getFilteredRowModel from being used to filter data. This may be useful if your table needs to dynamically support both client-side and server-side filtering.
+- `muiSearchTextFieldProps` - type `TextFieldProps | ({ table }) => TextFieldProps`
+- `onGlobalFilterChange` - type `OnChangeFn<GlobalFilterState>` - If provided, this function will be called with an updaterFn when state.globalFilter changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+- `onGlobalFilterFnChange` - type `OnChangeFn<GlobalFilterState>` - If provided, this function will be called with an updaterFn when state.globalFilter changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+- `onShowGlobalFilterChange` - type `OnChangeFn<boolean>`
+- `positionGlobalFilter` - type `'left' | 'right'` - default `'right'`
+- `renderGlobalFilterModeMenuItems` - type `({ internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]`
+
+### Relevant Column Options
+
+Relevant column options (get_mrt_api has full details):
+
+- `enableFilterMatchHighlighting` - type `boolean` - Enable or disable filter match highlighting for this column.
+- `enableGlobalFilter` - type `boolean`
+
+### Relevant State Options
+
+Relevant state options (get_mrt_api has full details):
+
+- `globalFilter` - type `any`
+- `globalFilterFn` - type `MRT_FilterFn`
+- `showGlobalFilter` - type `boolean` - default `false`
+
+### Disable Global Filtering
+
+You can either disable the global filter feature entirely or disable it for specific columns.
+
+#### Disable Global Filtering per Column
+
+If you simply want to not include a column as one of the columns that the global filter scans through during filtering, you can set the `enableGlobalFilter` option to `false` for that column.
+
+```tsx
+const columns = [
+  {
+    accessorKey: 'id',
+    header: 'Id',
+    enableGlobalFilter: false, // do not scan this column during global filtering
+  },
+  {
+    accessorKey: 'name',
+    header: 'Name',
+  },
+];
+```
+
+#### Disable Global Filter Feature
+
+You can disable the global filtering feature and hide the search icon by setting the `enableGlobalFilter` table option to `false`.
+
+```tsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableGlobalFilter: false, //disable search feature
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+### Client-Side Global Filtering
+
+Client-side filtering (and global filtering) is enabled by default. This means that the search box will scan through all columns and try to find matches for the search term.
+
+#### Global Filter Function
+
+You can use any of the built-in `filterFns` or any of the custom filter functions that you have defined in the `filterFns` prop, just like you would with the column filters.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  globalFilterFn: 'contains', //turn off fuzzy matching and use simple contains filter function
+});
+```
+
+Or a custom filter function:
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  filterFns: {
+    myCustomFilterFn: (row, id, filterValue) =>
+      row.getValue(id).startsWith(filterValue),
+  },
+  globalFilterFn: 'myCustomFilterFn', //set the global filter function to myCustomFilterFn
+});
+```
+
+The default global filter function is set to `fuzzy`, which is a filtering algorithm based on the popular `match-sorter` [library from Kent C. Dodds](https://www.npmjs.com/package/match-sorter), though you can change the global filter function by setting the `globalFilterFn` table option.
+
+#### Ranked Results
+
+If you keep the default `fuzzy` filterFn option as the global filter function, you get an extra ranked results feature enabled by default. This means that when a user searches with the search box, the results will be sorted by the closest match first instead of the order the data was defined in.
+
+The ranked results feature will disable itself automatically if a sort direction is applied to a column, if any sub-rows are expanded, or if any of the `manual` props are set to `true`.
+
+If you do not want ranked results to be enabled at all, but you still want fuzzy matching, you can set the `enableGlobalFilterRankedResults` table option to `false`.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableGlobalFilterRankedResults: false, //preserve the order of the data when fuzzy match searching
+});
+```
+
+#### Global Filter Modes
+
+Similar to the column filter modes, you can enable the user to be able to choose between multiple different filter modes for the global filter with the `enableGlobalFilterModes` table option. You can then customize which filter modes are available in the drop-down by setting the `globalFilterModeOptions` table option or by rendering your own custom menu items with the `renderGlobalFilterModeMenuItems` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableGlobalFilterModes: true, //enable the user to choose between multiple search filter modes
+  globalFilterModeOptions: ['fuzzy', 'startsWith'], //only allow the user to choose between fuzzy and startsWith filter modes
+});
+```
+
+#### Show Search Field by Default
+
+Additionally, if you want to show the search text box by default and not hide it behind the search icon, you can set the `showGlobalFilter` state to `true` in the `initialState`.
+
+### Manual Server-Side Global Filtering
+
+A very common use case when you have a lot of data is to filter the data on the server, instead of client-side. In this case, you will want to set the `manualFiltering` table option to `true` and manage the `globalFilter` state yourself like in the example below (can work in conjunction with [manual column filtering](/docs/guides/column-filtering#manual-server-side-column-filtering)).
+
+```tsx
+// You can manage and have control over the columnFilters state yourself
+const [globalFilter, setGlobalFilter] = useState('');
+const [data, setData] = useState([]); //data will get updated after re-fetching
+
+useEffect(() => {
+  const fetchData = async () => {
+    // send api requests when columnFilters state changes
+    const filteredData = await fetch();
+    setData([...filteredData]);
+  };
+}, [globalFilter]);
+
+const table = useMaterialReactTable({
+  columns,
+  data, // this will already be filtered on the server
+  manualFiltering: true, //turn off client-side filtering
+  onGlobalFilterChange: setGlobalFilter, //hoist internal global state to your state
+  state: { globalFilter }, //pass in your own managed globalFilter state
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+> Specifying `manualFiltering` turns off all client-side filtering and assumes that the `data` you pass to `<MaterialReactTable />` is already filtered.
+
+Here is the full Remote Data example showing off server-side **filtering**, pagination, and sorting.
+
+> Live example: `remote` (call get_mrt_example with that id).
+
+### Customize Global Filter Position
+
+You can customize the position of the global filter (search box) in the top toolbar by setting the `positionGlobalFilter` table option to `left` or `right`. It is shown on the right by default.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  positionGlobalFilter: 'left', //show the global filter on the left side of the top toolbar
+  initialState: {
+    showGlobalFilter: true, //show the global filter by default
+  },
+});
+```
+
+### Customize the Search Text Field
+
+You can customize the search text field by passing in props to the `muiSearchTextFieldProps` table option. This is useful if you want to customize the placeholder text, add styles, or any other text field props.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  muiSearchTextFieldProps: {
+    placeholder: 'Search all users',
+    sx: { minWidth: '300px' },
+    variant: 'outlined',
+  },
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+> Live example: `customize-global-filter-component` (call get_mrt_example with that id).
+
+### Filter Match Highlighting
+
+Filter match highlighting is a new featured enabled by default that will highlight text in the table body cells that matches the current search query with a shade of the `theme.palette.warning.main` color.
+
+If you are using a custom `Cell` render override for a column, you will need to use the `renderedCellValue` table option instead of `cell.getValue()` to preserve the filter match highlighting.
+
+```jsx
+const columns = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    Cell: ({ renderedCellValue }) => <span>{renderedCellValue}</span>, // use renderedCellValue instead of cell.getValue()
+  },
+];
+```
+
+#### Disable Filter Match Highlighting
+
+Filter match highlighting can be disabled by setting the `enableFilterMatchHighlighting` table option to `false`.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableFilterMatchHighlighting: false, //disable filter match highlighting
+});
+```
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-search-examples)**

package/data/guides/localization.md

@@ -0,0 +1,57 @@
+## Localization (i18n) Guide
+
+Material React Table has full support for localization (i18n). Some locales are included by default, but if your language is not yet supported, you can still easily add your own custom translations to the `localization` table option.
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `localization` - type `MRT_Localization`
+
+### Built-in Locales
+
+The following locales are included and can be imported from `'material-react-table/locales/'`:
+
+`ar`, `az`, `bg`, `cs`, `da`, `de`, `el`, `en`, `es`, `et`, `fa`, `fi`, `fr`, `he`, `hr`, `hu`, `hy`, `id`, `it`, `ja`, `ko`, `nl`, `no`, `np`, `pl`, `pt`, `pt-BR`, `ro`, `ru`, `sk`, `sr-Cyrl-RS`, `sr-Latn-RS`, `sv`, `tr`, `uk`, `vi`, `zh-Hans`, `zh-Hant`
+
+> If your language is not yet supported, please consider making a PR to add it to the library! See [here on GitHub](https://github.com/gyminii/material-react-table/tree/v4/packages/material-react-table/src/locales).
+
+#### Built-in Locale Examples
+
+Scroll and find your language below to see an example of how to use it.
+
+> Live examples: `localization-i18n-ar`, `localization-i18n-az`, `localization-i18n-bg`, `localization-i18n-cs`, `localization-i18n-da`, `localization-i18n-de`, `localization-i18n-el`, `localization-i18n-en`, `localization-i18n-es`, `localization-i18n-et`, `localization-i18n-fa`, `localization-i18n-fi`, `localization-i18n-fr`, `localization-i18n-he`, `localization-i18n-hr`, `localization-i18n-hu`, `localization-i18n-hy`, `localization-i18n-id`, `localization-i18n-it`, `localization-i18n-ja`, `localization-i18n-ko`, `localization-i18n-nl`, `localization-i18n-no`, `localization-i18n-np`, `localization-i18n-pl`, `localization-i18n-pt`, `localization-i18n-ro`, `localization-i18n-ru`, `localization-i18n-sk`, `localization-i18n-sv`, `localization-i18n-tr`, `localization-i18n-uk`, `localization-i18n-vi`, `localization-i18n-zh-hans`, `localization-i18n-zh-hant` (call get_mrt_example with an id).
+
+> Note: In some frameworks like Remix, you may need to use a full import path like <br /> `import { MRT_Localization_ES } from 'material-react-table/locales/es/index.js';` or <br /> `import { MRT_Localization_ES } from 'material-react-table/locales/es/index.esm.js';` <br />
+> to properly import the locale.
+
+### Custom Non-Built-In Translations
+
+If you want to use a language that is not included in the library, you can still easily add your own custom translations to the `localization` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  localization: {
+    language: 'pt', // BCP 47 language tag for number formatting
+    actions: 'Ações',
+    and: 'e',
+    cancel: 'Cancelar',
+    changeFilterMode: 'Alterar o modo de filtro',
+    changeSearchMode: 'Alterar o modo de pesquisa',
+    clearFilter: 'Limpar filtros',
+    clearSearch: 'Limpar pesquisa',
+    clearSort: 'Limpar classificações',
+    clickToCopy: 'Clique para copiar',
+    // ... and many more - see link below for full list of translation keys
+  },
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+For a full list of all available translation keys, see [here](https://github.com/gyminii/material-react-table/blob/v4/packages/material-react-table/src/locales/en.ts).
+Please note that each localization object should include a `language` property containing a valid BCP 47 language tag to ensure proper number formatting.
+
+If you end up fully translating MRT into another language that is not yet supported, please consider making a PR to add it to the library so that everyone can use it!

package/data/guides/memoization.md

@@ -0,0 +1,157 @@
+## 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
+
+Relevant table options (get_mrt_api has full details):
+
+- `columns` - type `Array<MRT_ColumnDef<TData>>` - The array of column defs to use for the table.
+- `data` - type `Array<TData>` - The data for the table to display. This can be an array of anything, but you will need to set up your column definitions to "access" the data. When the data option changes reference (compared via Object.is), the table will reprocess the data. Any other data processing that relies on the core data model (such as grouping, sorting, filtering, etc) will also be reprocessed.
+- `memoMode` - type `'cells' | 'rows' | 'table-body'`
+
+### 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/data/guides/pagination.md

@@ -0,0 +1,171 @@
+## 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
+
+Relevant table options (get_mrt_api has full details):
+
+- `enablePagination` - type `boolean` - default `true`
+- `manualPagination` - type `boolean` - Enables manual pagination. If this option is set to true, the table will not automatically paginate rows and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation.
+- `muiPaginationProps` - type `Partial<PaginationProps> | ({ table }) => Partial<PaginationProps>`
+- `onPaginationChange` - type `OnChangeFn<PaginationState>` - If this function is provided, it will be called when the pagination state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the tableOptions.state.pagination option.
+- `pageCount` - type `number` - When manually controlling pagination, you should supply a total pageCount value to the table if you know it. If you do not know how many pages there are, you can set this to -1.
+- `paginateExpandedRows` - type `boolean` - If true expanded rows will be paginated along with the rest of the table (which means expanded rows may span multiple pages). If false expanded rows will not be considered for pagination (which means expanded rows will always render on their parents page. This also means more rows will be rendered than the set page size)
+- `positionPagination` - type `'bottom' | 'top' | 'both'` - default `'bottom'`
+- `rowCount` - type `number`
+
+### Relevant State Options
+
+Relevant state options (get_mrt_api has full details):
+
+- `pagination` - type `{ pageIndex: number, pageSize: number } ` - default `{ pageIndex: 0, pageSize: 10 }`
+
+### 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',
+});
+```
+
+> Live example: `alternate-pagination` (call get_mrt_example with that id).
+
+### 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.
+
+> Live example: `remote` (call get_mrt_example with that id).
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-pagination-examples)**