diff --git a/package-lock.json b/package-lock.json
index fb4108e6fe..d2381db433 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"@popperjs/core": "^2.11.4",
+ "@tanstack/react-table": "^8.11.0",
"bootstrap": "^4.6.2",
"chalk": "^4.1.2",
"child_process": "^1.0.2",
@@ -40,7 +41,6 @@
"react-popper": "^2.2.5",
"react-proptype-conditional-require": "^1.0.4",
"react-responsive": "^8.2.0",
- "react-table": "^7.7.0",
"react-transition-group": "^4.4.2",
"tabbable": "^5.3.3",
"uncontrollable": "^7.2.1",
@@ -7441,6 +7441,37 @@
"node": ">=10"
}
},
+ "node_modules/@tanstack/react-table": {
+ "version": "8.11.0",
+ "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.11.0.tgz",
+ "integrity": "sha512-47wdYFlsbJlR6qt4F38nTGo93E6wNkXlN8t1TUI5SpSGiewx+KzBayMjfud3LgqbPLYYcpHby/tGkIF3tR8Upg==",
+ "dependencies": {
+ "@tanstack/table-core": "8.11.0"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "peerDependencies": {
+ "react": ">=16",
+ "react-dom": ">=16"
+ }
+ },
+ "node_modules/@tanstack/table-core": {
+ "version": "8.11.0",
+ "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.11.0.tgz",
+ "integrity": "sha512-7SC8/v6cXbUriOs2UISN8Jho3ttnA8cRZgusLn15b8meb28prHnWg4t4oNSHIR3rYn0g7iiIg+pax2CtBnyffg==",
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ }
+ },
"node_modules/@testing-library/dom": {
"version": "9.3.3",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz",
@@ -32205,6 +32236,7 @@
"node_modules/react-table": {
"version": "7.8.0",
"license": "MIT",
+ "peer": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
diff --git a/package.json b/package.json
index 75aaac31e7..d09bafb34f 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"@popperjs/core": "^2.11.4",
+ "@tanstack/react-table": "^8.11.0",
"bootstrap": "^4.6.2",
"chalk": "^4.1.2",
"child_process": "^1.0.2",
@@ -73,7 +74,6 @@
"react-popper": "^2.2.5",
"react-proptype-conditional-require": "^1.0.4",
"react-responsive": "^8.2.0",
- "react-table": "^7.7.0",
"react-transition-group": "^4.4.2",
"tabbable": "^5.3.3",
"uncontrollable": "^7.2.1",
diff --git a/src/DataTable/README.md b/src/DataTable/README.md
index 193b3b2b7a..bca4a38433 100644
--- a/src/DataTable/README.md
+++ b/src/DataTable/README.md
@@ -121,16 +121,16 @@ for more information.
data={data}
columns={[
{
- Header: 'Name',
+ header: 'Name',
accessor: 'name',
},
{
- Header: 'Famous For',
+ header: 'Famous For',
accessor: 'famous_for',
},
{
- Header: 'Coat Color',
+ header: 'Coat Color',
accessor: 'color',
Filter: CheckboxFilter,
filter: 'includesValue',
@@ -242,8 +242,8 @@ To enable proper selection behavior with backend pagination (i.e., when ``isSele
const selectColumn = {
id: 'selection',
- Header: DataTable.ControlledSelectHeader,
- Cell: DataTable.ControlledSelect,
+ header: DataTable.ControlledSelectHeader,
+ cell: DataTable.ControlledSelect,
disableSortBy: true,
};
@@ -290,15 +290,15 @@ To enable proper selection behavior with backend pagination (i.e., when ``isSele
data={data}
columns={[
{
- Header: 'Title',
+ header: 'Title',
accessor: 'title',
},
{
- Header: 'Director',
+ header: 'Director',
accessor: 'director',
},
{
- Header: 'Release date',
+ header: 'Release date',
accessor: 'release_date',
},
]}
@@ -377,15 +377,15 @@ See ``dataViewToggleOptions`` props documentation for all supported props.
data={data}
columns={[
{
- Header: 'Name',
+ header: 'Name',
accessor: 'name',
},
{
- Header: 'Famous For',
+ header: 'Famous For',
accessor: 'famous_for',
},
{
- Header: 'Coat Color',
+ header: 'Coat Color',
accessor: 'color',
Filter: CheckboxFilter,
filter: 'includesValue',
@@ -456,16 +456,16 @@ See ``dataViewToggleOptions`` props documentation for all supported props.
]}
columns={[
{
- Header: 'Name',
+ header: 'Name',
accessor: 'name',
},
{
- Header: 'Famous For',
+ header: 'Famous For',
accessor: 'famous_for',
},
{
- Header: 'Coat Color',
+ header: 'Coat Color',
accessor: 'color',
Filter: CheckboxFilter,
filter: 'includesValue',
@@ -551,15 +551,15 @@ Can be used to show the loading state when ``DataTable`` is asynchronously fetch
data={hasData ? data : []}
columns={[
{
- Header: 'Title',
+ header: 'Title',
accessor: 'title',
},
{
- Header: 'Director',
+ header: 'Director',
accessor: 'director',
},
{
- Header: 'Release date',
+ header: 'Release date',
accessor: 'release_date',
},
]}
@@ -637,8 +637,8 @@ You can pass a function to render custom components for bulk actions and table a
additionalColumns={[
{
id: 'action',
- Header: 'Action',
- Cell: ({ row }) => ,
+ header: 'Action',
+ cell: ({ row }) => ,
}
]}
data={[
@@ -681,15 +681,15 @@ You can pass a function to render custom components for bulk actions and table a
]}
columns={[
{
- Header: 'Name',
+ header: 'Name',
accessor: 'name',
},
{
- Header: 'Famous For',
+ header: 'Famous For',
accessor: 'famous_for',
},
{
- Header: 'Coat Color',
+ header: 'Coat Color',
accessor: 'color',
},
]}
@@ -759,8 +759,8 @@ You can pass a function to render custom components for bulk actions and table a
additionalColumns={[
{
id: 'action',
- Header: 'Action',
- Cell: ({ row }) => ,
+ header: 'Action',
+ cell: ({ row }) => ,
}
]}
data={[
@@ -803,16 +803,16 @@ You can pass a function to render custom components for bulk actions and table a
]}
columns={[
{
- Header: 'Name',
+ header: 'Name',
accessor: 'name',
},
{
- Header: 'Famous For',
+ header: 'Famous For',
accessor: 'famous_for',
},
{
- Header: 'Coat Color',
+ header: 'Coat Color',
accessor: 'color',
},
]}
@@ -1033,16 +1033,16 @@ a responsive grid of cards.
]}
columns={[
{
- Header: 'Title',
+ header: 'Title',
accessor: 'title',
},
{
- Header: 'Director',
+ header: 'Director',
accessor: 'director',
},
{
- Header: 'Release date',
+ header: 'Release date',
accessor: 'release_date',
},
]}
@@ -1124,15 +1124,15 @@ Use `columnSizes` prop of `CardView` component to define how many `Cards` are sh
]}
columns={[
{
- Header: 'Name',
+ header: 'Name',
accessor: 'name',
},
{
- Header: 'Color',
+ header: 'Color',
accessor: 'color',
},
{
- Header: 'Famous For',
+ header: 'Famous For',
accessor: 'famous_for',
},
]}
@@ -1198,15 +1198,15 @@ You can also display `Cards` with horizontal view. If the table is selectable co
]}
columns={[
{
- Header: 'Name',
+ header: 'Name',
accessor: 'name',
},
{
- Header: 'Color',
+ header: 'Color',
accessor: 'color',
},
{
- Header: 'Famous For',
+ header: 'Famous For',
accessor: 'famous_for',
},
]}
@@ -1258,16 +1258,16 @@ For a more desktop friendly view, you can move filters into a sidebar by providi
]}
columns={[
{
- Header: 'Name',
+ header: 'Name',
accessor: 'name',
},
{
- Header: 'Famous For',
+ header: 'Famous For',
accessor: 'famous_for',
},
{
- Header: 'Coat Color',
+ header: 'Coat Color',
accessor: 'color',
Filter: CheckboxFilter,
filter: 'includesValue',
@@ -1351,19 +1351,19 @@ Here we use default expander column offered by Paragon and for each row render v
columns={[
{
id: 'expander',
- Header: DataTable.ExpandAll,
- Cell: DataTable.ExpandRow,
+ header: DataTable.ExpandAll,
+ cell: DataTable.ExpandRow,
},
{
- Header: 'Name',
+ header: 'Name',
accessor: 'name',
},
{
- Header: 'Famous For',
+ header: 'Famous For',
accessor: 'famous_for',
},
{
- Header: 'Coat Color',
+ header: 'Coat Color',
accessor: 'color',
},
]}
@@ -1383,13 +1383,13 @@ You can create your own custom expander column and use it, see code example belo
const expanderColumn = {
id: 'expander',
// getToggleAllRowsExpandedProps and isAllRowsExpanded props will be automatically passed to the component
- Header: ({ getToggleAllRowsExpandedProps, isAllRowsExpanded }) => (
+ header: ({ getToggleAllRowsExpandedProps, isAllRowsExpanded }) => (
{isAllRowsExpanded ? : }
),
// Cell will receive row prop
- Cell: ({ row }) => (
+ cell: ({ row }) => (
{row.isExpanded ? 'Collapse' : 'Expand'}
@@ -1407,15 +1407,15 @@ You can create your own custom expander column and use it, see code example belo
]}
columns={[
{
- Header: 'Date modified',
+ header: 'Date modified',
accessor: 'date_modified',
},
{
- Header: 'Modified by',
+ header: 'Modified by',
accessor: 'modified_by',
},
{
- Header: 'Reason',
+ header: 'Reason',
accessor: 'reason',
},
]}
@@ -1459,15 +1459,15 @@ You can create your own custom expander column and use it, see code example belo
columns={[
{ ...expanderColumn },
{
- Header: 'Name',
+ header: 'Name',
accessor: 'name',
},
{
- Header: 'Famous For',
+ header: 'Famous For',
accessor: 'famous_for',
},
{
- Header: 'Coat Color',
+ header: 'Coat Color',
accessor: 'color',
},
]}
@@ -1518,24 +1518,24 @@ You can create your own cell content by passing the `Cell` property to a specifi
]}
columns={[
{
- Header: 'Name',
- Cell: ({ row }) => (
+ header: 'Name',
+ cell: ({ row }) => (
{row.original.name}
),
},
{
- Header: 'Famous For',
- Cell: ({ row }) => (
+ header: 'Famous For',
+ cell: ({ row }) => (
{row.original.famous_for}
),
},
{
- Header: 'Coat Color',
- Cell: ({ row }) => (
+ header: 'Coat Color',
+ cell: ({ row }) => (
{row.original.color}
@@ -1545,8 +1545,8 @@ You can create your own cell content by passing the `Cell` property to a specifi
additionalColumns={[
{
id: 'action',
- Header: 'Action',
- Cell: ({ row }) => ,
+ header: 'Action',
+ cell: ({ row }) => ,
}
]}
>
@@ -1612,15 +1612,15 @@ After selecting the maximum possible number of rows, you can display an error me
]}
columns={[
{
- Header: 'Name',
+ header: 'Name',
accessor: 'name',
},
{
- Header: 'Famous For',
+ header: 'Famous For',
accessor: 'famous_for',
},
{
- Header: 'Coat Color',
+ header: 'Coat Color',
accessor: 'color',
filter: 'includesValue',
filterChoices: [
diff --git a/src/DataTable/SmartStatus.jsx b/src/DataTable/SmartStatus.jsx
index 0eb575cf15..d7b9d981d2 100644
--- a/src/DataTable/SmartStatus.jsx
+++ b/src/DataTable/SmartStatus.jsx
@@ -14,19 +14,19 @@ function SmartStatus() {
RowStatusComponent,
showFiltersInSidebar,
} = useContext(DataTableContext);
- const { selectedRowIds } = state;
- const numSelectedRows = Object.keys(selectedRowIds || {}).length;
+ // const { selectedRowIds } = state;
+ // const numSelectedRows = Object.keys(selectedRowIds || {}).length;
const SelectionStatus = SelectionStatusComponent || SelectionStatusDefault;
const FilterStatus = FilterStatusComponent || FilterStatusDefault;
const RowStatus = RowStatusComponent || RowStatusDefault;
- if (numSelectedRows > 0) {
- return (
-
- );
- }
+ // if (numSelectedRows > 0) {
+ // return (
+ //
+ // );
+ // }
if (state?.filters?.length > 0 && !showFiltersInSidebar) {
return (
{
+ // if (fetchData) {
+ // fetchData({
+ // pageSize: tableStatePageSize,
+ // pageIndex: tableStatePageIndex,
+ // sortBy: tableStateSortBy,
+ // filters: tableStateFilters,
+ // });
+ // }
+ // }, [fetchData, tableStatePageSize, tableStatePageIndex, tableStateSortBy, tableStateFilters]);
- useEffect(() => {
- if (fetchData) {
- fetchData({
- pageSize: tableStatePageSize,
- pageIndex: tableStatePageIndex,
- sortBy: tableStateSortBy,
- filters: tableStateFilters,
- });
- }
- }, [fetchData, tableStatePageSize, tableStatePageIndex, tableStateSortBy, tableStateFilters]);
-
- useMountedLayoutEffect(() => {
- if (onSelectedRowsChanged) {
- onSelectedRowsChanged(tableStateSelectedRowIds);
- }
- }, [tableStateSelectedRowIds, onSelectedRowsChanged]);
+ // useMountedLayoutEffect(() => {
+ // if (onSelectedRowsChanged) {
+ // onSelectedRowsChanged(tableStateSelectedRowIds);
+ // }
+ // }, [tableStateSelectedRowIds, onSelectedRowsChanged]);
const selectionActions = useSelectionActions(instance, controlledTableSelections);
diff --git a/src/DataTable/utils/getTableArgs.js b/src/DataTable/utils/getTableArgs.js
index 602ea3e848..b478bd9fab 100644
--- a/src/DataTable/utils/getTableArgs.js
+++ b/src/DataTable/utils/getTableArgs.js
@@ -1,6 +1,12 @@
+// import {
+// useSortBy, useFilters, useRowSelect, usePagination, useExpanded,
+// } from 'react-table';
import {
- useSortBy, useFilters, useRowSelect, usePagination, useExpanded,
-} from 'react-table';
+ useReactTable,
+ getCoreRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+} from '@tanstack/react-table';
const getTableArgs = ({
tableOptions, isFilterable, isSortable, isPaginated, isSelectable, isExpandable,
@@ -8,21 +14,21 @@ const getTableArgs = ({
const tableArgs = [
tableOptions,
];
- if (isFilterable) {
- tableArgs.push(useFilters);
- }
+ // if (isFilterable) {
+ // tableArgs.push(useFilters);
+ // }
if (isSortable) {
- tableArgs.push(useSortBy);
- }
- if (isExpandable) {
- tableArgs.push(useExpanded);
+ tableArgs.push(getSortedRowModel);
}
+ // if (isExpandable) {
+ // tableArgs.push(useExpanded);
+ // }
if (isPaginated) {
- tableArgs.push(usePagination);
- }
- if (isSelectable) {
- tableArgs.push(useRowSelect);
+ tableArgs.push(getPaginationRowModel);
}
+ // if (isSelectable) {
+ // tableArgs.push(useRowSelect);
+ // }
return tableArgs;
};
diff --git a/src/index.js b/src/index.js
index a25410d8f9..e17da9db52 100644
--- a/src/index.js
+++ b/src/index.js
@@ -182,22 +182,28 @@ export {
useMediaQuery,
Context as ResponsiveContext,
} from 'react-responsive';
-export {
- useTable,
- useFilters,
- useGlobalFilter,
- useSortBy,
- useGroupBy,
- useExpanded,
- usePagination,
- useRowSelect,
- useRowState,
- useColumnOrder,
- useResizeColumns,
- useBlockLayout,
- useAbsoluteLayout,
- useFlexLayout,
-} from 'react-table';
+// export {
+// useTable,
+// useFilters,
+// useGlobalFilter,
+// useSortBy,
+// useGroupBy,
+// useExpanded,
+// usePagination,
+// useRowSelect,
+// useRowState,
+// useColumnOrder,
+// useResizeColumns,
+// useBlockLayout,
+// useAbsoluteLayout,
+// useFlexLayout,
+// } from 'react-table';
+import {
+ useReactTable,
+ getCoreRowModel,
+ getPaginationRowModel,
+ getSortedRowModel
+} from '@tanstack/react-table';
export { default as Skeleton, SkeletonTheme } from './Skeleton/index';
export { default as Bubble } from './Bubble';
export { default as Dropzone } from './Dropzone';