Merge pull request #367 from nginformatica/fix/data-table-slice

Fix/data table slice

Author: KarineBrandelli

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.35.4",
+    "version": "0.35.5",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -32,64 +32,64 @@
     "dependencies": {
         "@emotion/react": "11.14.0",
         "@emotion/styled": "11.14.0",
-        "@mui/icons-material": "6.3.1",
-        "@mui/material": "6.3.1",
-        "@mui/system": "6.3.1",
-        "@mui/x-date-pickers": "7.23.3",
+        "@mui/icons-material": "6.4.2",
+        "@mui/material": "6.4.2",
+        "@mui/system": "6.4.2",
+        "@mui/x-date-pickers": "7.24.1",
         "ramda": "0.30.1",
         "react-loading-skeleton": "3.5.0",
         "react-number-format": "5.4.3"
     },
     "devDependencies": {
         "@babel/cli": "7.26.4",
-        "@babel/core": "7.26.0",
+        "@babel/core": "7.26.7",
         "@babel/plugin-transform-runtime": "7.25.9",
-        "@babel/preset-env": "7.26.0",
+        "@babel/preset-env": "7.26.7",
         "@babel/preset-react": "7.26.3",
         "@babel/preset-typescript": "7.26.0",
-        "@faker-js/faker": "9.3.0",
-        "@storybook/addon-essentials": "8.4.7",
+        "@faker-js/faker": "9.4.0",
+        "@storybook/addon-essentials": "8.5.2",
         "@storybook/addon-webpack5-compiler-babel": "3.0.5",
-        "@storybook/blocks": "8.4.7",
-        "@storybook/react": "8.4.7",
-        "@storybook/react-webpack5": "8.4.7",
-        "@stylistic/eslint-plugin": "2.12.1",
+        "@storybook/blocks": "8.5.2",
+        "@storybook/react": "8.5.2",
+        "@storybook/react-webpack5": "8.5.2",
+        "@stylistic/eslint-plugin": "3.0.1",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-dom": "6.6.3",
-        "@testing-library/react": "16.1.0",
-        "@testing-library/user-event": "14.5.2",
+        "@testing-library/react": "16.2.0",
+        "@testing-library/user-event": "14.6.1",
         "@types/jest": "29.5.14",
-        "@types/node": "22.10.5",
+        "@types/node": "22.12.0",
         "@types/ramda": "0.30.2",
         "@types/react": "18.3.12",
         "@types/uuid": "10.0.0",
-        "@typescript-eslint/eslint-plugin": "8.19.1",
-        "@typescript-eslint/parser": "8.19.1",
+        "@typescript-eslint/eslint-plugin": "8.22.0",
+        "@typescript-eslint/parser": "8.22.0",
         "babel-loader": "9.2.1",
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
         "date-fns": "4.1.0",
-        "eslint": "9.17.0",
-        "eslint-config-prettier": "9.1.0",
+        "eslint": "9.19.0",
+        "eslint-config-prettier": "10.0.1",
         "eslint-import-resolver-typescript": "3.7.0",
         "eslint-plugin-import": "2.31.0",
-        "eslint-plugin-prettier": "5.2.1",
-        "eslint-plugin-react": "7.37.3",
+        "eslint-plugin-prettier": "5.2.3",
+        "eslint-plugin-react": "7.37.4",
         "eslint-plugin-react-hooks": "5.1.0",
-        "fs-extra": "11.2.0",
+        "fs-extra": "11.3.0",
         "identity-obj-proxy": "3.0.0",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
         "prettier": "3.4.2",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "storybook": "8.4.7",
+        "storybook": "8.5.2",
         "styled-components": "6.1.14",
         "ts-jest": "29.2.5",
-        "ts-loader": "9.5.1",
+        "ts-loader": "9.5.2",
         "typescript": "5.7.3",
-        "typescript-eslint": "8.19.1",
-        "uuid": "11.0.4",
+        "typescript-eslint": "8.22.0",
+        "uuid": "11.0.5",
         "webpack": "5.97.1"
     },
     "peerDependencies": {

src/core/data-display/data-table/data-table.tsx

@@ -17,7 +17,7 @@ import MuiTableFooter from '@mui/material/TableFooter'
 import MuiTableHead from '@mui/material/TableHead'
 import MuiTablePagination from '@mui/material/TablePagination'
 import MuiTableRow from '@mui/material/TableRow'
-import { last } from 'ramda'
+import { equals, last } from 'ramda'
 import type {
     ColumnSpec,
     Data,
@@ -87,11 +87,8 @@ const sliceData = <D,>(data: D[], page: number, rowsPerPage: number) => {
 export const DataTable = <D extends Data, V extends StackView>(
     props: DataTableProps<D, V>
 ) => {
-    const [page, setPage] = useState(0)
-    const pagination = { ...defaultPagination, ...props.pagination }
-    const [rowsPerPage, setRowsPerPage] = useState(pagination.rowsPerPage)
     const {
-        data,
+        data = [],
         columns,
         rowViews,
         onRowClick,
@@ -112,20 +109,28 @@ export const DataTable = <D extends Data, V extends StackView>(
         checkboxProps
     } = props
 
+    const pagination = { ...defaultPagination, ...props.pagination }
+
+    const controller = useRef<DataTableController<D, V>>()
+
+    const [page, setPage] = useState(0)
+    const [rows, setRows] = useState<D[]>([])
     const [newRow, setNewRow] = useState<PartialData<D> | undefined>()
+    const [rowsPerPage, setRowsPerPage] = useState(pagination.rowsPerPage)
 
-    const rows = useMemo(() => {
-        if (pagination.disabled) {
-            return data
-        }
+    useEffect(() => {
+        const newRows = pagination.disabled
+            ? data
+            : sliceData(
+                  data,
+                  page,
+                  newRow && page === 0 ? rowsPerPage - 1 : rowsPerPage
+              )
 
-        // this case is not good for the useRowsMode hook
-        if (newRow && page === 0) {
-            return sliceData(data, page, rowsPerPage - 1)
+        if (!equals(rows, newRows)) {
+            setRows(newRows)
         }
-
-        return sliceData(data, page, rowsPerPage)
-    }, [pagination.disabled, data, rowsPerPage, page, newRow])
+    }, [data, page, newRow, rowsPerPage, pagination.disabled])
 
     const {
         getRowState,
@@ -135,8 +140,6 @@ export const DataTable = <D extends Data, V extends StackView>(
         popRowView
     } = useRowsState<D, V>(rows, hidden, newRow)
 
-    const controller = useRef<DataTableController<D, V>>()
-
     useEffect(() => {
         const nextController: DataTableController<D, V> = {
             editRow: (id: string) => {
@@ -166,7 +169,7 @@ export const DataTable = <D extends Data, V extends StackView>(
             },
             pushRowView,
             popRowView
-        } as const
+        }
 
         controller.current = nextController