Migrate to TanStack Table (#57)

Co-authored-by: neotob <tobias.merki@neolution.ch>
Co-authored-by: Gianmarco Manni <gianmarco.manni@neolution.ch>

Author: 3 people

.eslintrc.cjs

@@ -3,7 +3,15 @@ module.exports = {
     node: true,
     jest: true,
   },
-  extends: ["eslint:recommended", "plugin:import/recommended", "prettier", "plugin:storybook/recommended"],
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:import/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     project: "tsconfig.json",
@@ -59,12 +67,6 @@ module.exports = {
         max: 200,
       },
     ],
-    complexity: [
-      "error",
-      {
-        max: 12,
-      },
-    ],
     "prefer-destructuring": "error",
     "no-empty-function": "error",
     "arrow-body-style": ["error", "as-needed"],

.storybook/Dockerfile

@@ -7,6 +7,56 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Skeletons for when the data is loading
+
+### Changed
+
+- :boom: Fundamentally changed how this package works. The state is now managed by the consumer of this package. This means that the consumer has to provide the data and the functions to update the data. The package only provides the UI components to display the data. This change was necessary to make the package more flexible and to allow the consumer to use the package in a wider range of use cases. Behind the scenes, the package uses the `useTable` hook from the `@tanstack/react-table` package. The consumer can use the `useTable` hook directly if he wants to. The `ReactDataTable` component is just a wrapper around the `useTable` hook. The `ReactDataTable` component is still the recommended way to use this package.
+
+- :boom: renamed `possiblePageItemCounts` to `pageSizes`.
+
+- :boom: `columns` is now of type `ColumnDef<TData, TValue>` from the `@tanstack/react-table` package. Please refer to the documentation of the `@tanstack/react-table` package for more information: https://tanstack.com/table/v8/docs/api/core/table#columns (there are additional custom fields in the column.meta object defined by us: `src/react-table.d.ts`)
+
+### Removed
+
+- :boom: removed `rowHighlight`. Use `rowStyle` instead.
+- :boom: removed `enablePredefinedSort` prop. Use `initialState.sorting` instead. Or `state.sorting` if you want to manage the state yourself.
+- :boom: removed `predefinedFilter` prop. Use `initialState`.
+- :boom: removed `asc` prop. Use `initialState.sorting` instead. Or `state.sorting` if you want to manage the state yourself.
+- :boom: removed `predefinedItemsPerPage` prop. Use `initialState.pagination.pageSize` instead. Or `state.pagination.pageSize` if you want to manage the state yourself.
+- :boom: removed `orderBy` prop. Use `initialState.sorting` instead. Or `state.sorting` if you want to manage the state yourself.
+- :boom: removed `client` prop. Use `data` prop instead and manage the state of the data yourself.
+- :boom: removed `query` prop. Use `data` prop instead and manage the state of the data yourself.
+- :boom: removed `handlers` prop. Since the state is now managed by the user, the user is responsible for updating the data.
+- :boom: removed `actions` props. You can easily define whatever actions you would like to have in the `columns` prop.
+  This is an example of how you could configure the actions column:
+
+```tsx
+import { createColumnHelper } from "@tanstack/react-table";
+
+const columnHelper = createColumnHelper<YourData>();
+columnHelper.display({
+      id: "edit",
+      header: () => <span>Aktionen</span>,
+      cell: (props) => (
+        <>
+          <Link href={{ pathname: "/addresses/[addressId]", query: { addressId: props.row.getValue("addressId") } }}>
+            <FontAwesomeIcon icon={faEye} style={{ marginRight: "5px" }} />
+          </Link>
+          <FontAwesomeIcon
+            icon={faTrash}
+            style={{ marginRight: "5px" }}
+            onClick={async () => {
+                //  do something
+            }}
+          />
+        </>
+      ),
+    }),
+```
+
 ## [3.8.0] - 2023-11-20
 
 - Changed `DeleteAction` to expose `cancelButtonText` and `deleteButtonText` props for translations

CHANGELOG.md

@@ -1,9 +1,48 @@
 # react-data-table
 
-A react data-table that uses bootstrap design, can be either used for showing static content or also as fully interactive table together with an api client, supports filtering, sorting, paging and many more interactions.
+This package relies heavly on `tanstack/react-table` and `reactstrap` to provide a simple and easy to use data table.
 
-## Storybook
+## Installation
 
-The storybook is a visual testing tool that makes it easy to test and tinker with the components.
+```bash
+npm install @neolution-ch/react-data-table
+or
+yarn add @neolution-ch/react-data-table
+```
 
-It can be found at https://neolution-ch.github.io/react-data-table
+### CSS
+
+The skeletons are provided by `react-loading-skeleton` so you need to import the css file in your project.
+
+```tsx
+import "react-loading-skeleton/dist/skeleton.css";
+```
+
+### Peer dependencies
+
+todo
+
+## Usage
+
+The main entry point for everything is the `ReactDataTable` component.
+
+The props that you provide will determine if the table is sorted, filtered, paginated, etc. on the client or if the consumer of this package has to provide the data and the functions to update the data.
+
+### Fully Static / Client Side Example
+
+In this configuration the table is fully static meaning that the data will be sorted, filtered, paginated, etc. on the client.
+
+```tsx
+<ReactDataTable<Person, string> data={data} columns={columns} />
+```
+
+### Fully Dynamic / Server Side Example
+
+In this configuration the table is fully dynamic meaning that the consumer of this package has to provide the data and the functions to update the data.
+
+| use case                                                                                                   | onSorting | sorting |
+| ---------------------------------------------------------------------------------------------------------- | --------- | ------- |
+| you want to manually sort your data (possible server side) but you don't want to manage the state yourself | yes       | no      |
+| you want the data table to handle the sorting but would like to influence the sorting from the outside     | no        | yes     |
+| you want to manually sort your data AND you want to mange the state yourself                               | yes       | yes     |
+| you want the data table to handle the sorting and you don't want to manually influence the state           | no        | no      |

README.md

@@ -30,22 +30,25 @@
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c && yarn copy-definitionfile",
     "build-storybook": "build-storybook",
     "lint": "eslint \"**/*.{ts,tsx}\" --cache --max-warnings 0",
     "prepack": "yarn build",
     "prepare-pr": "yarn prettier . --write && yarn lint && yarn build && yarn test\"",
     "prettier-check": "prettier --check .",
     "prettier-write": "prettier --write .",
-    "start": "rollup -c -w",
+    "copy-definitionfile": "shx cp -r src/react-table.d.ts dist/react-table.d.ts",
+    "start": "yarn copy-definitionfile && rollup -c -w",
     "start-all": "concurrently \"yarn start\" \"yarn start-yalc\"",
     "start-yalc": "yarn nodemon --watch dist -x \"yarn yalc push\"",
     "storybook": "start-storybook -p 6006",
     "test": "cross-env DEBUG_PRINT_LIMIT=100 jest",
     "tsc": "tsc"
   },
   "dependencies": {
-    "@neolution-ch/react-pattern-ui": "2.9.0"
+    "@neolution-ch/react-pattern-ui": "^3.1.0",
+    "@tanstack/react-table": "^8.10.7",
+    "react-loading-skeleton": "^3.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.21.8",
@@ -65,6 +68,7 @@
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.0.4",
     "@types/jest": "^27.4.1",
     "@types/node": "^18.16.3",
@@ -80,6 +84,8 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.12",
     "gh-pages": "^5.0.0",
     "jest": "^27.5.1",

package.json

@@ -26,7 +26,7 @@ const plugins = [
   terser({
     output: { comments: false },
     compress: {
-      drop_console: true,
+      drop_console: false,
     },
   }),
 ];

rollup.config.mjs

@@ -1,4 +1,9 @@
-export * from "./lib/DataTable/DataTable";
-export * from "./lib/DataTable/DataTableInterfaces";
-export * from "./lib/DataTable/DataTableRouted";
-export * from "./lib/DataTable/DataTableTypes";
+export * from "./lib/translations/translations";
+export * from "./lib/useReactDataTableState/useReactDataTableState";
+export * from "./lib/useReactDataTable/useReactDataTable";
+export * from "./lib/ReactDataTable/ReactDataTable";
+export * from "./lib/utils/getStronglyTypedColumnFilter";
+export * from "./lib/useFullyControlledReactDataTable/useFullyControlledReactDataTable";
+export * from "./lib/utils/createReactDataTableColumnHelper";
+export * from "./lib/utils/getModelFromColumnFilter";
+export * from "./lib/utils/getColumnFilterFromModel";