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,4 +1,5 @@
 import commonjs from "@rollup/plugin-commonjs";
+// eslint-disable-next-line import/no-named-as-default
 import nodeResolve from "@rollup/plugin-node-resolve";
 import external from "rollup-plugin-peer-deps-external";
 import terser from "@rollup/plugin-terser";
@@ -41,7 +42,6 @@ export default [
       sourcemap: true,
       globals: { react: "React" },
       exports: "named",
-      sourcemap: true,
       interop: "auto",
     },
     plugins,
@@ -55,7 +55,6 @@ export default [
       sourcemap: true,
       globals: { react: "React" },
       exports: "named",
-      sourcemap: true,
     },
     plugins,
   },
@@ -68,7 +67,6 @@ export default [
       sourcemap: true,
       globals: { react: "React" },
       exports: "named",
-      sourcemap: true,
     },
     plugins,
   },

src/lib/ReactDataTable/ReactDataTable.tsx

@@ -8,13 +8,13 @@ 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 +262,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 +359,6 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
   );
 };
 
-export { ReactDataTable, ReactDataTableProps };
+export { ReactDataTable };
+
+export { ReactDataTableProps } from "./ReactDataTableProps";

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>,

src/lib/useReactDataTable/useReactDataTable.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable max-lines */
-import {
+import {
   getCoreRowModel,
   getExpandedRowModel,
   getFilteredRowModel,
@@ -21,7 +20,10 @@ import { useMemo } from "react";
 
 /**
  * A react hook that returns a react table instance and the state of the table
+ * @param props The properties to configure the table
+ * @returns The table instance and the state of the table
  */
+
 const useReactDataTable = <TData, TFilter extends FilterModel = Record<string, never>>(
   props: useReactDataTableProps<TData, TFilter>,
 ): useReactDataTableResult<TData, TFilter> => {
@@ -96,46 +98,48 @@ const useReactDataTable = <TData, TFilter extends FilterModel = Record<string, n
   const effectiveOnColumnPinningChange = onColumnPinningChange ?? setColumnPinningInternal;
 
   // If we active the manual filtering, we have to unset the filter function, else it still does automatic filtering
-  if (manualFiltering) columns.forEach((x) => (x.filterFn = undefined));
+  if (manualFiltering) for (const x of columns) x.filterFn = undefined;
 
   const internalColumns = columns.filter((x) => x.meta?.isHidden !== true);
   const skeletonColumns = internalColumns.map((column) => ({
     ...column,
     cell: () => <Skeleton />,
   }));
-  const skeletonData = Array.from({ length: paginationInternal.pageSize }, () => ({} as TData));
+  const skeletonData = Array.from({ length: paginationInternal.pageSize }, () => ({}) as TData);
 
   const columnFilters = useMemo(() => getColumnFilterFromModel(effectiveColumnFilters), [effectiveColumnFilters]);
   const sorting = useMemo(() => getSortingStateFromModel(effectiveSorting), [effectiveSorting]);
 
+  // known issue for tanstack with open ticket: https://github.com/facebook/react/issues/33057
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable<TData>({
     data: isLoading ? skeletonData : data,
     columns: isLoading ? skeletonColumns : internalColumns,
 
     onColumnFiltersChange: (filtersOrUpdaterFn) => {
-      const newFilter = typeof filtersOrUpdaterFn !== "function" ? filtersOrUpdaterFn : filtersOrUpdaterFn(columnFilters);
+      const newFilter = typeof filtersOrUpdaterFn === "function" ? filtersOrUpdaterFn(columnFilters) : filtersOrUpdaterFn;
       return effectiveOnColumnFiltersChange(getModelFromColumnFilter(newFilter));
     },
     onPaginationChange: (paginationOrUpdaterFn) => {
-      const newFilter = typeof paginationOrUpdaterFn !== "function" ? paginationOrUpdaterFn : paginationOrUpdaterFn(effectivePagination);
+      const newFilter = typeof paginationOrUpdaterFn === "function" ? paginationOrUpdaterFn(effectivePagination) : paginationOrUpdaterFn;
       return effectiveOnPaginationChange(newFilter);
     },
     onSortingChange: (sortingOrUpdaterFn) => {
-      const newFilter = typeof sortingOrUpdaterFn !== "function" ? sortingOrUpdaterFn : sortingOrUpdaterFn(sorting);
+      const newFilter = typeof sortingOrUpdaterFn === "function" ? sortingOrUpdaterFn(sorting) : sortingOrUpdaterFn;
       return effectiveOnSortingChange(getModelFromSortingState(newFilter));
     },
     onRowSelectionChange: (rowSelectionOrUpdaterFn) => {
       const newRowSelection =
-        typeof rowSelectionOrUpdaterFn !== "function" ? rowSelectionOrUpdaterFn : rowSelectionOrUpdaterFn(effectiveRowSelection);
+        typeof rowSelectionOrUpdaterFn === "function" ? rowSelectionOrUpdaterFn(effectiveRowSelection) : rowSelectionOrUpdaterFn;
       return effectiveOnRowSelectionChange(newRowSelection);
     },
     onExpandedChange: (expandedOrUpdaterFn) => {
-      const newExpanded = typeof expandedOrUpdaterFn !== "function" ? expandedOrUpdaterFn : expandedOrUpdaterFn(effectiveExpanded);
+      const newExpanded = typeof expandedOrUpdaterFn === "function" ? expandedOrUpdaterFn(effectiveExpanded) : expandedOrUpdaterFn;
       return effectiveOnExpandedChange(newExpanded);
     },
     onColumnPinningChange: (columnPinningOrUpdaterFn) => {
       const newColumnPinning =
-        typeof columnPinningOrUpdaterFn !== "function" ? columnPinningOrUpdaterFn : columnPinningOrUpdaterFn(effectiveColumnPinning);
+        typeof columnPinningOrUpdaterFn === "function" ? columnPinningOrUpdaterFn(effectiveColumnPinning) : columnPinningOrUpdaterFn;
       return effectiveOnColumnPinningChange(newColumnPinning);
     },
 
@@ -184,7 +188,7 @@ const useReactDataTable = <TData, TFilter extends FilterModel = Record<string, n
 
   return {
     table,
-    columnFilters: effectiveColumnFilters as TFilter,
+    columnFilters: effectiveColumnFilters,
     pagination: effectivePagination,
     sorting: effectiveSorting,
     rowSelection: effectiveRowSelection,
@@ -199,4 +203,8 @@ const useReactDataTable = <TData, TFilter extends FilterModel = Record<string, n
   };
 };
 
-export { useReactDataTable, useReactDataTableProps, useReactDataTableResult };
+export { useReactDataTable };
+
+export { useReactDataTableProps } from "./useReactDataTableProps";
+
+export { useReactDataTableResult } from "./useReactDataTableResult";