@agregio-solutions/design-system 1.102.6 → 2.1.0

package/dist/packages/components/DataTable/doc.md

@@ -20,13 +20,23 @@ import {
   ColumnFiltersState,
   ColumnSort,
   SortingState,
+  columnFilteringFeature,
   createColumnHelper,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
+  createExpandedRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  filterFn_arrIncludesSome,
+  filterFn_equals,
+  filterFn_includesString,
+  globalFilteringFeature,
+  rowExpandingFeature,
+  rowPaginationFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import DataTableHeader from "@packages/components/DataTable/DataTableHeader/DataTableHeader";
 import { useMemo, useState } from "react";
@@ -46,6 +56,44 @@ import { someTime } from "@internal/test-utils-storybook/test-utils-storybook";
 import DataTableRoot from "./DataTableRoot/DataTableRoot";
 import DataTableRow from "./DataTableRow/DataTableRow";
 
+// Since react-table v9, every feature a table uses has to be registered through
+// `tableFeatures()`. Declare the set once, outside of the component, and derive
+// the types of the column helpers and column metas from it with `typeof`.
+const clientFeatures = tableFeatures({
+  columnFilteringFeature,
+  globalFilteringFeature,
+  rowSortingFeature,
+  rowPaginationFeature,
+  // Register only the built-ins the columns use: the full `filterFns` / `sortFns`
+  // registries are deprecated because they pull every built-in into the bundle.
+  filterFns: {
+    arrIncludesSome: filterFn_arrIncludesSome,
+    equals: filterFn_equals,
+    includesString: filterFn_includesString,
+  },
+  sortFns: { alphanumeric: sortFn_alphanumeric, text: sortFn_text },
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+});
+
+// A back-end managed table computes its rows server-side: register the features
+// for their state and APIs, but none of their row models.
+const serverFeatures = tableFeatures({
+  columnFilteringFeature,
+  rowSortingFeature,
+  rowPaginationFeature,
+});
+
+const expandingFeatures = tableFeatures({
+  rowSortingFeature,
+  rowExpandingFeature,
+  sortedRowModel: createSortedRowModel(),
+  expandedRowModel: createExpandedRowModel(),
+});
+
+const coreOnlyFeatures = tableFeatures({});
+
 const meta: Meta<typeof DataTable> = {
   component: DataTable,
   parameters: {
@@ -130,178 +178,193 @@ export const WithReactTableFrontEndManaged: StoryObj<typeof DataTable> = {
       // Here starts the interesting stuff: columns definitions.
       // All the features of the filters comes from those columns definitions
       // Please read carefully each column, they all serve as a different example of how to use the filters
-      const columnHelper = useMemo(() => createColumnHelper<User>(), []);
+      const columnHelper = useMemo(
+        () => createColumnHelper<typeof clientFeatures, User>(),
+        [],
+      );
 
       const columns = useMemo(
-        () => [
-          columnHelper.accessor("firstname", {
-            // Here, because there is no "FilterInDrawer" component, there will be nothing in the filter drawer related to the firstname
-            // But the firstname can still be filtered by the global filter (search input)
-            header: ({ header }) => (
-              <DataTableHeader
-                onSortClick={header.column.getToggleSortingHandler()}
-                sortDirection={header.column.getIsSorted() || "none"}
-                text="Firstname"
-              />
-            ),
-            cell: (props) => <DataTableCell>{props.getValue()}</DataTableCell>,
-          }),
-          // Here is an example using a "FilterInDrawer" component that render a radio group to filter the day
-          // Please note the "filterFn" is "arrIncludes" for this king of value (Array<string>)
-          // Also note the usage of `satisfies TypeTableColumnWithFilter<User>` to help you type check the column definition (because meta is a custom property)
-          // Finally, you will note that the Chips are auto-generated, if you do not want to use them you can set the `skipFilterChips` to true
-          columnHelper.accessor("day", {
-            id: "Day",
-            header: () => <DataTableHeader text="Day" />,
-            cell: (props) => <DataTableCell>{props.getValue()}</DataTableCell>,
-            filterFn: "equals",
-            meta: {
-              FilterInDrawer: ({ column }) => (
-                <div>
-                  <b>Filter by day:</b>
-
-                  {DAYS.map((day) => (
-                    <Radio
-                      label={day}
-                      key={day}
-                      checked={column.getFilterValue() === day}
-                      onChange={() => column.setFilterValue(day)}
-                    />
-                  ))}
-                </div>
+        () =>
+          columnHelper.columns([
+            columnHelper.accessor("firstname", {
+              // Here, because there is no "FilterInDrawer" component, there will be nothing in the filter drawer related to the firstname
+              // But the firstname can still be filtered by the global filter (search input)
+              header: ({ header }) => (
+                <DataTableHeader
+                  onSortClick={header.column.getToggleSortingHandler()}
+                  sortDirection={header.column.getIsSorted() || "none"}
+                  text="Firstname"
+                />
               ),
-            } satisfies TypeTableColumnWithFilter<User>,
-          }),
-          // Here is another example using a "FilterInDrawer" component that render a checkbox group to filter the food
-          // Please note the "filterFn" is "arrIncludesSome" -> we want to include all entries that match at least one food
-          // Also note the usage of `satisfies TypeTableColumnWithFilter<User>` to help you type check the column definition (because meta is a custom property)
-          // Finally, you will note that the Chips are auto-generated, if you do not want to use them you can set the `skipFilterChips` to true
-          columnHelper.accessor("foods", {
-            id: "Foods",
-            header: () => <DataTableHeader text="Foods" />,
-            cell: (props) => (
-              <DataTableCell>{props.getValue()?.join(", ")}</DataTableCell>
-            ),
-            filterFn: "arrIncludesSome",
-            meta: {
-              FilterInDrawer: ({ column }) => (
-                <div style={{ marginTop: 8 }}>
-                  <b>Filter by food (at least one):</b>
-                  <CheckboxGroup
-                    value={(column.getFilterValue() as any) || []}
-                    onChange={column.setFilterValue}
-                    aria-label="Filter by food (at least one)"
+              cell: (props) => (
+                <DataTableCell>{props.getValue()}</DataTableCell>
+              ),
+            }),
+            // Here is an example using a "FilterInDrawer" component that render a radio group to filter the day
+            // Please note the "filterFn" is "arrIncludes" for this king of value (Array<string>)
+            // Also note the usage of `satisfies TypeTableColumnWithFilter<typeof clientFeatures, User>` to help you type check the column definition (because meta is a custom property)
+            // Finally, you will note that the Chips are auto-generated, if you do not want to use them you can set the `skipFilterChips` to true
+            columnHelper.accessor("day", {
+              id: "Day",
+              header: () => <DataTableHeader text="Day" />,
+              cell: (props) => (
+                <DataTableCell>{props.getValue()}</DataTableCell>
+              ),
+              filterFn: "equals",
+              meta: {
+                FilterInDrawer: ({ column }) => (
+                  <div>
+                    <b>Filter by day:</b>
+
+                    {DAYS.map((day) => (
+                      <Radio
+                        label={day}
+                        key={day}
+                        checked={column.getFilterValue() === day}
+                        onChange={() => column.setFilterValue(day)}
+                      />
+                    ))}
+                  </div>
+                ),
+              } satisfies TypeTableColumnWithFilter<
+                typeof clientFeatures,
+                User
+              >,
+            }),
+            // Here is another example using a "FilterInDrawer" component that render a checkbox group to filter the food
+            // Please note the "filterFn" is "arrIncludesSome" -> we want to include all entries that match at least one food
+            // Also note the usage of `satisfies TypeTableColumnWithFilter<typeof clientFeatures, User>` to help you type check the column definition (because meta is a custom property)
+            // Finally, you will note that the Chips are auto-generated, if you do not want to use them you can set the `skipFilterChips` to true
+            columnHelper.accessor("foods", {
+              id: "Foods",
+              header: () => <DataTableHeader text="Foods" />,
+              cell: (props) => (
+                <DataTableCell>{props.getValue()?.join(", ")}</DataTableCell>
+              ),
+              filterFn: "arrIncludesSome",
+              meta: {
+                FilterInDrawer: ({ column }) => (
+                  <div style={{ marginTop: 8 }}>
+                    <b>Filter by food (at least one):</b>
+                    <CheckboxGroup
+                      value={(column.getFilterValue() as any) || []}
+                      onChange={(value) => column.setFilterValue(value)}
+                      aria-label="Filter by food (at least one)"
+                    >
+                      {ALL_FOODS.map((food) => (
+                        <div key={food}>
+                          <Checkbox label={food} value={food} />
+                        </div>
+                      ))}
+                    </CheckboxGroup>
+                  </div>
+                ),
+              } satisfies TypeTableColumnWithFilter<
+                typeof clientFeatures,
+                User
+              >,
+            }),
+            // Here is another example using a "FilterInDrawer" component that render a select to filter the organization
+            // Please note the "filterFn" is a custom function that will filter the data based on the organization id
+            // Also note the usage of `satisfies TypeTableColumnWithFilter<typeof clientFeatures, User>` to help you type check the column definition (because meta is a custom property)
+            // And most important here, we have a custom meta property `filterChips` that will generate a chip to display the selected organization
+            // The Filter can not handle automatic chips when the data is a complex object, so you have to handle that manually
+            columnHelper.accessor("organization", {
+              id: "Organization",
+              header: () => <DataTableHeader text="Organization" />,
+              cell: (props) => (
+                <DataTableCell>{props.getValue()?.name}</DataTableCell>
+              ),
+              filterFn: (row, _, filterValue) => {
+                if (!filterValue) return true;
+                return row.original.organization?.id === filterValue;
+              },
+              meta: {
+                filterChips: ({ column }) => {
+                  const value = column.getFilterValue();
+                  const organization = ORGANIZATIONS.find(
+                    (org) => org.id === value,
+                  );
+                  if (!organization) return [];
+                  return [
+                    {
+                      value: `Organization: ${organization.name}`,
+                      onClose: () => column.setFilterValue(null),
+                    },
+                  ];
+                },
+                FilterInDrawer: ({ column }) => (
+                  <Select
+                    id="organization-select"
+                    label="Filter by organization:"
+                    mode="single"
+                    value={(column.getFilterValue() as any) || null}
+                    onChange={(value) => column.setFilterValue(value)}
+                    fullWidth
+                    wrapperProps={{ style: { marginBottom: 8 } }}
                   >
-                    {ALL_FOODS.map((food) => (
-                      <div key={food}>
-                        <Checkbox label={food} value={food} />
-                      </div>
+                    {ORGANIZATIONS.map((organization) => (
+                      <SelectItem
+                        text={organization.name}
+                        id={organization.id}
+                        key={organization.id}
+                      />
                     ))}
-                  </CheckboxGroup>
-                </div>
+                  </Select>
+                ),
+              } satisfies TypeTableColumnWithFilter<
+                typeof clientFeatures,
+                User
+              >,
+            }),
+            // Here is an example that uses a filter outside of the drawer.
+            // See the "extraLeftContent" prop to see how to connect it to react-table filtering features
+            columnHelper.accessor("isActive", {
+              header: () => <DataTableHeader text="Active" />,
+              cell: (props) => (
+                <DataTableCell>{props.getValue() ? "✅" : "❌"}</DataTableCell>
               ),
-            } satisfies TypeTableColumnWithFilter<User>,
-          }),
-          // Here is another example using a "FilterInDrawer" component that render a select to filter the organization
-          // Please note the "filterFn" is a custom function that will filter the data based on the organization id
-          // Also note the usage of `satisfies TypeTableColumnWithFilter<User>` to help you type check the column definition (because meta is a custom property)
-          // And most important here, we have a custom meta property `filterChips` that will generate a chip to display the selected organization
-          // The Filter can not handle automatic chips when the data is a complex object, so you have to handle that manually
-          columnHelper.accessor("organization", {
-            id: "Organization",
-            header: () => <DataTableHeader text="Organization" />,
-            cell: (props) => (
-              <DataTableCell>{props.getValue()?.name}</DataTableCell>
-            ),
-            filterFn: (row, _, filterValue) => {
-              if (!filterValue) return true;
-              return row.original.organization?.id === filterValue;
-            },
-            meta: {
-              filterChips: ({ column }) => {
-                const value = column.getFilterValue();
-                const organization = ORGANIZATIONS.find(
-                  (org) => org.id === value,
-                );
-                if (!organization) return [];
-                return [
-                  {
-                    value: `Organization: ${organization.name}`,
-                    onClose: () => column.setFilterValue(null),
-                  },
-                ];
+              filterFn: (row, _, filterValue) => {
+                if (!filterValue) return true;
+                return !!row.original.isActive;
               },
-              FilterInDrawer: ({ column }) => (
-                <Select
-                  id="organization-select"
-                  label="Filter by organization:"
-                  mode="single"
-                  value={(column.getFilterValue() as any) || null}
-                  onChange={column.setFilterValue}
-                  fullWidth
-                  wrapperProps={{ style: { marginBottom: 8 } }}
-                >
-                  {ORGANIZATIONS.map((organization) => (
-                    <SelectItem
-                      text={organization.name}
-                      id={organization.id}
-                      key={organization.id}
-                    />
-                  ))}
-                </Select>
+            }),
+            // Here is an example of an empty column, for example to display an actions bar
+            // You can note that the header is empty, the text is optional
+            columnHelper.display({
+              id: "actions",
+              header: () => <DataTableHeader />,
+              cell: () => (
+                <DataTableCell>
+                  <Button mode="secondary" iconLeft="edit" />
+                </DataTableCell>
               ),
-            } satisfies TypeTableColumnWithFilter<User>,
-          }),
-          // Here is an example that uses a filter outside of the drawer.
-          // See the "extraLeftContent" prop to see how to connect it to react-table filtering features
-          columnHelper.accessor("isActive", {
-            header: () => <DataTableHeader text="Active" />,
-            cell: (props) => (
-              <DataTableCell>{props.getValue() ? "✅" : "❌"}</DataTableCell>
-            ),
-            filterFn: (row, _, filterValue) => {
-              if (!filterValue) return true;
-              return !!row.original.isActive;
-            },
-          }),
-          // Here is an example of an empty column, for example to display an actions bar
-          // You can note that the header is empty, the text is optional
-          columnHelper.display({
-            id: "actions",
-            header: () => <DataTableHeader />,
-            cell: () => (
-              <DataTableCell>
-                <Button mode="secondary" iconLeft="edit" />
-              </DataTableCell>
-            ),
-          }),
-        ],
+            }),
+          ]),
         [ALL_FOODS, DAYS, ORGANIZATIONS, columnHelper],
       );
 
       // And here we define the table as usual
-      const table = useReactTable({
+      const table = useTable({
+        features: clientFeatures,
         data,
         columns,
         initialState: {
           globalFilter: "", // Add this to show the global filter (aka the Search bar)
           pagination: {
+            pageIndex: 0,
             pageSize: 12, // Add this to customize the page size
           },
         },
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
       });
 
       // Get the pagination state
-      const pagination = table.getState().pagination;
+      const pagination = table.state.pagination;
 
       // Render the table using the base DataTable component
       return (
         <>
-          <Filter<User>
+          <Filter
             onDownloadClick={() => alert("Download")}
             onSettingsClick={() => alert("Settings")}
             table={table}
@@ -436,93 +499,104 @@ export const WithReactTableBackEndManaged: StoryObj<typeof DataTable> = {
           }),
       });
 
-      // You will need to create a column helper
+      // You will need to create a column helper, typed with the registered features
       // ⚠ This should be memoized!
-      const columnHelper = useMemo(() => createColumnHelper<User>(), []);
+      const columnHelper = useMemo(
+        () => createColumnHelper<typeof serverFeatures, User>(),
+        [],
+      );
 
       // Then, you can define the columns
       // ⚠ This should be memoized!
       const columns = useMemo(
-        () => [
-          // Example of a custom column for initials (no data model, so no filters, etc)
-          columnHelper.display({
-            id: "initials",
-            header: () => <DataTableHeader text="Initials" />,
-            cell: (props) => (
-              <DataTableCell>
-                {/*Here is an example of how you can access the data model values directly (if needed) */}
-                {props.row.original.firstname[0]}
-                {props.row.original.lastname[0]}
-              </DataTableCell>
-            ),
-          }),
-          // Example of a column with sorting (accessor means it has data model)
-          columnHelper.accessor("firstname", {
-            header: ({ header }) => (
-              <DataTableHeader
-                onSortClick={header.column.getToggleSortingHandler()}
-                sortDirection={header.column.getIsSorted() || "none"}
-                text="Firstname"
-              />
-            ),
-            cell: (props) => (
-              <DataTableCell iconLeft="star_outline">
-                {/* because the accessor key ("firstname") is a data model object key, we can access it directly with getValue() */}
-                {props.getValue()}
-              </DataTableCell>
-            ),
-          }),
-          columnHelper.accessor("lastname", {
-            header: ({ header }) => (
-              <DataTableHeader
-                onSortClick={header.column.getToggleSortingHandler()}
-                sortDirection={header.column.getIsSorted() || "none"}
-                text="Lastname"
-              />
-            ),
-            cell: (props) => <DataTableCell>{props.getValue()}</DataTableCell>,
-          }),
-          columnHelper.accessor("email", {
-            header: ({ header }) => (
-              <DataTableHeader
-                onSortClick={header.column.getToggleSortingHandler()}
-                sortDirection={header.column.getIsSorted() || "none"}
-                text="Email"
-                iconLeft="send"
-              />
-            ),
-            cell: (props) => <DataTableCell>{props.getValue()}</DataTableCell>,
-            meta: {
-              FilterInDrawer: ({ column }) => (
-                <Select
-                  id="email-select"
-                  label="Filter by email:"
-                  mode="multiple"
-                  selectedKeys={(column.getFilterValue() as any) || []}
-                  onSelectionChange={column.setFilterValue}
-                  fullWidth
-                  wrapperProps={{ style: { marginBottom: 8 } }}
-                >
-                  {arrayOfLength(10).map((index) => (
-                    <SelectItem
-                      text={`john-doe${index + 1}@example.com`}
-                      id={`john-doe${index + 1}@example.com`}
-                      key={`john-doe${index + 1}@example.com`}
-                    />
-                  ))}
-                </Select>
+        () =>
+          columnHelper.columns([
+            // Example of a custom column for initials (no data model, so no filters, etc)
+            columnHelper.display({
+              id: "initials",
+              header: () => <DataTableHeader text="Initials" />,
+              cell: (props) => (
+                <DataTableCell>
+                  {/*Here is an example of how you can access the data model values directly (if needed) */}
+                  {props.row.original.firstname[0]}
+                  {props.row.original.lastname[0]}
+                </DataTableCell>
               ),
-            } satisfies TypeTableColumnWithFilter<User>,
-          }),
-        ],
+            }),
+            // Example of a column with sorting (accessor means it has data model)
+            columnHelper.accessor("firstname", {
+              header: ({ header }) => (
+                <DataTableHeader
+                  onSortClick={header.column.getToggleSortingHandler()}
+                  sortDirection={header.column.getIsSorted() || "none"}
+                  text="Firstname"
+                />
+              ),
+              cell: (props) => (
+                <DataTableCell iconLeft="star_outline">
+                  {/* because the accessor key ("firstname") is a data model object key, we can access it directly with getValue() */}
+                  {props.getValue()}
+                </DataTableCell>
+              ),
+            }),
+            columnHelper.accessor("lastname", {
+              header: ({ header }) => (
+                <DataTableHeader
+                  onSortClick={header.column.getToggleSortingHandler()}
+                  sortDirection={header.column.getIsSorted() || "none"}
+                  text="Lastname"
+                />
+              ),
+              cell: (props) => (
+                <DataTableCell>{props.getValue()}</DataTableCell>
+              ),
+            }),
+            columnHelper.accessor("email", {
+              header: ({ header }) => (
+                <DataTableHeader
+                  onSortClick={header.column.getToggleSortingHandler()}
+                  sortDirection={header.column.getIsSorted() || "none"}
+                  text="Email"
+                  iconLeft="send"
+                />
+              ),
+              cell: (props) => (
+                <DataTableCell>{props.getValue()}</DataTableCell>
+              ),
+              meta: {
+                FilterInDrawer: ({ column }) => (
+                  <Select
+                    id="email-select"
+                    label="Filter by email:"
+                    mode="multiple"
+                    selectedKeys={(column.getFilterValue() as any) || []}
+                    onSelectionChange={(keys) => column.setFilterValue(keys)}
+                    fullWidth
+                    wrapperProps={{ style: { marginBottom: 8 } }}
+                  >
+                    {arrayOfLength(10).map((index) => (
+                      <SelectItem
+                        text={`john-doe${index + 1}@example.com`}
+                        id={`john-doe${index + 1}@example.com`}
+                        key={`john-doe${index + 1}@example.com`}
+                      />
+                    ))}
+                  </Select>
+                ),
+              } satisfies TypeTableColumnWithFilter<
+                typeof serverFeatures,
+                User
+              >,
+            }),
+          ]),
         [columnHelper],
       );
 
       // Instantiate the table with @tanstack/react-table
-      const table = useReactTable({
+      const table = useTable({
+        features: serverFeatures,
         data: data?.data || [],
         columns,
-        getCoreRowModel: getCoreRowModel(), // from @tanstack/react-table
         manualPagination: true,
         manualSorting: true,
         manualFiltering: true,
@@ -540,7 +614,7 @@ export const WithReactTableBackEndManaged: StoryObj<typeof DataTable> = {
       // Render the table using the base DataTable component
       return (
         <>
-          <Filter<User> table={table} />
+          <Filter table={table} />
           <DataTable table={table} pagination={pagination} />
         </>
       );
@@ -553,38 +627,39 @@ export const WithReactTableBackEndManaged: StoryObj<typeof DataTable> = {
 export const Empty: StoryObj<typeof DataTable> = {
   render: () => {
     const ParentComponent = () => {
-      const columnHelper = useMemo(() => createColumnHelper<User>(), []);
+      const columnHelper = useMemo(
+        () => createColumnHelper<typeof clientFeatures, User>(),
+        [],
+      );
 
       const data = useMemo(() => [], []);
 
       const columns = useMemo(
-        () => [
-          columnHelper.display({
-            id: "example",
-            header: () => <DataTableHeader text="Example" />,
-            cell: () => <DataTableCell>Example</DataTableCell>,
-          }),
-        ],
+        () =>
+          columnHelper.columns([
+            columnHelper.display({
+              id: "example",
+              header: () => <DataTableHeader text="Example" />,
+              cell: () => <DataTableCell>Example</DataTableCell>,
+            }),
+          ]),
         [columnHelper],
       );
 
-      const table = useReactTable({
+      const table = useTable({
+        features: clientFeatures,
         data,
         columns,
         initialState: {
           globalFilter: "",
         },
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
       });
 
-      const pagination = table.getState().pagination;
+      const pagination = table.state.pagination;
 
       return (
         <>
-          <Filter<User>
+          <Filter
             onDownloadClick={() => alert("Download")}
             onSettingsClick={() => alert("Settings")}
             table={table}
@@ -611,77 +686,78 @@ export const WithSubColumns: StoryObj<typeof DataTable> = {
     }));
 
     const ParentComponent = () => {
-      const columnHelper = useMemo(() => createColumnHelper<User>(), []);
+      const columnHelper = useMemo(
+        () => createColumnHelper<typeof clientFeatures, User>(),
+        [],
+      );
 
       const columns = useMemo(
-        () => [
-          columnHelper.group({
-            id: "name",
-            header: (group) => (
-              <DataTableHeader
-                text="Name group"
-                colSpan={group.header.colSpan}
-              />
-            ),
-            columns: [
-              columnHelper.accessor("firstname", {
-                id: "Firstname",
-                header: () => <DataTableHeader text="Firstname" />,
-                cell: (props) => (
-                  <DataTableCell>{props.getValue()}</DataTableCell>
-                ),
-              }),
-              columnHelper.accessor("lastname", {
-                id: "Lastname",
-                header: () => <DataTableHeader text="Lastname" />,
-                cell: (props) => (
-                  <DataTableCell>{props.getValue()}</DataTableCell>
-                ),
-              }),
-            ],
-          }),
-          columnHelper.group({
-            id: "other",
-            header: (group) => (
-              <DataTableHeader
-                text="Other group"
-                colSpan={group.header.colSpan}
-                border="left"
-              />
-            ),
-            columns: [
-              columnHelper.accessor("email", {
-                id: "Email",
-                header: () => <DataTableHeader border="left" text="Email" />,
-                cell: (props) => (
-                  <DataTableCell border="left">
-                    {props.getValue()}
-                  </DataTableCell>
-                ),
-              }),
-            ],
-          }),
-        ],
+        () =>
+          columnHelper.columns([
+            columnHelper.group({
+              id: "name",
+              header: (group) => (
+                <DataTableHeader
+                  text="Name group"
+                  colSpan={group.header.colSpan}
+                />
+              ),
+              columns: columnHelper.columns([
+                columnHelper.accessor("firstname", {
+                  id: "Firstname",
+                  header: () => <DataTableHeader text="Firstname" />,
+                  cell: (props) => (
+                    <DataTableCell>{props.getValue()}</DataTableCell>
+                  ),
+                }),
+                columnHelper.accessor("lastname", {
+                  id: "Lastname",
+                  header: () => <DataTableHeader text="Lastname" />,
+                  cell: (props) => (
+                    <DataTableCell>{props.getValue()}</DataTableCell>
+                  ),
+                }),
+              ]),
+            }),
+            columnHelper.group({
+              id: "other",
+              header: (group) => (
+                <DataTableHeader
+                  text="Other group"
+                  colSpan={group.header.colSpan}
+                  border="left"
+                />
+              ),
+              columns: columnHelper.columns([
+                columnHelper.accessor("email", {
+                  id: "Email",
+                  header: () => <DataTableHeader border="left" text="Email" />,
+                  cell: (props) => (
+                    <DataTableCell border="left">
+                      {props.getValue()}
+                    </DataTableCell>
+                  ),
+                }),
+              ]),
+            }),
+          ]),
         [columnHelper],
       );
 
-      const table = useReactTable({
+      const table = useTable({
+        features: clientFeatures,
         data,
         columns,
         initialState: {
           globalFilter: "",
         },
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
       });
 
-      const pagination = table.getState().pagination;
+      const pagination = table.state.pagination;
 
       return (
         <>
-          <Filter<User> table={table} />
+          <Filter table={table} />
           <DataTable table={table} pagination={pagination} />
         </>
       );
@@ -693,41 +769,46 @@ export const WithSubColumns: StoryObj<typeof DataTable> = {
 
 export const WithContentOverflow: StoryObj<typeof DataTable> = {
   render: () => {
-    const data: Array<any> = arrayOfLength(300).map((index) => ({
+    type OverflowingUser = { firstname: string };
+
+    const data: Array<OverflowingUser> = arrayOfLength(300).map((index) => ({
       firstname: `Firstnameverylongthatwilloverflowonthescreensqhjdhqskdhkqshdkhqkdshhqsdhkqhshqhdskqjshdjhqsjkhdkqhskjdhqjkshdqkshdkhqsdkjqhdsjkhqsdk ${index + 1}`,
     }));
 
     const ParentComponent = () => {
-      const columnHelper = useMemo(() => createColumnHelper<any>(), []);
+      const columnHelper = useMemo(
+        () => createColumnHelper<typeof clientFeatures, OverflowingUser>(),
+        [],
+      );
 
       const columns = useMemo(
-        () => [
-          columnHelper.accessor("firstname", {
-            id: "Firstname",
-            header: () => <DataTableHeader text="Firstname" />,
-            cell: (props) => <DataTableCell>{props.getValue()}</DataTableCell>,
-          }),
-        ],
+        () =>
+          columnHelper.columns([
+            columnHelper.accessor("firstname", {
+              id: "Firstname",
+              header: () => <DataTableHeader text="Firstname" />,
+              cell: (props) => (
+                <DataTableCell>{props.getValue()}</DataTableCell>
+              ),
+            }),
+          ]),
         [columnHelper],
       );
 
-      const table = useReactTable({
+      const table = useTable({
+        features: clientFeatures,
         data,
         columns,
         initialState: {
           globalFilter: "",
         },
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
       });
 
-      const pagination = table.getState().pagination;
+      const pagination = table.state.pagination;
 
       return (
         <>
-          <Filter<User> table={table} />
+          <Filter table={table} />
           <DataTable table={table} pagination={pagination} />
         </>
       );
@@ -749,7 +830,10 @@ export const WithContentOverflow: StoryObj<typeof DataTable> = {
 export const CustomExpandUi: StoryObj<typeof DataTable> = {
   render: () => {
     const ParentComponent = () => {
-      const columnHelper = useMemo(() => createColumnHelper<User>(), []);
+      const columnHelper = useMemo(
+        () => createColumnHelper<typeof expandingFeatures, User>(),
+        [],
+      );
 
       // Fake data, should come from an API typically
       const data = useMemo(
@@ -761,35 +845,38 @@ export const CustomExpandUi: StoryObj<typeof DataTable> = {
       );
 
       const columns = useMemo(
-        () => [
-          columnHelper.accessor("firstname", {
-            header: () => <DataTableHeader text="Firstname" />,
-            cell: (props) => <DataTableCell>{props.getValue()}</DataTableCell>,
-          }),
-          columnHelper.display({
-            id: "expander",
-            header: () => <DataTableHeader text="" />,
-            cell: ({ row }) => (
-              <DataTableCell style={{ width: 72 }}>
-                <Button
-                  mode="tertiary"
-                  iconLeft={row.getIsExpanded() ? "expand_less" : "expand_more"} // Show a different icon when the row is expanded
-                  onClick={row.getToggleExpandedHandler()} // Here you plug your button with react-table expanded handler
-                />
-              </DataTableCell>
-            ),
-          }),
-        ],
+        () =>
+          columnHelper.columns([
+            columnHelper.accessor("firstname", {
+              header: () => <DataTableHeader text="Firstname" />,
+              cell: (props) => (
+                <DataTableCell>{props.getValue()}</DataTableCell>
+              ),
+            }),
+            columnHelper.display({
+              id: "expander",
+              header: () => <DataTableHeader text="" />,
+              cell: ({ row }) => (
+                <DataTableCell style={{ width: 72 }}>
+                  <Button
+                    mode="tertiary"
+                    iconLeft={
+                      row.getIsExpanded() ? "expand_less" : "expand_more"
+                    } // Show a different icon when the row is expanded
+                    onClick={row.getToggleExpandedHandler()} // Here you plug your button with react-table expanded handler
+                  />
+                </DataTableCell>
+              ),
+            }),
+          ]),
         [columnHelper],
       );
 
-      const table = useReactTable({
+      const table = useTable({
+        features: expandingFeatures,
         data,
         columns,
         getRowCanExpand: () => true, // tell the table that all rows can be expanded
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getExpandedRowModel: getExpandedRowModel(), // from @tanstack/react-table
       });
 
       return (
@@ -817,7 +904,8 @@ export const ExpandingSubRows: StoryObj<typeof DataTable> = {
 
     const ParentComponent = () => {
       const columnHelper = useMemo(
-        () => createColumnHelper<UserWithAffiliates>(),
+        () =>
+          createColumnHelper<typeof expandingFeatures, UserWithAffiliates>(),
         [],
       );
 
@@ -863,45 +951,48 @@ export const ExpandingSubRows: StoryObj<typeof DataTable> = {
       );
 
       const columns = useMemo(
-        () => [
-          columnHelper.accessor("firstname", {
-            header: () => <DataTableHeader text="Firstname" />,
-            cell: (props) => <DataTableCell>{props.getValue()}</DataTableCell>,
-          }),
-          columnHelper.accessor("lastname", {
-            id: "Lastname",
-            header: () => <DataTableHeader text="Lastname" />,
-            cell: (props) => <DataTableCell>{props.getValue()}</DataTableCell>,
-          }),
-          columnHelper.display({
-            id: "expander",
-            header: () => <DataTableHeader text="" />,
-            cell: ({ row }) => (
-              <DataTableCell style={{ width: 72 }}>
-                {row.getCanExpand() && (
-                  <Button
-                    mode="tertiary"
-                    iconLeft={
-                      // Show a different icon when the row is expanded
-                      row.getIsExpanded() ? "expand_less" : "expand_more"
-                    }
-                    onClick={row.getToggleExpandedHandler()} // Here you plug your button with react-table expanded handler
-                  />
-                )}
-              </DataTableCell>
-            ),
-          }),
-        ],
+        () =>
+          columnHelper.columns([
+            columnHelper.accessor("firstname", {
+              header: () => <DataTableHeader text="Firstname" />,
+              cell: (props) => (
+                <DataTableCell>{props.getValue()}</DataTableCell>
+              ),
+            }),
+            columnHelper.accessor("lastname", {
+              id: "Lastname",
+              header: () => <DataTableHeader text="Lastname" />,
+              cell: (props) => (
+                <DataTableCell>{props.getValue()}</DataTableCell>
+              ),
+            }),
+            columnHelper.display({
+              id: "expander",
+              header: () => <DataTableHeader text="" />,
+              cell: ({ row }) => (
+                <DataTableCell style={{ width: 72 }}>
+                  {row.getCanExpand() && (
+                    <Button
+                      mode="tertiary"
+                      iconLeft={
+                        // Show a different icon when the row is expanded
+                        row.getIsExpanded() ? "expand_less" : "expand_more"
+                      }
+                      onClick={row.getToggleExpandedHandler()} // Here you plug your button with react-table expanded handler
+                    />
+                  )}
+                </DataTableCell>
+              ),
+            }),
+          ]),
         [columnHelper],
       );
 
-      const table = useReactTable({
+      const table = useTable({
+        features: expandingFeatures,
         data,
         columns,
         getSubRows: (row) => row.affiliates,
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getExpandedRowModel: getExpandedRowModel(), // from @tanstack/react-table
       });
 
       return <DataTable table={table} />;
@@ -955,23 +1046,33 @@ export const Sizes: StoryObj<typeof DataTable> = {
         [],
       );
 
-      const columnHelper = useMemo(() => createColumnHelper<User>(), []);
+      const columnHelper = useMemo(
+        () => createColumnHelper<typeof coreOnlyFeatures, User>(),
+        [],
+      );
 
       const columns = useMemo(
-        () => [
-          columnHelper.accessor("firstname", {
-            header: () => <DataTableHeader text="Firstname" />,
-            cell: (props) => <DataTableCell>{props.getValue()}</DataTableCell>,
-          }),
-          columnHelper.accessor("lastname", {
-            header: () => <DataTableHeader text="Lastname" />,
-            cell: (props) => <DataTableCell>{props.getValue()}</DataTableCell>,
-          }),
-          columnHelper.accessor("email", {
-            header: () => <DataTableHeader text="Email" />,
-            cell: (props) => <DataTableCell>{props.getValue()}</DataTableCell>,
-          }),
-        ],
+        () =>
+          columnHelper.columns([
+            columnHelper.accessor("firstname", {
+              header: () => <DataTableHeader text="Firstname" />,
+              cell: (props) => (
+                <DataTableCell>{props.getValue()}</DataTableCell>
+              ),
+            }),
+            columnHelper.accessor("lastname", {
+              header: () => <DataTableHeader text="Lastname" />,
+              cell: (props) => (
+                <DataTableCell>{props.getValue()}</DataTableCell>
+              ),
+            }),
+            columnHelper.accessor("email", {
+              header: () => <DataTableHeader text="Email" />,
+              cell: (props) => (
+                <DataTableCell>{props.getValue()}</DataTableCell>
+              ),
+            }),
+          ]),
         [columnHelper],
       );
 
@@ -980,10 +1081,10 @@ export const Sizes: StoryObj<typeof DataTable> = {
       }: {
         size: "small" | "default" | "large";
       }) => {
-        const table = useReactTable({
+        const table = useTable({
+          features: coreOnlyFeatures,
           data,
           columns,
-          getCoreRowModel: getCoreRowModel(),
         });
 
         return (
@@ -1068,6 +1169,11 @@ Should it be from a too intensive load for the database, a payload so big that t
 
 Below are two examples of how to integrate the `DataTable` component with `react-table` in both cases.
 
+Since `react-table` v9, a table only exposes the APIs of the features it registers
+through `tableFeatures()`. Declare that set once outside of your component, then type
+your column helper with it (`createColumnHelper<typeof features, TData>()`) and pass it
+to `useTable`. Both examples below show the pattern.
+
 ### Front-end managed
 
 When the data is small, it is better to handle the data manipulation on the front-end.