` element, and all of the table head, body, and footer components.
+
+Be aware that using this deep of a component, you will lose out on row virtualization, modal editing, and full screen features. Use the above `` if you want to use those features.
+
+#### TableHead Components
+
+[View TableHead Components Source Code on GitHub](https://github.com/KevinVandy/mantine-react-table/tree/v2/packages/mantine-react-table/src/components/head)
+
+##### \
+
+The `` component contains the `` element, and all of the table head rows.
+
+##### \
+
+The `` is a `
` element that contains all of the table head cells in a row
+
+##### \
+
+The `` is a `
` element that contains all of the table head cell components. It contains all of the other table head cell components down below depending on which features are enabled.
+
+##### \
+
+A button that opens up the column actions menu.
+
+##### \
+
+The Sort Icon Button and Label next to a table header
+
+##### \
+
+The Filter Icon Button and Label next to a table header
+
+##### \
+
+The Grab Handle Icon Button next to a table header used for column dragging
+
+##### \
+
+The Resize Handle Icon Button next to a table header used for column resizing
+
+##### \
+
+The Filter Container that contains the filter input and filter actions
+
+#### TableBody Components
+
+[View TableBody Components Source Code on GitHub](https://github.com/KevinVandy/mantine-react-table/tree/v2/packages/mantine-react-table/src/components/body)
+
+##### \
+
+The `` component contains the `` element, and all of the table body rows. It has the ability to render multiple table bodies, depending on if static row pinning features are enabled and used.
+
+##### \
+
+The `` is a `
` element that contains all of the table body cells in a row.
+
+##### \
+
+A row and all column-spanning row for rendering detail panels for a row.
+
+##### \
+
+The `` is a `
` element that surrounds the cell value or custom `Cell` render.
+
+##### \
+
+Renders the value of a cell. This is a popular component to use as an alternative to TanStack Table's `flexRender` method. It renders everything inside of the `
`, but not the `
` itself.
+
+##### \
+
+A button for grabbing a row for dragging.
+
+##### \
+
+A button or buttons for pinning a row.
+
+#### TableFooter Components
+
+[View TableFooter Components Source Code on GitHub](https://github.com/KevinVandy/mantine-react-table/tree/v2/packages/mantine-react-table/src/components/footer)
+
+##### \
+
+The `` component contains the `` element, and all of the table footer rows.
+
+##### \
+
+The `` is a `
` element that contains all of the table footer cells in a row.
+
+##### \
+
+The `` is a `
` element that surrounds the cell value or custom `Footer` render.
+
+#### Input Components
+
+[View Input Components Source Code on GitHub](https://github.com/KevinVandy/mantine-react-table/tree/v2/packages/mantine-react-table/src/components/inputs)
+
+##### \
+
+The textfield component for editing a cell value that can either show in a modal or table cell.
+
+##### \
+
+The search textfield component for global filtering.
+
+##### \
+
+The textfield component for filtering a column. A somewhat comprehensive component that can be a textfield, select, multi-select, or date picker.
+
+##### \
+
+The checkbox component for filtering a column by boolean values.
+
+##### \
+
+The range slider component for filtering a column by a range of numbers.
+
+##### \
+
+A Container component that will render two MRT_FilterTextField components for filtering in a range (min and max).
+
+##### \
+
+A checkbox component for selecting a row or selecting all rows from the table header.
diff --git a/apps/mantine-react-table-docs/pages/docs/api/mrt-hooks.mdx b/apps/mantine-react-table-docs/pages/docs/api/mrt-hooks.mdx
new file mode 100644
index 000000000..87de40667
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/api/mrt-hooks.mdx
@@ -0,0 +1,147 @@
+import Head from 'next/head';
+import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';
+
+
+ {'MRT Hooks - Mantine React Table V2 Docs'}
+
+
+
+
+
+## MRT Hooks
+
+
+
+
+
+MRT has been adopting more and more of a hooks based approach for its internal logic. Its API is becoming more standardized so that you can use the same hooks that the MRT components use internally to build your own custom headless table if you want to.
+
+### useMantineReactTable
+
+[Source Code](https://github.com/KevinVandy/mantine-react-table/blob/v2/packages/mantine-react-table/src/hooks/useMantineReactTable.ts)
+
+> This is probably the only MRT hook you will need to use, unless you are writing a custom headless table.
+
+This is the main hook from Mantine React Table. It creates a TanStack Table instance with all of the features that MRT provides and that you enable, and uses the proper default table options.
+
+```tsx
+import { useMantineReactTable } from 'mantine-react-table';
+
+const table = useMantineReactTable({
+ ...options,
+});
+```
+
+This hook is the combination of 2 other internal MRT hooks: [`useMRT_TableOptions`](#usemrt_tableoptions), and [`useMRT_TableInstance`](#usemrt_tableinstance).
+
+### useMRT_TableOptions
+
+[Source Code](https://github.com/KevinVandy/mantine-react-table/blob/v2/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts)
+
+This hook simply takes in your custom table options and merges them with the default table options. It also does some extra logic to make sure that some default table options are set correctly based on other enabled features. For example, if you enable row virtualization features, the sticky header will also be enabled by default, and the layoutMode will adjust accordingly.
+
+```tsx
+import { useMRT_TableOptions } from 'mantine-react-table';
+
+const transformedTableOptions = useMRT_TableOptions({
+ ...options,
+});
+```
+
+### useMRT_TableInstance
+
+[Source Code](https://github.com/KevinVandy/mantine-react-table/blob/v2/packages/mantine-react-table/src/hooks/useMRT_TableInstance.ts)
+
+This is where most of the magic happens. This hook is responsible for creating the TanStack Table instance, and adding all of the MRT features to it. It needs table options to be passed in to it correctly, with good defaults, and it will return the table instance.
+
+```tsx
+import { useMRT_TableInstance } from 'mantine-react-table';
+
+const table = useMRT_TableInstance({
+ ...transformedTableOptions, //usually from useMRT_TableOptions
+});
+```
+
+This hook also uses the [`useMRT_Effects`](#usemrt_effects)
+
+### useMRT_Effects
+
+[Source Code](https://github.com/KevinVandy/mantine-react-table/blob/v2/packages/mantine-react-table/src/hooks/useMRT_Effects.ts)
+
+This hook is responsible for adding some extra useEffect hooks to the table instance. These hooks are needed by some MRT features on a table wide level.
+
+### useMRT_Rows
+
+[Source Code](https://github.com/KevinVandy/mantine-react-table/blob/v2/packages/mantine-react-table/src/hooks/useMRT_Rows.ts)
+
+This hook is mostly a wrapper around `table.getRowModel`, but with a bit more custom logic for fuzzy ranking, row pinning, and more. It consumes a `table` instance and returns the rows that should be rendered in the main table body. This can be a useful hook if you are writing a custom headless table, but still want all of the extra MRT enhanced behavior for fuzzy ranking, row pinning, etc. Alternatively, you can just use `table.getRowModel()` for a more vanilla TanStack Table experience.
+
+```tsx
+import { useMantineReactTable, useMRT_Rows } from 'mantine-react-table';
+
+const table = useMantineReactTable({
+ ...options,
+});
+
+const rows = useMRT_Rows(table);
+
+return rows.map((row) => {
+ //render row
+});
+```
+
+### useMRT_ColumnVirtualizer
+
+[Source Code](https://github.com/KevinVandy/mantine-react-table/blob/v2/packages/mantine-react-table/src/hooks/useMRT_ColumnVirtualizer.ts)
+
+This hook is a wrapper around the `useVirtualizer` hook from TanStack Virtual. It consumes a `table` instance and returns a Column Virtualizer instance that is optimized for MRT table columns, with considerations for other MRT features like column pinning, column resizing, column hiding, and more.
+
+```tsx
+import {
+ useMantineReactTable,
+ useMRT_ColumnVirtualizer,
+} from 'mantine-react-table';
+
+const table = useMantineReactTable({
+ ...options,
+});
+
+const columnVirtualizer = useMRT_ColumnVirtualizer(table);
+```
+
+You would only need to use this hook if you are writing a custom headless table and want the same default column virtualization behavior that MRT provides. If you are using the MRT components, this hook is already used internally by the `MRT_Table` component.
+
+### useMRT_RowVirtualizer
+
+[Source Code](https://github.com/KevinVandy/mantine-react-table/blob/v2/packages/mantine-react-table/src/hooks/useMRT_RowVirtualizer.ts)
+
+This hook is a wrapper around the `useVirtualizer` hook from TanStack Virtual. It consumes a `table` instance and returns a Row Virtualizer instance that is optimized for MRT table rows, with considerations for other MRT features like row pinning, row dragging, and more.
+
+```tsx
+import {
+ useMantineReactTable,
+ useMRT_RowVirtualizer,
+} from 'mantine-react-table';
+
+const table = useMantineReactTable({
+ ...options,
+});
+
+const rowVirtualizer = useMRT_RowVirtualizer(table);
+```
+
+You would only need to use this hook if you are writing a custom headless table and want the same default row virtualization behavior that MRT provides. If you are using the MRT components, this hook is already used internally by the `MRT_Table` component.
diff --git a/apps/mantine-react-table-docs/pages/docs/api/row-instance-apis.mdx b/apps/mantine-react-table-docs/pages/docs/api/row-instance-apis.mdx
index e0cbf26f1..cf36bfc6a 100644
--- a/apps/mantine-react-table-docs/pages/docs/api/row-instance-apis.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/api/row-instance-apis.mdx
@@ -1,9 +1,10 @@
import Head from 'next/head';
import RowInstanceAPIsTable from '../../../components/prop-tables/RowInstanceAPIsTable';
import SourceCode from '../../../components/prop-tables/RowInstanceAPIsSource';
+import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';
- Row Instance APIs - Mantine React Table Docs
+ {'Row Instance APIs - Mantine React Table V2 Docs'}
+
+> NOTE: These are NOT [props](/docs/api/props) or [column options](/docs/api/column-options) for Mantine React Table. These are just static methods on a row instance that you can use.
+
Every row in the table has an associated row instance that can be accessed in many of the callback props that you can use to access a row's information and methods.
You can access and use a `row` object in quite a few places, but here are some of the most common:
@@ -30,7 +54,7 @@ const columns = [
accessorKey: 'salary',
header: 'Salary',
//you can access a row instance in column definition option callbacks like this
- mantineEditTextInputProps: ({ row }) => ({
+ mantineEditTextFieldProps: ({ row }) => ({
disabled: row.original.employmentStatus === 'Retired',
}),
//or in the component override callbacks like this
@@ -47,6 +71,7 @@ const columns = [
const table = useMantineReactTable({
columns,
data,
+ //or a row instance in callback props like this
mantineSelectCheckboxProps: ({ row }) => ({
disabled: row.original.isAccountActive === false,
}),
@@ -57,8 +82,6 @@ const table = useMantineReactTable({
),
});
-
-return ;
```
diff --git a/apps/mantine-react-table-docs/pages/docs/api/state-options.mdx b/apps/mantine-react-table-docs/pages/docs/api/state-options.mdx
index 5105224d1..02aebea64 100644
--- a/apps/mantine-react-table-docs/pages/docs/api/state-options.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/api/state-options.mdx
@@ -1,9 +1,10 @@
import Head from 'next/head';
import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
import SourceCode from '../../../components/prop-tables/StateOptionsSource';
+import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';
- State Options - Mantine React Table Docs
+ {'State Options - Mantine React Table V2 Docs'}
+
> Many of the state options you can pass here are the same as the ones you can pass to the [useReactTable](https://tanstack.com/table/v8/docs/api/core/table) useTableInstance hook.
Here is a list of all the state options you can pass to `initialState` or `state`.
@@ -28,15 +46,14 @@ Here is a list of all the state options you can pass to `initialState` or `state
const table = useMantineReactTable({
columns,
data,
+ //note: each individual state must be mutually exclusive to `initial state` or `state`
initialState: {
// all the state options you can pass here
},
state: {
- // or here - NOTE: state values will override initialState values
+ // or here
},
});
-
-return ;
```
diff --git a/apps/mantine-react-table-docs/pages/docs/api/table-instance-apis.mdx b/apps/mantine-react-table-docs/pages/docs/api/table-instance-apis.mdx
index a6d98dabc..de99989ad 100644
--- a/apps/mantine-react-table-docs/pages/docs/api/table-instance-apis.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/api/table-instance-apis.mdx
@@ -1,9 +1,10 @@
import Head from 'next/head';
import TableInstanceAPIsTable from '../../../components/prop-tables/TableInstanceAPIsTable';
import SourceCode from '../../../components/prop-tables/TableInstanceAPIsSource';
+import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';
- Table Instance APIs - Mantine React Table Docs
+ {'Table Instance APIs - Mantine React Table V2 Docs'}
-You can also access the table instance by consuming a `table` param from many of the callback functions in many of the props.
+> NOTE: These are NOT the [table options](/docs/api/table-options) for Mantine React Table. These are just static methods on a table instance that you can use.
+
+These are the methods available on the `table` instance that is returned from the `useMantineReactTable` hook. You can use these methods to interact with the table instance.
```jsx
const columns = useMemo(() => [
@@ -46,8 +68,6 @@ const someEventHandler = () => {
return ;
```
-> NOTE: These are NOT the [table options](/docs/api/table-options) for Mantine React Table. These are just static methods on a table instance that you can use.
-
diff --git a/apps/mantine-react-table-docs/pages/docs/api/table-options.mdx b/apps/mantine-react-table-docs/pages/docs/api/table-options.mdx
index 60f78e53d..14cc48d92 100644
--- a/apps/mantine-react-table-docs/pages/docs/api/table-options.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/api/table-options.mdx
@@ -1,9 +1,10 @@
import Head from 'next/head';
import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
import SourceCode from '../../../components/prop-tables/TableOptionsSource';
+import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';
- Table Options - Mantine React Table Docs
+ {'Table Options - Mantine React Table V2 Docs'}
+
> Many of the options you can pass to `useMantineReactTable` are the same as the ones you can pass to the TanStack Table [useReactTable](https://tanstack.com/table/v8/docs/api/core/table) hook.
Here is a list of all the table options that you can pass to the `useMantineReactTable` hook.
```jsx
const table = useMantineReactTable({
- // all the options that you can pass here
+ // all the options that you can pass here (recommended)
});
-//Note: you can also pass table options directly to the MantineReactTable component instead of the table instance
-//But this will not be encouraged as it will be deprecated in the future
-return ;
+//or all of the props that could be passed to `` IF not using `useMantineReactTable` hook
+return (
+
+);
+
+return ; //recommended
```
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/chart-detail-panel.mdx b/apps/mantine-react-table-docs/pages/docs/examples/chart-detail-panel.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/column-grouping.mdx b/apps/mantine-react-table-docs/pages/docs/examples/column-grouping.mdx
new file mode 100644
index 000000000..dbd8ce68e
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/column-grouping.mdx
@@ -0,0 +1,23 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/ExpandingExamples';
+
+
+ {'Column Grouping Example - Mantine React Table V2 Docs'}
+
+
+
+
+
+## Column Grouping Example
+
+Mantine React Table has a few different UI options and behaviors for displaying grouped columns. See the [Column Grouping Guide](/docs/guides/column-grouping) to learn more.
+
+
+
+View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/features-column-grouping-examples)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/column-ordering.mdx b/apps/mantine-react-table-docs/pages/docs/examples/column-ordering.mdx
new file mode 100644
index 000000000..465248c83
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/column-ordering.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/DraggingExamples';
+
+
+ Column DnD Ordering Example - Mantine React Table Docs
+
+
+
+
+
+## Column DnD Ordering Example
+
+Mantine React Table has built-in support for column drag and drop re-ordering. Learn more about column ordering in the [Column Ordering Feature Guide](/docs/guides/column-ordering-dnd).
+
+
+
+View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/column-pinning.mdx b/apps/mantine-react-table-docs/pages/docs/examples/column-pinning.mdx
new file mode 100644
index 000000000..d346ff1f6
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/column-pinning.mdx
@@ -0,0 +1,23 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/StickyPinningExamples';
+
+
+ {'Column Pinning Example - Mantine React Table V2 Docs'}
+
+
+
+
+
+## Column Pinning Example
+
+Mantine React Table has an easy-to-enable column pinning feature. Columns can be pinned to the left or right of the table, and the column will be frozen in place while the rest of the table scrolls horizontally. See the [Column Pinning Feature Guide](/docs/guides/column-pinning) for more information.
+
+
+
+View Extra Storybook **[Examples](https://www.Mantine-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/column-virtualization.mdx b/apps/mantine-react-table-docs/pages/docs/examples/column-virtualization.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/custom-filter-ui.mdx b/apps/mantine-react-table-docs/pages/docs/examples/custom-filter-ui.mdx
new file mode 100644
index 000000000..e77a7f9ef
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/custom-filter-ui.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/FilteringExamples';
+
+
+ {'Custom Filter UI Example - Mantine React Table V2 Docs'}
+
+
+
+
+
+## Custom Filter UI Example
+
+Mantine React Table supports rendering your own custom filter UI. This can be useful if you want to render your filters in a custom top toolbar, sidebar, or drawer. Learn more in the full [Column Filtering Feature Guide](/docs/guides/column-filtering).
+
+
+
+View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/customized-grouping.mdx b/apps/mantine-react-table-docs/pages/docs/examples/customized-grouping.mdx
new file mode 100644
index 000000000..dbef3f1f8
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/customized-grouping.mdx
@@ -0,0 +1,23 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/ExpandingExamples';
+
+
+ {'Customized Grouping Example - Mantine React Table V2 Docs'}
+
+
+
+
+
+## Customized Grouping Example
+
+Here is an advanced example showing off various ways in which the expand column can be customized with column grouping features. See the [Column Grouping Guide](/docs/guides/column-grouping) to learn more.
+
+
+
+View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/features-column-grouping-examples)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/detail-panel.mdx b/apps/mantine-react-table-docs/pages/docs/examples/detail-panel.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/dynamic-columns.mdx b/apps/mantine-react-table-docs/pages/docs/examples/dynamic-columns.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/editing-crud-tree.mdx b/apps/mantine-react-table-docs/pages/docs/examples/editing-crud-tree.mdx
new file mode 100644
index 000000000..30d5f4705
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/editing-crud-tree.mdx
@@ -0,0 +1,30 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/EditingCRUDExamples';
+
+
+ {'Editing CRUD Tree Example - Mantine React Table V2 Docs'}
+
+
+
+
+
+## Editing (CRUD) Tree Example
+
+Editing nested row data can be challenging. In this example, rows can be expanded to show sub rows, and editing and creating new rows can be done at any level.
+
+Adding a new blank row in the exact row index position is now possible with the new `positionCreatingRow` table option.
+
+This example also shows some complex client-side optimistic updates, where the table data is updated immediately after a valid user action.
+
+
+
+View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/features-creating-examples--create-row-index-index-expanding)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/expanding-tree-flat-parse.mdx b/apps/mantine-react-table-docs/pages/docs/examples/expanding-tree-flat-parse.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/expanding-tree.mdx b/apps/mantine-react-table-docs/pages/docs/examples/expanding-tree.mdx
new file mode 100644
index 000000000..b5ecabe6e
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/expanding-tree.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/ExpandingExamples';
+
+
+ {'Expanding Tree Example - Mantine React Table V2 Docs'}
+
+
+
+
+
+## Expanding Tree Example
+
+Mantine React Table supports showing rows in a expanding tree structure. This example is the ***simplest*** implementation of this feature where each row of data potentially has a special `subRows` property that contains an array of sub rows. You don't have to follow this exact structure, but this is how MRT will expect to find your sub rows by default.
+
+Learn more about how to customize this in the [expanding sub-rows feature guide](/docs/guides/expanding-sub-rows).
+
+
\ No newline at end of file
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/faceted-values.mdx b/apps/mantine-react-table-docs/pages/docs/examples/faceted-values.mdx
new file mode 100644
index 000000000..6cea667a5
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/faceted-values.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/FilteringExamples';
+
+
+ {'Faceted Values Example - Mantine React Table V2 Docs'}
+
+
+
+
+
+## Faceted Values Example
+
+Mantine React Table can scan your data and automatically generate filter autocomplete suggestions, filter select options, or min and max values for your column filters. This is made possible by the faceted values feature from TanStack Table. Learn more in the full [Column Filtering Feature Guide](/docs/guides/column-filtering).
+
+
+
+View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/filter-switching.mdx b/apps/mantine-react-table-docs/pages/docs/examples/filter-switching.mdx
new file mode 100644
index 000000000..a8e6cfa8d
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/filter-switching.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/FilteringExamples';
+
+
+ {'Filter Switching Example - Mantine React Table V2 Docs'}
+
+
+
+
+
+## Filter Switching Example
+
+Mantine React Table supports letting users switch between multiple filter modes. Learn more in the full [Column Filtering Feature Guide](/docs/guides/column-filtering).
+
+
+
+View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/filter-variants.mdx b/apps/mantine-react-table-docs/pages/docs/examples/filter-variants.mdx
new file mode 100644
index 000000000..b9080b18b
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/filter-variants.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/FilteringExamples';
+
+
+ {'Filter Variants Example - Mantine React Table V2 Docs'}
+
+
+
+
+
+## Filter Variants Example
+
+Mantine React Table not only has filtering built in, but it also has a lot of different filter variants that take care of a lot of the heavy lifting for you. Text filters, date filters, range filters, range slider filters, and more are all built in and ready to use. There is much more you can do to customize the behavior of filtering, so be sure to check out the full [Column Filtering Feature Guide](/docs/guides/column-filtering) for more information.
+
+
+
+View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/lazy-detail-panel.mdx b/apps/mantine-react-table-docs/pages/docs/examples/lazy-detail-panel.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/lazy-sub-rows.mdx b/apps/mantine-react-table-docs/pages/docs/examples/lazy-sub-rows.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/popover-filters.mdx b/apps/mantine-react-table-docs/pages/docs/examples/popover-filters.mdx
new file mode 100644
index 000000000..915a7f0f3
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/popover-filters.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/FilteringExamples';
+
+
+ {'Popover Filters Example - Mantine React Table V2 Docs'}
+
+
+
+
+
+## Popover Filters Example
+
+Mantine React Table supports displaying column filters in other ways than in the default sub-header location. This example shows how to only display column filters when the user clicks on the filter icon in the header and then display the filters in a popover. Learn more in the full [Column Filtering Feature Guide](/docs/guides/column-filtering).
+
+
+
+View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/row-dragging.mdx b/apps/mantine-react-table-docs/pages/docs/examples/row-dragging.mdx
new file mode 100644
index 000000000..85b09f168
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/row-dragging.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/DraggingExamples';
+
+
+ Row DnD Dragging Example - Mantine React Table Docs
+
+
+
+
+
+## Column DnD Ordering Example
+
+Mantine React Table has built-in support row drag and drop features that can be used in a variety of ways. Learn more about column ordering in the [Row Ordering/DnD Feature Guide](/docs/guides/row-ordering-dnd).
+
+
+
+View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/row-ordering.mdx b/apps/mantine-react-table-docs/pages/docs/examples/row-ordering.mdx
new file mode 100644
index 000000000..ae5003087
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/row-ordering.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/DraggingExamples';
+
+
+ Row DnD Ordering Example - Mantine React Table Docs
+
+
+
+
+
+## Row DnD Ordering Example
+
+Mantine React Table has built-in support for row drag and drop re-ordering. Learn more about column ordering in the [Row Ordering Feature Guide](/docs/guides/row-ordering-dnd).
+
+
+
+View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/row-virtualization.mdx b/apps/mantine-react-table-docs/pages/docs/examples/row-virtualization.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/static-row-pinning.mdx b/apps/mantine-react-table-docs/pages/docs/examples/static-row-pinning.mdx
new file mode 100644
index 000000000..17aa2b5f8
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/static-row-pinning.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/StickyPinningExamples';
+
+
+ {'Static Row Pinning Example - Mantine React Table V2 Docs'}
+
+
+
+
+
+## Static Row Pinning Example
+
+Mantine React Table has the ability to pin rows and keep them in view while scrolling. In this example, when rows are pinned, they will be pinned statically to either the top or bottom of the table. Learn more about row pinning in the [Row Pinning Feature Guide](/docs/guides/row-pinning).
+
+
+
+View Extra Storybook **[Examples](https://www.Mantine-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/sticky-header.mdx b/apps/mantine-react-table-docs/pages/docs/examples/sticky-header.mdx
new file mode 100644
index 000000000..990c526c1
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/sticky-header.mdx
@@ -0,0 +1,23 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/StickyPinningExamples';
+
+
+ {'Sticky Header Example - Mantine React Table V2 Docs'}
+
+
+
+
+
+## Sticky Header Example
+
+Mantine React Table allows you to easily make the header and footer sticky while scrolling. See the [Sticky Header Feature Guide](/docs/guides/sticky-header) for more information.
+
+
+
+View Extra Storybook **[Examples](https://www.Mantine-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/sticky-row-pinning.mdx b/apps/mantine-react-table-docs/pages/docs/examples/sticky-row-pinning.mdx
new file mode 100644
index 000000000..3fdaec06b
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/sticky-row-pinning.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/StickyPinningExamples';
+
+
+ {'Sticky Row Pinning Example - Mantine React Table V2 Docs'}
+
+
+
+
+
+## Sticky Row Pinning Example
+
+Mantine React Table has the ability to pin rows and keep them in view while scrolling. In this example, when rows are pinned, they will initially appear to stay in place, but when the user scrolls up or down, the rows will stick to the top or bottom of the table. Learn more about row pinning in the [Row Pinning Feature Guide](/docs/guides/row-pinning).
+
+
+
+View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/sticky-row-selection.mdx b/apps/mantine-react-table-docs/pages/docs/examples/sticky-row-selection.mdx
new file mode 100644
index 000000000..8e2886172
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/examples/sticky-row-selection.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/StickyPinningExamples';
+
+
+ {'Sticky Row Pinning Example - Mantine React Table V2 Docs'}
+
+
+
+
+
+## Sticky Row Pinning Example
+
+Mantine React Table has the ability to pin rows and keep them in view while scrolling. In this example, when rows are pinned, they will initially appear to stay in place, but when the user scrolls up or down, the rows will stick to the top or bottom of the table. Learn more about row pinning in the [Row Pinning Feature Guide](/docs/guides/row-pinning).
+
+
+
+View Extra Storybook **[Examples](https://www.Mantine-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/mantine-react-table-docs/pages/docs/getting-started/install.mdx b/apps/mantine-react-table-docs/pages/docs/getting-started/install.mdx
index 9ee5b2931..65257e1ac 100644
--- a/apps/mantine-react-table-docs/pages/docs/getting-started/install.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/getting-started/install.mdx
@@ -5,56 +5,115 @@ import { Alert } from '@mantine/core';
import { IconInfoCircle } from '@tabler/icons-react';
- Installation - Mantine React Table Docs
+ {'Installation - Mantine React Table Docs V2'}
-> This is the install guide for `mantine-react-table` **V2** and `@mantine/` packages **V7**. MRT V2 will not work with Mantine V6.
+> This is the install guide for `mantine-react-table` **V3** and `@mantine/` packages **V8**. MRT V2 will not work with Mantine V6-7.
-}>
- Mantine React Table V2 is still a work in progress, but we are making good progress every day.
+}>
+ Mantine React Table V2 is still a work in progress, but we are making good
+ progress every day.
## Installation
-> `mantine-react-table` V1 requires **Mantine V6.0+** packages as dependencies in your project.
+> `mantine-react-table` V3 requires **Mantine V8.0+** packages as dependencies in your project.
>
> If you are already using Mantine, you probably already have most of these peer dependencies installed.
>
> Just double-check that you have the following in your package.json, or use the [full install commands](<#install-with-required-peer-dependencies-(recommended)>) below.
>
-> 1. `@mantine/core` (^v7.1+)
-> 2. `@mantine/hooks` (^v7.1+)
-> 3. `@mantine/dates` (^v7.1+)
+> 1. `@mantine/core` (^v8.0+)
+> 2. `@mantine/hooks` (^v8.0+)
+> 3. `@mantine/dates` (^v8.0+)
> 4. `@tabler/icons-react` (2.23.0+)
-> 6. `dayjs` (v1.11+)
+> 5. `dayjs` (v1.11+)
+> 6. `clsx` (v2+)
> 7. `react` and `react-dom` (v18)
### Quick Install
-
+The Quick Install instructions here assume you already have Mantine V8 installed and correctly configured with postcss in your project.
+
+
### Install With Required Peer Dependencies (Recommended)
+It is best to refer to the [Mantine V8 installation guide](https://mantine.dev/getting-started/) for the most up-to-date instructions on how to install Mantine V8 for your specific React meta framework. (Next.js, Remix, Vite, etc.)
+
+#### Install Mantine React Table with Mantine required peer dependencies:
+
+
> You do NOT need to install `@tanstack/react-table`, as it is already an internal dependency of `mantine-react-table`, and must use an exact version already specified internally.
>
> All internal dependencies: `@tanstack/react-table`, `@tanstack/react-virtual`, and `@tanstack/match-sorter-utils`
+#### Install PostCSS dev dependencies (Optional)
+
+If you are using Mantine V8, it is common to use CSS modules for advanced custom styling. You may want to install and configure PostCSS like down below, but it is not required if you are using a different styling solution.
+
+
+
+
+Create a `postcss.config.cjs` file in the root of your project with the following contents:
+
+```js
+module.exports = {
+ plugins: {
+ 'postcss-preset-mantine': {},
+ 'postcss-simple-vars': {
+ variables: {
+ 'mantine-breakpoint-xs': '36em',
+ 'mantine-breakpoint-sm': '48em',
+ 'mantine-breakpoint-md': '62em',
+ 'mantine-breakpoint-lg': '75em',
+ 'mantine-breakpoint-xl': '88em',
+ },
+ },
+ },
+};
+```
+
+
+
+### Setup Mantine Theme
+
+The [Mantine V8 installation guide](https://mantine.dev/getting-started/) has much better instructions for how to set up your Mantine theme, but you should have something like this in your project:
+
+```tsx
+import { MantineProvider, createTheme } from '@mantine/core';
+
+const theme = createTheme({
+ /** Put your mantine theme override here */
+});
+
+function Demo() {
+ return (
+
+
+
+ );
+}
+```
+
### Import CSS Styles
After you install mantine-react-table, you will need to import the CSS styles from `mantine-react-table/styles.css` at the root of your project. (Where you import your other Mantine CSS styles.)
```js
-import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT
-import '@mantine/dates/styles.css';
+import '@mantine/core/styles.css'; //import Mantine V8 styles needed by MRT
+import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //import MRT styles
```
### Common Errors
-If you don't see any styles applied to the mantine table components, you may have mismatching versions of `mantine-react-table` and `@mantine/core`. MRT v1 requires Mantine v6 and will not work with Mantine v7. MRT v2 will be released by the end of 2023 and will work with Mantine v7.
+If you don't see any styles applied to the mantine table components, you may have mismatching versions of `mantine-react-table` and `@mantine/core`. MRT v1 requires Mantine v6 and will not work with Mantine v7. MRT v3 now targets Mantine v8.
+
+Also, if the Action Icon Buttons all have a filled color, that is a good sign that you simply forgot to import the MRT CSS file in the step above.
If you get an error like this:
@@ -67,7 +126,7 @@ or you might have mixed up default and named imports.
You probably do not have the correct version of Mantine or Tabler Icons installed.
-Make sure all mantine packages are at least v6.
+Make sure all mantine packages are at least v8.0.
Make sure that the `@tabler/icons-react` package is at least v2.23.0.
@@ -101,7 +160,15 @@ Then try upgrading either `webpack` or `react-scripts` to the latest versions.
name: 'Does Mantine V7 Work with Mantine React Table?',
acceptedAnswer: {
'@type': 'Answer',
- text: 'Eventually. MRT v2 will be completely rewritten to use Mantine v7. This should be available by the end of 2023.',
+ text: 'MRT v2 will be completely rewritten to use Mantine v7. This should be available by the end of 2023.',
+ },
+ },
+ {
+ '@type': 'Question',
+ name: 'Does Mantine V8 Work with Mantine React Table?',
+ acceptedAnswer: {
+ '@type': 'Answer',
+ text: 'MRT v3 will be completely rewritten to use Mantine v8.',
},
},
{
diff --git a/apps/mantine-react-table-docs/pages/docs/getting-started/usage.mdx b/apps/mantine-react-table-docs/pages/docs/getting-started/usage.mdx
index 623410163..8db29db9f 100644
--- a/apps/mantine-react-table-docs/pages/docs/getting-started/usage.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/getting-started/usage.mdx
@@ -2,7 +2,7 @@ import Head from 'next/head';
import SimpleCodeSandbox from '../../../examples/SimpleCodeSandbox';
- Usage - Mantine React Table Docs
+ {'Usage - Mantine React Table V2 Docs'}
**Common Gotcha**: When defining `data` that will be passed to a `useMantineReactTable` hook, make sure that the `data` is _memoized_ or _stable_ (i.e. `useState`, `useMemo`, defined outside of your table component, etc.). Otherwise you may get infinite renders.
+
#### Simple Data Example
```jsx
@@ -54,11 +56,11 @@ const data = [
];
```
-Your data does NOT have to be created statically like this, of course. More than likely, your data is being fetched from a backend API. Check out the [Remote Data example](/docs/examples/remote) to see how you can use a remote data source.
+Your data does NOT have to be created statically like this, of course. More than likely, your data is being fetched from a backend API. Check out the [Remote Data examples](/docs/examples/react-query) to see how you can fetch data and pass it to your tables.
### Creating Columns
-There are several different ways to define columns, depending on your needs. Let's create some basic "data" columns. That is, columns that connect to our data. Since we defined our data in a flat object format, we can simply use the `accessorKey` property to access the data.
+There are several different ways to define columns, depending on your needs. Let's create some basic `"data"` columns. That is, columns that connect to our data. Most of the time, we can simply use the `accessorKey` property to access the data if the data is in a simple format. Alternatively, if some data in a column needs some logic or processing, you can use the `accessorFn` property to define a function that returns the data for each cell.
#### Simple Column Definition Example
@@ -70,6 +72,13 @@ const columns = useMemo(
header: 'Name',
accessorKey: 'name', //simple recommended way to define a column
//more column options can be added here to enable/disable features, customize look and feel, etc.
+ //optional custom cell render
+ Cell: ({ row }) => (
+
+
+ {row.name}
+
+ ),
},
{
header: 'Age',
@@ -80,9 +89,11 @@ const columns = useMemo(
);
```
+> Note: Do NOT have your accessors resolve JSX or markup. That's what custom `Cell` renders are for. Accessors should only return primitive data so that the table can sort, filter, search, and group properly.
+
### Full Simple Example
-Put it all together, and you have a basic table! You can also play around and enable some features, either per column in the column definitions, or as props passed to ``.
+Put it all together, and you have a basic table! You can also play around and enable some features, either per column in the column definitions, or as table options passed to `useMantineReactTable`.
```tsx
import { useMemo } from 'react';
@@ -118,6 +129,7 @@ export default function App() {
accessorKey: 'name', //simple recommended way to define a column
header: 'Name',
mantineTableHeadCellProps: { style: { color: 'green' } }, //custom props
+ enableHiding: false, //disable a feature for this column
},
{
accessorFn: (originalRow) => originalRow.age, //alternate way
@@ -134,17 +146,17 @@ export default function App() {
columns,
data, //must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
enableRowSelection: true, //enable some features
- enableColumnOrdering: true,
+ enableColumnOrdering: true, //enable a feature for all columns
enableGlobalFilter: false, //turn off a feature
});
//note: you can also pass table options as props directly to instead of using useMantineReactTable
- //but that is not recommended and will likely be deprecated in the future
+ //but the useMantineReactTable hook will be the most recommended way to define table options
return ;
}
```
-> **Note:** It is very important that the columns and data definitions are _memoized_ or _stable_. Otherwise, the entire table will be re-rendered during every react re-render in your application, which can lead to performance issues. To make a variable stable, store it in `useState`, wrap it in `useMemo`, or define it outside of a component so it does not get recreated on every render.
+> **Note:** Again, it is very important that the columns and data definitions are _memoized_ or _stable_. Otherwise, the entire table will be re-rendered during every react re-render in your application, which can lead to performance issues. To make a variable stable, store it in `useState`, wrap it in `useMemo`, define it outside of a component, or in your state management tool of choice so it does not get recreated on every render and cause an infinite re-render loop.
### Live Code Sandbox Example
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/aggregation-and-grouping.mdx b/apps/mantine-react-table-docs/pages/docs/guides/aggregation.mdx
similarity index 100%
rename from apps/mantine-react-table-docs/pages/docs/guides/aggregation-and-grouping.mdx
rename to apps/mantine-react-table-docs/pages/docs/guides/aggregation.mdx
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/best-practices.mdx b/apps/mantine-react-table-docs/pages/docs/guides/best-practices.mdx
new file mode 100644
index 000000000..667b01425
--- /dev/null
+++ b/apps/mantine-react-table-docs/pages/docs/guides/best-practices.mdx
@@ -0,0 +1,370 @@
+import Head from 'next/head';
+
+
+ {'Best Practices (TypeScript) - Mantine React Table V2 Docs'}
+
+
+
+## MRT Best Practices
+
+Here are some best practices to follow when using Mantine React Table. We'll cover Type-Safety (even if you are not using TypeScript) and how to best create re-usable MRT components.
+
+### Stay Up-To-Date
+
+Run this command in your terminal every few weeks to make sure you are using the latest version of Mantine React Table and other Mantine packages:
+
+```bash
+npx npm-check-updates -u mantine-react-table @mantine/core @mantine/hooks @mantine/dates @tabler/icons-react dayjs clsx
+```
+
+### Type-Safety
+
+TanStack Table itself is written in TypeScript, and Mantine React Table builds on top of its great type definitions for a best-in-class TypeScript experience.
+
+If, however, you cannot use TypeScript in your project for some reason, checkout down below for [how to use JSDoc instead of TypeScript](#use-jsdoc-instead-of-typescript) to get the same type hints.
+
+#### Is TypeScript Required?
+
+No, TypeScript is not required to use Mantine React Table. You can just use JavaScript and everything will work just fine, but you will be missing out on a lot of great type hints and type safety that can help you build your app faster and with less bugs.
+
+There are a couple of ways to still get type hints without TypeScript with the [`createMRTColumnHelper`](#createmrtcolumnhelper-utility) utility function or by using [JSDoc](#use-jsdoc-instead-of-typescript), so you can still get some of the benefits of type safety without TypeScript.
+
+#### Defining TData Type
+
+Mantine React Table makes use of generics to make working with your specific row data structures easier. You will see that most of the `MRT_*` types that you can use accept a `TData` generic.
+
+Let's say that the data in your table is an array of users that looks like this:
+
+```tsx
+const data: User[] = [
+ { id: 1, name: 'John', age: 23 },
+ { id: 2, name: 'Alice', age: 17 },
+ { id: 3, name: 'Bob', age: 32 },
+];
+```
+
+Then your `TData` type can be defined as:
+
+```tsx
+export type User = {
+ id: number;
+ name: string;
+ age: number;
+};
+```
+
+You will often pass this `TData` type as a generic to the `MRT_*` types that you use so that you can get type hints for your specific data structure.
+
+#### Define Your Columns With Type-Safety
+
+Mantine React Table provides a couple of ways to define your columns with type safety. You can either simply use the `MRT_ColumnDef` type or use the new `createMRTColumnHelper` utility function.
+
+#### MRT_ColumnDef Type
+
+The most straightforward way to define your columns with type-safety is to just type your columns as `Array>`.
+
+```tsx
+import {
+ MantineReactTable,
+ useMantineReactTable,
+ type MRT_ColumnDef, // <--- import MRT_ColumnDef
+} from 'mantine-react-table';
+import { type User } from './types'; // <--- import your TData type from wherever you defined it
+
+// define your columns, pass User as a generic to MRT_ColumnDef
+const columns: Array> = [
+ {
+ accessorKey: 'id', //you should get type hints for all of your keys if you defined your TData type correctly
+ header: 'ID',
+ enableSorting: false, //you should get type hints for all possible column options that you can define here
+ },
+ {
+ accessorKey: 'name',
+ header: 'Name',
+ },
+ {
+ accessorFn: (originalRow) => Number(originalRow.age), //you should also get type hints for your accessorFn
+ header: 'Age',
+ Cell: ({ cell }) => {cell.getValue()}, //cell.getValue() will be typed as `unknown` by default, but you can pass a generic to get the correct type
+ //see the createMRTColumnHelper example below for a better way to get type safety with cell.getValue()
+ },
+];
+```
+
+#### createMRTColumnHelper Utility
+
+> New in V2 (After many requests)
+
+Alternatively you can use the `createMRTColumnHelper` utility function to define your columns. This works the same way as the TanStack `createColumnHelper`.
+
+Additional `TValue` type-safety is provided by using this utility. That means that when you call `cell.getValue()` in either a custom `Cell` render, or in any of the `mantine*Props`, you will get the correct type for the data in that column instead of `unknown`.
+
+```tsx
+import {
+ MantineReactTable,
+ useMantineReactTable,
+ createMRTColumnHelper, // <--- import createMRTColumnHelper
+} from 'mantine-react-table';
+import { type User } from './types'; // <--- import your TData type from wherever you defined it (if using TS)
+
+const columnHelper = createMRTColumnHelper(); // <--- pass your TData type as a generic to createMRTColumnHelper (if using TS)
+
+//columns will be inferred as Array>
+const columns = [
+ //accessorKey as first argument, rest of column options as second argument
+ columnHelper.accessor('name', {
+ header: 'Last Name',
+ }),
+ //accessorFn as first argument, rest of column options as second argument
+ columnHelper.accessor((row) => Number(row.age), {
+ id; 'age', //id required for accessorFn
+ header: 'Age',
+ filterVariant: 'range-slider', //you should get type hints for all possible column options that you can define here
+ Cell: ({ cell }) => {cell.getValue()}, //cell.getValue() will be typed as number instead of unknown
+ }),
+ //display column (no accessor needed)
+ columnHelper.display({
+ header: 'Contact',
+ Cell: ({ row }) => (
+
+ ),
+ }),
+];
+```
+
+#### Use JSDoc instead of TypeScript
+
+If you are in a situation where you are not able to install TypeScript in your project, you can technically do the same thing as up above in JavaScript using JSDoc.
+
+```jsx
+import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
+
+//define TData type with JSDoc
+/**
+ * @typedef {Object} User
+ * @property {number} id
+ * @property {string} name
+ * @property {number} age
+ */
+
+//import MRT_ColumnDef type with JSDoc
+/**
+ * @type {import('mantine-react-table').MRT_ColumnDef[]}
+ */
+const columns = [
+ {
+ accessorKey: 'id', //you should get type hints for all of your keys if you defined your TData type correctly
+ header: 'ID',
+ enableSorting: false, //you should get type hints for all possible column options that you can define here
+ },
+ {
+ accessorKey: 'name',
+ header: 'Name',
+ },
+ {
+ accessorFn: (originalRow) => Number(originalRow.age), //you should also get type hints for your accessorFn
+ header: 'Age',
+ },
+];
+```
+
+### Re-Usable MRT Components
+
+If you are going to have multiple tables in your app, chances are that you will want to make a re-usable component built on top of Mantine React Table. This is a good idea and good practice, but here are a few suggestions to maintain type safety with some TypeScript generics.
+
+#### Re-usable Components or Options?
+
+In my opinion, instead of creating a re-usable component, it is instead actually best to define your default options and share them between all of your tables.
+
+##### Re-usable Default Options
+
+In this example, we are simply creating a factory function that creates all of the default options that you want all of your tables to start with.
+
+```ts
+import { type MRT_RowData, type MRT_TableOptions } from 'mantine-react-table';
+
+//define re-useable default table options for all tables in your app
+export const getDefaultMRTOptions = (): Partial<
+ MRT_TableOptions
+> => ({
+ //list all of your default table options here
+ enableGlobalFilter: false,
+ enableRowPinning: true,
+ initialState: { showColumnFilters: true },
+ manualFiltering: true,
+ manualPagination: true,
+ manualSorting: true,
+ muiTableHeadCellProps: {
+ sx: { fontSize: '1.1rem' },
+ },
+ paginationDisplayMode: 'pages',
+ //etc...
+ defaultColumn: {
+ //you can even list default column options here
+ },
+});
+```
+
+Then you can use these options in every new table that you create:
+
+```tsx
+import {
+ MantineReactTable,
+ useMantineReactTable,
+ type MRT_ColumnDef,
+} from 'mantine-react-table';
+import { getDefaultMRTOptions } from './utils'; //your default options
+
+interface User {
+ id: number;
+ name: string;
+ age: number;
+}
+
+const defaultMRTOptions = getDefaultMRTOptions(); //get your default options
+
+export const OneOfYourTableComponents = () => {
+ const columns: MRT_ColumnDef[] = [
+ //...
+ ];
+
+ const { data } = useQuery({
+ //...
+ });
+
+ const table = useMantineReactTable({
+ ...defaultMRTOptions, //spread your default options
+ columns,
+ data,
+ enableGlobalFilter: true, //override default options
+ initialState: {
+ ...defaultMRTOptions.initialState, //spread default initial state
+ showColumnFilters: false, //override default initial state for just this table
+ },
+ //...
+ });
+
+ //you will have access to the entire table instance where you need it
+ console.log(table.getState());
+
+ return ;
+};
+```
+
+Doing it this way, you maintain 100% control of your table instance and any state that you are managing in each table component.
+
+I believe this is by far the best way to work with Mantine React Table in your application code, and how I personally use it in my own apps.
+
+##### Re-usable MRT Component
+
+If you still want to just create a re-usable MRT component instead, you can do that too, of course. Here is a type-safe way to do that:
+
+```tsx
+import {
+ MantineReactTable,
+ useMantineReactTable,
+ type MRT_ColumnDef,
+ type MRT_RowData, //default shape of TData (Record)
+ type MRT_TableOptions,
+} from 'mantine-react-table';
+
+interface Props extends MRT_TableOptions {
+ columns: MRT_ColumnDef[];
+ data: TData[];
+}
+
+export const CustomMRTTable = ({
+ columns,
+ data,
+ ...rest
+}: Props) => {
+ const table = useMantineReactTable({
+ columns,
+ data,
+ //your custom table options...
+ ...rest, //accept props to override default table options
+ });
+
+ return ;
+};
+```
+
+By using the `TData` generic correctly, you can maintain type-safety in your re-usable component that will adapt to different types of data you will have throughout your application.
+
+Though, be aware that the weakness of this is approach is that it will be more annoying to get access to the `table` instance or read table state where you need it.
+
+When re-using your MRT table component, it will just look something like this:
+
+```tsx
+import { CustomMRTTable } from './CustomMRTTable';
+
+const columns: MRT_ColumnDef[] = [
+ //...
+];
+
+export const YourComponent = () => {
+ //no easy access to the table instance or table state here unless you manage all of the state in this component
+ const [pagination, setPagination] = useState({
+ pageIndex: 0,
+ pageSize: 10,
+ });
+ const [sorting, setSorting] = useState([]);
+ //etc...
+
+ const { data } = useQuery({
+ //...
+ });
+
+ return (
+
+ );
+};
+```
+
+### Debugging Mantine React Table
+
+Mantine React Table _(though really TanStack Table)_ can be a lot easier to debug than other data grid libraries. This is because you are often in charge of the state that you care about, and the entire table instance is available to you in your own scope if you are using the `useMantineReactTable` hook. There are also some advanced TanStack Table Dev Tools that you can optionally install.
+
+#### Console Logging from the Table Instance
+
+When in doubt, console log it! There are a lot of things you can easily console log. Here are some examples:
+
+##### Console Log All Internal Table State
+
+```jsx
+const table = useMantineReactTable({
+ columns,
+ data,
+ //** */
+});
+
+console.log(table.getState());
+```
+
+##### Console Log Current Rendering Rows
+
+```jsx
+const table = useMantineReactTable({
+ columns,
+ data,
+ //** */
+});
+
+console.log(table.getRowModel().rows);
+```
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/cell-actions.mdx b/apps/mantine-react-table-docs/pages/docs/guides/cell-actions.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/column-actions-menu.mdx b/apps/mantine-react-table-docs/pages/docs/guides/column-actions.mdx
similarity index 100%
rename from apps/mantine-react-table-docs/pages/docs/guides/column-actions-menu.mdx
rename to apps/mantine-react-table-docs/pages/docs/guides/column-actions.mdx
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/column-filtering.mdx b/apps/mantine-react-table-docs/pages/docs/guides/column-filtering.mdx
index a5139b38d..dfe11e32b 100644
--- a/apps/mantine-react-table-docs/pages/docs/guides/column-filtering.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/guides/column-filtering.mdx
@@ -171,7 +171,7 @@ By default, Mantine React Table uses a `fuzzy` filtering algorithm based on the
##### Pre-built MRT Filter Functions
-> Pre-built filter functions from Mantine React Table include `between`, `betweenInclusive`, `contains`, `empty`, `endsWith`, `equals`, `fuzzy`, `greaterThan`, `greaterThanOrEqualTo`, `lessThan`, `lessThanOrEqualTo`, `notEmpty`, `notEquals`, and `startsWith`. View these algorithms [here](https://github.com/KevinVandy/mantine-react-table/blob/main/packages/mantine-react-table/src/filterFns.ts)
+> Pre-built filter functions from Mantine React Table include `between`, `betweenInclusive`, `contains`, `empty`, `endsWith`, `equals`, `fuzzy`, `greaterThan`, `greaterThanOrEqualTo`, `lessThan`, `lessThanOrEqualTo`, `notEmpty`, `notEquals`, and `startsWith`. View these algorithms [here](https://github.com/KevinVandy/mantine-react-table/blob/v2/packages/mantine-react-table/src/fns/filterFns.ts)
##### Pre-built TanStack Table Filter Functions
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/column-grouping.mdx b/apps/mantine-react-table-docs/pages/docs/guides/column-grouping.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/column-pinning.mdx b/apps/mantine-react-table-docs/pages/docs/guides/column-pinning.mdx
index 7f0056b6e..dc97d36d2 100644
--- a/apps/mantine-react-table-docs/pages/docs/guides/column-pinning.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/guides/column-pinning.mdx
@@ -19,12 +19,12 @@ Column pinning is a cool feature that lets users pin (freeze) columns to the lef
### Relevant Table Options
### Relevant Column Options
-
+
### Relevant State
@@ -32,13 +32,13 @@ Column pinning is a cool feature that lets users pin (freeze) columns to the lef
### Enable Column Pinning
-Column pinning can simply be enabled by setting the `enablePinning` table option to `true`.
+Column pinning can simply be enabled by setting the `enableColumnPinning` table option to `true`.
```jsx
const table = useMantineReactTable({
data,
columns,
- enablePinning: true,
+ enableColumnPinning: true,
});
```
@@ -50,7 +50,7 @@ Columns can start out pinned in your table by setting the `columnPinning` states
const table = useMantineReactTable({
data,
columns,
- enablePinning: true,
+ enableColumnPinning: true,
initialState: {
columnPinning: {
left: ['email'], //pin email column to left by default
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/column-resizing.mdx b/apps/mantine-react-table-docs/pages/docs/guides/column-resizing.mdx
index 31d17b98f..082c0dd30 100644
--- a/apps/mantine-react-table-docs/pages/docs/guides/column-resizing.mdx
+++ b/apps/mantine-react-table-docs/pages/docs/guides/column-resizing.mdx
@@ -3,10 +3,10 @@ import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable
import ColumnOptionsTable from '../../../components/prop-tables/ColumnOptionsTable';
import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
import Example from '../../../examples/enable-column-resizing';
-import NoGrowExample from '../../../examples/enable-column-resizing-no-grow';
+import RTLExample from '../../../examples/localization-i18n-fa';
- Column Resizing Feature Guide - Mantine React Table Docs
+ {'Column Resizing Guide - Mantine React Table V2 Docs'}
The Column Size features was recently split into its own [Guide](/docs/guides/column-size). View that guide as a prerequisite to this one.
### Relevant Table Options
### Relevant State
@@ -44,138 +51,120 @@ Mantine React Table lets you easily change the default widths (sizes) of columns
onlyOptions={new Set(['columnSizing', 'columnSizingInfo'])}
/>
-### Change Default Column Widths
-
-#### Column Size
+### Initial Column Sizes
-This was also covered in the [Data Columns Guide](/docs/guides/data-columns), but we'll cover it again here.
+Column sizes will behave differently depending on which `layoutMode` you have set.
-You can change the width of any column by setting its `size` option on the column definition. `minSize` and `maxSize` are also available to enforce limits during resizing.
-
-```jsx
-const columns = [
- {
- accessorKey: 'id',
- header: 'ID',
- size: 50, //small column
- },
- {
- accessorKey: 'username',
- header: 'Username',
- minSize: 100, //min size enforced during resizing
- maxSize: 200, //max size enforced during resizing
- size: 180, //medium column
- },
- {
- accessorKey: 'email',
- header: 'Email',
- size: 300, //large column
- },
-];
-```
+See the [Column Size Guide](/docs/guides/column-size) for more information on layout modes and how to set initial column sizes properly for you use case.
-You may notice, however, that the column sizes might not change as much as you would expect. This is because the browser treats `