migrate to eslint 9

.github/workflows/ci.yml

@@ -78,7 +78,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [20.x, 22.x, 24.x, 25.x]
     steps:
       - uses: actions/checkout@v2
 

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- migrated to eslint 9 flat config
+- removed obsolete storybook
+
 ## [5.14.0] - 2025-12-15
 
 ### Fixed

eslint.config.mjs

@@ -0,0 +1,4 @@
+import neolutionEslintConfig from "@neolution-ch/eslint-config-neolution";
+import storybook from "eslint-plugin-storybook";
+
+export default [...neolutionEslintConfig.configs.flat["react-library"], ...storybook.configs["flat/recommended"]];

package.json

@@ -32,7 +32,7 @@
   "scripts": {
     "build": "rollup -c && yarn copy-definitionfile",
     "build-storybook": "build-storybook",
-    "lint": "eslint \"**/*.{ts,tsx}\" --cache --max-warnings 0",
+    "lint": "eslint --cache",
     "prepack": "yarn build",
     "prepare-pr": "yarn prettier . --write && yarn lint && yarn build && yarn test\"",
     "prettier-check": "prettier --check .",
@@ -59,6 +59,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
+    "@neolution-ch/eslint-config-neolution": "^2.3.0",
     "@release-it/keep-a-changelog": "^3.1.0",
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
@@ -84,17 +85,12 @@
     "bootstrap": "^4.0.0",
     "concurrently": "^8.0.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.39.0",
-    "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",
+    "eslint": "^9.37.0",
+    "eslint-plugin-storybook": "^0.10.0",
     "gh-pages": "^5.0.0",
     "jest": "^27.5.1",
     "nodemon": "^2.0.22",
-    "prettier": "^2.8.8",
+    "prettier": "^3.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "reactstrap": "^8.10.1",
@@ -118,7 +114,7 @@
     "reactstrap": "^8.0.0 || ^9.0.0"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=20"
   },
   "publishConfig": {
     "access": "public",

rollup.config.mjs

@@ -1,5 +1,5 @@
 import commonjs from "@rollup/plugin-commonjs";
-import nodeResolve from "@rollup/plugin-node-resolve";
+import nodeResolvePlugin from "@rollup/plugin-node-resolve";
 import external from "rollup-plugin-peer-deps-external";
 import terser from "@rollup/plugin-terser";
 import typescript from "rollup-plugin-typescript2";
@@ -22,7 +22,7 @@ const plugins = [
   commonjs({
     include: /\/node_modules\//,
   }),
-  nodeResolve(),
+  nodeResolvePlugin(),
   terser({
     output: { comments: false },
     compress: {
@@ -41,7 +41,6 @@ export default [
       sourcemap: true,
       globals: { react: "React" },
       exports: "named",
-      sourcemap: true,
       interop: "auto",
     },
     plugins,
@@ -55,7 +54,6 @@ export default [
       sourcemap: true,
       globals: { react: "React" },
       exports: "named",
-      sourcemap: true,
     },
     plugins,
   },
@@ -68,7 +66,6 @@ export default [
       sourcemap: true,
       globals: { react: "React" },
       exports: "named",
-      sourcemap: true,
     },
     plugins,
   },

src/index.ts

@@ -1,7 +1,11 @@
 export * from "./lib/translations/translations";
 export * from "./lib/useReactDataTableState/useReactDataTableState";
+export * from "./lib/useReactDataTableState/useReactDataTableStateProps";
 export * from "./lib/useReactDataTable/useReactDataTable";
+export * from "./lib/useReactDataTable/useReactDataTableProps";
+export * from "./lib/useReactDataTable/useReactDataTableResult";
 export * from "./lib/ReactDataTable/ReactDataTable";
+export * from "./lib/ReactDataTable/ReactDataTableProps";
 export * from "./lib/utils/getStronglyTypedColumnFilter";
 export * from "./lib/useFullyControlledReactDataTable/useFullyControlledReactDataTable";
 export * from "./lib/utils/createReactDataTableColumnHelper";

src/lib/ReactDataTable/ReactDataTable.tsx

@@ -8,13 +8,12 @@ import { reactDataTableTranslations } from "../translations/translations";
 import { ReactDataTableProps } from "./ReactDataTableProps";
 import { FilterModel } from "../types/TableState";
 import { getModelFromColumnFilter } from "../utils/getModelFromColumnFilter";
-import { Fragment } from "react";
+import { Fragment, useRef } from "react";
 import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { getCommonPinningStyles } from "../utils/getCommonPinningStyles";
 import { getFilterValue, setFilterValue } from "../utils/customFilterMethods";
 import { useVirtualizer, Virtualizer } from "@tanstack/react-virtual";
-import { useRef } from "react";
 import { TableBody } from "./TableBody";
 import { useVirtualizationTableHeight } from "../hooks/useVirtualizationTableHeight";
 import Skeleton from "react-loading-skeleton";
@@ -262,6 +261,7 @@ const TableInternal = <TData, TFilter extends FilterModel = Record<string, never
 /**
  * The table renderer for the react data table
  * @param props according to {@link ReactDataTableProps}
+ * @returns The rendered ReactDataTable component
  */
 const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, never>>(props: ReactDataTableProps<TData, TFilter>) => {
   const {
@@ -358,4 +358,4 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
   );
 };
 
-export { ReactDataTable, ReactDataTableProps };
+export { ReactDataTable };

src/lib/ReactDataTable/TableBody.tsx

@@ -56,16 +56,16 @@ const TableBody = <TData, TFilter extends FilterModel = Record<string, never>>(p
           <DraggableRow<TData, TFilter>
             key={index}
             row={row}
-            enableRowClick={enableRowClick as ReactDataTableProps<TData, TFilter>["enableRowClick"]}
-            onRowClick={onRowClick as ReactDataTableProps<TData, TFilter>["onRowClick"]}
+            enableRowClick={enableRowClick}
+            onRowClick={onRowClick}
             enableRowSelection={enableRowSelection as boolean | ((row: Row<TData>) => boolean)}
             enableExpanding={enableExpanding as boolean | ((row: Row<TData>) => boolean)}
             rowStyle={{
-              ...(x.rowStyle ?? {}),
+              ...x.rowStyle,
               ...(rowStyle ? rowStyle(row.original) : {}),
             }}
             fullRowSelectable={fullRowSelectable}
-            subRowComponent={subRowComponent as ReactDataTableProps<TData, TFilter>["subRowComponent"]}
+            subRowComponent={subRowComponent}
           />
         );
       })}
@@ -78,17 +78,17 @@ const TableBody = <TData, TFilter extends FilterModel = Record<string, never>>(p
           <InternalTableRow<TData, TFilter>
             key={index}
             row={row}
-            enableRowClick={enableRowClick as ReactDataTableProps<TData, TFilter>["enableRowClick"]}
-            onRowClick={onRowClick as ReactDataTableProps<TData, TFilter>["onRowClick"]}
+            enableRowClick={enableRowClick}
+            onRowClick={onRowClick}
             enableRowSelection={enableRowSelection as boolean | ((row: Row<TData>) => boolean)}
             enableExpanding={enableExpanding as boolean | ((row: Row<TData>) => boolean)}
             rowStyle={{
-              ...(x.rowStyle ?? {}),
+              ...x.rowStyle,
               ...(rowStyle ? rowStyle(row.original) : {}),
             }}
             fullRowSelectable={fullRowSelectable}
             hasPinnedColumns={table.getIsSomeColumnsPinned()}
-            subRowComponent={subRowComponent as ReactDataTableProps<TData, TFilter>["subRowComponent"]}
+            subRowComponent={subRowComponent}
           />
         );
       })}

src/lib/hooks/useVirtualizationTableHeight.tsx

@@ -10,7 +10,7 @@ const adjustTableHeight = (
 
   // calculate the height for the pseudo element after the table
   const existingPseudoElement = window.getComputedStyle(tableRef.current, "::after");
-  const existingPseudoHeight = parseFloat(existingPseudoElement.height) || 0;
+  const existingPseudoHeight = Number.parseFloat(existingPseudoElement.height) || 0;
   const tableHeight = tableRef.current.clientHeight - existingPseudoHeight;
   const pseudoHeight = Math.max(virtualHeight - tableHeight, 0);
   onPseudoHeightChange?.(pseudoHeight);

src/lib/translations/translations.ts

@@ -1,6 +1,5 @@
 /**
  * This are the possible translations for the data table
- *
  * @interface DataTableTranslations
  * @property {string} clearSearchToolTip is used to print out the bottom text, possible placeholders are: {from}, {to} and {total}
  */

src/lib/useFullyControlledReactDataTable/useFullyControlledReactDataTable.tsx

@@ -22,6 +22,8 @@ interface useFullyControlledReactDataTableProps<TData, TFilter extends FilterMod
 
 /**
  * A helper hook to use the useReactDataTable hook which is fully controlled. Usefull for server side filtering, sorting and pagination.
+ * @param props The properties to configure the table
+ * @returns The table instance and the state of the table
  */
 const useFullyControlledReactDataTable = <TData, TFilter extends FilterModel>(
   props: useFullyControlledReactDataTableProps<TData, TFilter>,