@terraware/web-components 5.0.26-rc.1 → 5.0.27-rc.0

package/components/table/index.js

@@ -1,378 +1,359 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { useSensors, useSensor, MouseSensor, TouchSensor, KeyboardSensor, DndContext } from '@dnd-kit/core';
-import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-import { useTheme, TableContainer, Table, TableBody, TableRow, TableCell, Checkbox, Typography, Box, Pagination } from '@mui/material';
-import 'lodash';
-import 'luxon';
-import useDeviceInfo from '../../utils/useDeviceInfo.js';
-import { CheckboxStyle } from '../Checkbox.js';
-import EnhancedTableToolbarV2 from './EnhancedTableToolbarV2.js';
-import CellRenderer from './TableCellRenderer.js';
-import EnhancedTableHead from './TableHeader.js';
-import { getTableCellPaddingY, getTableRowHeight } from './density.js';
-import { stableSort, descendingComparator, getComparator } from './sort.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-const isTopBarButton = input => {
-  const castInput = input;
-  return !!(castInput.buttonType && castInput.onButtonClick);
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import react, { useCallback, useEffect, useMemo, useState } from "react";
+import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { Box, Checkbox, Pagination, Table, TableBody, TableCell, TableContainer, TableRow, Typography, useTheme } from "@mui/material";
+import { useDeviceInfo } from "../../utils/index.js";
+import { CheckboxStyle } from "../Checkbox.js";
+import EnhancedTableToolbarV2 from "./EnhancedTableToolbarV2.js";
+import TableCellRenderer from "./TableCellRenderer.js";
+import TableHeader from "./TableHeader.js";
+import { getTableCellPaddingY, getTableRowHeight } from "./density.js";
+import { descendingComparator, getComparator, stableSort } from "./sort.js";
+const isTopBarButton = (input)=>{
+    const castInput = input;
+    return !!(castInput.buttonType && castInput.onButtonClick);
 };
-function EnhancedTable({
-  id,
-  columns,
-  rows,
-  order: _order = 'asc',
-  orderBy: _orderBy,
-  Renderer = CellRenderer,
-  onSelect,
-  onPageChange,
-  maxItemsPerPage = 100,
-  totalRowCount,
-  currentPage,
-  DetailsRenderer,
-  sortComparator = descendingComparator,
-  sortHandler,
-  isInactive,
-  isPresorted,
-  onReorderEnd,
-  isClickable,
-  emptyTableMessage,
-  showCheckbox,
-  showTopBar,
-  topBarButtons,
-  selectedRows,
-  setSelectedRows,
-  controlledOnSelect,
-  reloadData,
-  stickyHeader = true,
-  hideHeader,
-  booleanFalseText,
-  booleanTrueText,
-  editText,
-  renderNumSelectedText,
-  renderPaginationText,
-  enhancedTopBarSelectionConfig,
-  density = 'comfortable',
-  tableComments
-}) {
-  const theme = useTheme();
-  const [order, setOrder] = React.useState(_order);
-  const [orderBy, setOrderBy] = React.useState(_orderBy);
-  const [internalPage, setInternalPage] = useState(1);
-  const {
-    isMobile
-  } = useDeviceInfo();
-  const [displayColumnKeyNames, setDisplayColumnKeyNames] = useState();
-  const [displayColumnsIndexed, setDisplayColumnsIndexed] = useState();
-  const [displayColumnDetails, setDisplayColumnDetails] = useState();
-  useEffect(() => {
-    const columnsKeyNames = columns.map(col => col.key);
-    const columnsIndexed = columns.reduce((acum, value) => {
-      acum[value.key] = value;
-      return acum;
-    }, {});
-    setDisplayColumnKeyNames(columnsKeyNames);
-    setDisplayColumnsIndexed(columnsIndexed);
-  }, [columns]);
-  useEffect(() => {
-    if (displayColumnKeyNames && displayColumnsIndexed) {
-      const columnsDetails = displayColumnKeyNames.map(key => ({
-        ...displayColumnsIndexed[key]
-      }));
-      setDisplayColumnDetails(columnsDetails);
-    }
-  }, [displayColumnKeyNames, displayColumnsIndexed]);
-  useEffect(() => {
-    if (setSelectedRows && rows.length >= 0) {
-      setSelectedRows(currentlySelectedRows => {
-        const emptyArray = [];
-        if (rows.length || currentlySelectedRows.length > rows.length) {
-          return emptyArray;
+function EnhancedTable({ id, columns, rows, order: _order = 'asc', orderBy: _orderBy, Renderer = TableCellRenderer, onSelect, onPageChange, maxItemsPerPage = 100, totalRowCount, currentPage, DetailsRenderer, sortComparator = descendingComparator, sortHandler, isInactive, isPresorted, onReorderEnd, isClickable, emptyTableMessage, showCheckbox, showTopBar, topBarButtons, selectedRows, setSelectedRows, controlledOnSelect, reloadData, stickyHeader = true, hideHeader, booleanFalseText, booleanTrueText, editText, renderNumSelectedText, renderPaginationText, enhancedTopBarSelectionConfig, density = 'comfortable', tableComments }) {
+    const theme = useTheme();
+    const [order, setOrder] = react.useState(_order);
+    const [orderBy, setOrderBy] = react.useState(_orderBy);
+    const [internalPage, setInternalPage] = useState(1);
+    const { isMobile } = useDeviceInfo();
+    const [displayColumnKeyNames, setDisplayColumnKeyNames] = useState();
+    const [displayColumnsIndexed, setDisplayColumnsIndexed] = useState();
+    const [displayColumnDetails, setDisplayColumnDetails] = useState();
+    useEffect(()=>{
+        const columnsKeyNames = columns.map((col)=>col.key);
+        const columnsIndexed = columns.reduce((acum, value)=>{
+            acum[value.key] = value;
+            return acum;
+        }, {});
+        setDisplayColumnKeyNames(columnsKeyNames);
+        setDisplayColumnsIndexed(columnsIndexed);
+    }, [
+        columns
+    ]);
+    useEffect(()=>{
+        if (displayColumnKeyNames && displayColumnsIndexed) {
+            const columnsDetails = displayColumnKeyNames.map((key)=>({
+                    ...displayColumnsIndexed[key]
+                }));
+            setDisplayColumnDetails(columnsDetails);
         }
-        return currentlySelectedRows;
-      });
-    }
-  }, [rows, setSelectedRows]);
-  const handleChangePage = useCallback((event, newPage) => {
-    onPageChange?.(newPage);
-    if (currentPage === undefined) {
-      setInternalPage(newPage);
-    }
-  }, [onPageChange, currentPage]);
-  useEffect(() => {
-    // this is not most elegant but we want to do this if table was sorted by some column in a presorted table
-    // but we don't know when the data changes, hence this useEffect on the data size
-    if (isPresorted && onPageChange === undefined) {
-      // we want to set page back to 1 if the data changes on presorted lists,
-      // this is because the data was reset due to some sort behavior refetching new data
-      handleChangePage({}, 1);
-    }
-  }, [handleChangePage, isPresorted, onPageChange, rows]);
-  const handleRequestSort = (event, property) => {
-    const isAsc = orderBy === property && order === 'asc';
-    const newOrder = isAsc ? 'desc' : 'asc';
-    setOrder(newOrder);
-    setOrderBy(property);
-    if (sortHandler) {
-      sortHandler(newOrder, property);
-    }
-  };
-  const hasEditColumn = columns.filter(c => c.type === 'edit').length > 0;
-  const isSelected = row => {
-    return selectedRows && selectedRows.indexOf(row) !== -1;
-  };
-  const handleSelectAllClick = event => {
-    if (setSelectedRows) {
-      if (event.target.checked) {
-        setSelectedRows(rows);
-        return;
-      } else {
-        setSelectedRows([]);
-      }
-    }
-  };
-  const handleClick = (event, row) => {
-    if (setSelectedRows && selectedRows) {
-      const selectedIndex = selectedRows.indexOf(row);
-      let newSelected = [];
-      if (selectedIndex === -1) {
-        newSelected = newSelected.concat(selectedRows, row);
-      } else if (selectedIndex === 0) {
-        newSelected = newSelected.concat(selectedRows.slice(1));
-      } else if (selectedIndex === selectedRows.length - 1) {
-        newSelected = newSelected.concat(selectedRows.slice(0, -1));
-      } else if (selectedIndex > 0) {
-        newSelected = newSelected.concat(selectedRows.slice(0, selectedIndex), selectedRows.slice(selectedIndex + 1));
-      }
-      setSelectedRows(newSelected);
-    }
-  };
-  const columnsToHeadCells = useCallback(columnsR => {
-    return columnsR.map(c => ({
-      id: c.key,
-      disablePadding: true,
-      label: typeof c.name === 'string' ? c.name.toUpperCase() : c.name,
-      sx: [{
-        paddingY: getTableCellPaddingY(density)
-      }, ...(Array.isArray(c.sx) ? c.sx : [c.sx])],
-      tooltipTitle: c.tooltipTitle
+    }, [
+        displayColumnKeyNames,
+        displayColumnsIndexed
+    ]);
+    useEffect(()=>{
+        if (setSelectedRows && rows.length >= 0) setSelectedRows((currentlySelectedRows)=>{
+            const emptyArray = [];
+            if (rows.length || currentlySelectedRows.length > rows.length) return emptyArray;
+            return currentlySelectedRows;
+        });
+    }, [
+        rows,
+        setSelectedRows
+    ]);
+    const handleChangePage = useCallback((event, newPage)=>{
+        onPageChange?.(newPage);
+        if (void 0 === currentPage) setInternalPage(newPage);
+    }, [
+        onPageChange,
+        currentPage
+    ]);
+    useEffect(()=>{
+        if (isPresorted && void 0 === onPageChange) handleChangePage({}, 1);
+    }, [
+        handleChangePage,
+        isPresorted,
+        onPageChange,
+        rows
+    ]);
+    const handleRequestSort = (event, property)=>{
+        const isAsc = orderBy === property && 'asc' === order;
+        const newOrder = isAsc ? 'desc' : 'asc';
+        setOrder(newOrder);
+        setOrderBy(property);
+        if (sortHandler) sortHandler(newOrder, property);
+    };
+    const hasEditColumn = columns.filter((c)=>'edit' === c.type).length > 0;
+    const isSelected = (row)=>selectedRows && -1 !== selectedRows.indexOf(row);
+    const handleSelectAllClick = (event)=>{
+        if (setSelectedRows) if (event.target.checked) return void setSelectedRows(rows);
+        else setSelectedRows([]);
+    };
+    const handleClick = (event, row)=>{
+        if (setSelectedRows && selectedRows) {
+            const selectedIndex = selectedRows.indexOf(row);
+            let newSelected = [];
+            if (-1 === selectedIndex) newSelected = newSelected.concat(selectedRows, row);
+            else if (0 === selectedIndex) newSelected = newSelected.concat(selectedRows.slice(1));
+            else if (selectedIndex === selectedRows.length - 1) newSelected = newSelected.concat(selectedRows.slice(0, -1));
+            else if (selectedIndex > 0) newSelected = newSelected.concat(selectedRows.slice(0, selectedIndex), selectedRows.slice(selectedIndex + 1));
+            setSelectedRows(newSelected);
+        }
+    };
+    const columnsToHeadCells = useCallback((columnsR)=>columnsR.map((c)=>({
+                id: c.key,
+                disablePadding: true,
+                label: 'string' == typeof c.name ? c.name.toUpperCase() : c.name,
+                sx: [
+                    {
+                        paddingY: getTableCellPaddingY(density)
+                    },
+                    ...Array.isArray(c.sx) ? c.sx : [
+                        c.sx
+                    ]
+                ],
+                tooltipTitle: c.tooltipTitle
+            })), [
+        density
+    ]);
+    const [headCells, setHeadCells] = react.useState();
+    react.useEffect(()=>{
+        if (displayColumnDetails) setHeadCells(columnsToHeadCells(displayColumnDetails));
+    }, [
+        columnsToHeadCells,
+        displayColumnDetails
+    ]);
+    const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates
     }));
-  }, [density]);
-  const [headCells, setHeadCells] = React.useState();
-  React.useEffect(() => {
-    if (displayColumnDetails) {
-      setHeadCells(columnsToHeadCells(displayColumnDetails));
-    }
-  }, [columnsToHeadCells, displayColumnDetails]);
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor), useSensor(KeyboardSensor, {
-    coordinateGetter: sortableKeyboardCoordinates
-  }));
-  const onReorderEndHandler = useCallback(({
-    oldIndex,
-    newIndex
-  }) => {
-    if (displayColumnKeyNames) {
-      if (newIndex !== 0 && oldIndex !== 0) {
-        const newOrder = [...displayColumnKeyNames];
-        const moved = newOrder.splice(oldIndex, 1);
-        newOrder.splice(newIndex, 0, moved[0]);
-        setDisplayColumnKeyNames(newOrder);
-        if (onReorderEnd) {
-          onReorderEnd(newOrder);
+    const onReorderEndHandler = useCallback(({ oldIndex, newIndex })=>{
+        if (displayColumnKeyNames) {
+            if (0 !== newIndex && 0 !== oldIndex) {
+                const newOrder = [
+                    ...displayColumnKeyNames
+                ];
+                const moved = newOrder.splice(oldIndex, 1);
+                newOrder.splice(newIndex, 0, moved[0]);
+                setDisplayColumnKeyNames(newOrder);
+                if (onReorderEnd) onReorderEnd(newOrder);
+            }
         }
-      }
-    }
-  }, [displayColumnKeyNames, setDisplayColumnKeyNames, onReorderEnd]);
-  const handleDragEnd = event => {
-    if (headCells) {
-      const {
-        active,
-        over
-      } = event;
-      if (active && over && active.id !== over.id && onReorderEndHandler) {
-        const oldIndex = headCells.findIndex(item => item.id === active.id);
-        const newIndex = headCells.findIndex(item => item.id === over.id);
-        onReorderEndHandler({
-          oldIndex,
-          newIndex
-        });
-      }
-    }
-  };
-  const pageNumber = useMemo(() => currentPage ?? internalPage, [currentPage, internalPage]);
-  const sortedPageRows = useMemo(() => {
-    if (rows) {
-      const itemsToSkip = onPageChange ? 0 : maxItemsPerPage * (pageNumber - 1);
-      return (isPresorted ? rows : stableSort(rows, getComparator(order, orderBy, sortComparator))).slice(itemsToSkip, itemsToSkip + maxItemsPerPage);
-    } else {
-      return [];
-    }
-  }, [rows, onPageChange, maxItemsPerPage, pageNumber, isPresorted, order, orderBy, sortComparator]);
-
-  /**
-   *  Calculate pagination numbers to show.
-   *  If the table is empty (rows.length === 0) override calculation and show '0 of 0'
-   *  Pagination total is overridden by totalRowCount if provided.
-   */
-  const paginationTotal = useMemo(() => totalRowCount || rows.length, [rows.length, totalRowCount]);
-  const pagesCount = useMemo(() => Math.ceil(paginationTotal / maxItemsPerPage), [maxItemsPerPage, paginationTotal]);
-  const minRowNumber = useMemo(() => {
-    if (!sortedPageRows.length) {
-      return 0;
-    }
-    return (pageNumber - 1) * maxItemsPerPage + 1;
-  }, [pageNumber, maxItemsPerPage, sortedPageRows.length]);
-  const maxRowNumber = useMemo(() => {
-    if (!sortedPageRows.length) {
-      return 0;
-    }
-    return Math.min(pageNumber * maxItemsPerPage, paginationTotal);
-  }, [pageNumber, maxItemsPerPage, paginationTotal, sortedPageRows.length]);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [showTopBar && /*#__PURE__*/jsx(EnhancedTableToolbarV2, {
-      selectedRowsCount: selectedRows?.length || 0,
-      pagesCount: pagesCount,
-      renderNumSelectedText: renderNumSelectedText,
-      rowsCount: rows.length,
-      topBarButtons: topBarButtons,
-      topBarSelectionConfig: enhancedTopBarSelectionConfig ? {
-        ...enhancedTopBarSelectionConfig,
-        handleSelectAll: () => setSelectedRows && setSelectedRows(rows),
-        handleSelectNone: () => setSelectedRows && setSelectedRows([])
-      } : undefined
-    }), /*#__PURE__*/jsx(TableContainer, {
-      id: id,
-      children: /*#__PURE__*/jsx(DndContext, {
-        sensors: sensors,
-        onDragEnd: handleDragEnd,
-        children: /*#__PURE__*/jsxs(Table, {
-          stickyHeader: stickyHeader,
-          "aria-labelledby": "tableTitle",
-          size: "medium",
-          "aria-label": "enhanced table",
-          sx: {
-            borderCollapse: 'initial'
-          },
-          children: [!hideHeader && /*#__PURE__*/jsx(EnhancedTableHead, {
-            order: order,
-            orderBy: orderBy,
-            onRequestSort: handleRequestSort,
-            columns: displayColumnDetails ?? [],
-            onReorderEnd: onReorderEndHandler,
-            numSelected: showCheckbox ? selectedRows?.length : undefined,
-            onSelectAllClick: showCheckbox ? handleSelectAllClick : undefined,
-            rowCount: showCheckbox ? sortedPageRows?.length : undefined,
-            density: density
-          }), /*#__PURE__*/jsxs(TableBody, {
-            children: [sortedPageRows.length < 1 && emptyTableMessage && /*#__PURE__*/jsx(TableRow, {
-              children: /*#__PURE__*/jsx(TableCell, {
-                colSpan: columns.length + 1,
-                align: "center",
-                children: /*#__PURE__*/jsx("p", {
-                  children: emptyTableMessage
+    }, [
+        displayColumnKeyNames,
+        setDisplayColumnKeyNames,
+        onReorderEnd
+    ]);
+    const handleDragEnd = (event)=>{
+        if (headCells) {
+            const { active, over } = event;
+            if (active && over && active.id !== over.id && onReorderEndHandler) {
+                const oldIndex = headCells.findIndex((item)=>item.id === active.id);
+                const newIndex = headCells.findIndex((item)=>item.id === over.id);
+                onReorderEndHandler({
+                    oldIndex,
+                    newIndex
+                });
+            }
+        }
+    };
+    const pageNumber = useMemo(()=>currentPage ?? internalPage, [
+        currentPage,
+        internalPage
+    ]);
+    const sortedPageRows = useMemo(()=>{
+        if (!rows) return [];
+        else {
+            const itemsToSkip = onPageChange ? 0 : maxItemsPerPage * (pageNumber - 1);
+            return (isPresorted ? rows : stableSort(rows, getComparator(order, orderBy, sortComparator))).slice(itemsToSkip, itemsToSkip + maxItemsPerPage);
+        }
+    }, [
+        rows,
+        onPageChange,
+        maxItemsPerPage,
+        pageNumber,
+        isPresorted,
+        order,
+        orderBy,
+        sortComparator
+    ]);
+    const paginationTotal = useMemo(()=>totalRowCount || rows.length, [
+        rows.length,
+        totalRowCount
+    ]);
+    const pagesCount = useMemo(()=>Math.ceil(paginationTotal / maxItemsPerPage), [
+        maxItemsPerPage,
+        paginationTotal
+    ]);
+    const minRowNumber = useMemo(()=>{
+        if (!sortedPageRows.length) return 0;
+        return (pageNumber - 1) * maxItemsPerPage + 1;
+    }, [
+        pageNumber,
+        maxItemsPerPage,
+        sortedPageRows.length
+    ]);
+    const maxRowNumber = useMemo(()=>{
+        if (!sortedPageRows.length) return 0;
+        return Math.min(pageNumber * maxItemsPerPage, paginationTotal);
+    }, [
+        pageNumber,
+        maxItemsPerPage,
+        paginationTotal,
+        sortedPageRows.length
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            showTopBar && /*#__PURE__*/ jsx(EnhancedTableToolbarV2, {
+                selectedRowsCount: selectedRows?.length || 0,
+                pagesCount: pagesCount,
+                renderNumSelectedText: renderNumSelectedText,
+                rowsCount: rows.length,
+                topBarButtons: topBarButtons,
+                topBarSelectionConfig: enhancedTopBarSelectionConfig ? {
+                    ...enhancedTopBarSelectionConfig,
+                    handleSelectAll: ()=>setSelectedRows && setSelectedRows(rows),
+                    handleSelectNone: ()=>setSelectedRows && setSelectedRows([])
+                } : void 0
+            }),
+            /*#__PURE__*/ jsx(TableContainer, {
+                id: id,
+                children: /*#__PURE__*/ jsx(DndContext, {
+                    sensors: sensors,
+                    onDragEnd: handleDragEnd,
+                    children: /*#__PURE__*/ jsxs(Table, {
+                        stickyHeader: stickyHeader,
+                        "aria-labelledby": "tableTitle",
+                        size: "medium",
+                        "aria-label": "enhanced table",
+                        sx: {
+                            borderCollapse: 'initial'
+                        },
+                        children: [
+                            !hideHeader && /*#__PURE__*/ jsx(TableHeader, {
+                                order: order,
+                                orderBy: orderBy,
+                                onRequestSort: handleRequestSort,
+                                columns: displayColumnDetails ?? [],
+                                onReorderEnd: onReorderEndHandler,
+                                numSelected: showCheckbox ? selectedRows?.length : void 0,
+                                onSelectAllClick: showCheckbox ? handleSelectAllClick : void 0,
+                                rowCount: showCheckbox ? sortedPageRows?.length : void 0,
+                                density: density
+                            }),
+                            /*#__PURE__*/ jsxs(TableBody, {
+                                children: [
+                                    sortedPageRows.length < 1 && emptyTableMessage && /*#__PURE__*/ jsx(TableRow, {
+                                        children: /*#__PURE__*/ jsx(TableCell, {
+                                            colSpan: columns.length + 1,
+                                            align: "center",
+                                            children: /*#__PURE__*/ jsx("p", {
+                                                children: emptyTableMessage
+                                            })
+                                        })
+                                    }),
+                                    sortedPageRows && sortedPageRows.map((row, index)=>{
+                                        const onClick = onSelect && !controlledOnSelect ? ()=>onSelect(row) : void 0;
+                                        const isItemSelected = isSelected(row);
+                                        return /*#__PURE__*/ jsxs(react.Fragment, {
+                                            children: [
+                                                /*#__PURE__*/ jsxs(TableRow, {
+                                                    id: `row${index + 1}`,
+                                                    hover: true,
+                                                    onClick: (e)=>{
+                                                        e.stopPropagation();
+                                                        if (onClick && !hasEditColumn && (isClickable ? isClickable(row) : true)) onClick();
+                                                        if (!onClick && !hasEditColumn && (isClickable ? isClickable(row) : true)) handleClick(e, row);
+                                                    },
+                                                    selected: isItemSelected,
+                                                    "aria-checked": isItemSelected,
+                                                    sx: {
+                                                        ...isInactive && isInactive(row) ? {
+                                                            backgroundColor: theme.palette.neutral[50]
+                                                        } : {},
+                                                        height: getTableRowHeight(density),
+                                                        '&.MuiTableRow-root.Mui-selected': {
+                                                            backgroundColor: theme.palette.TwClrBgSelectedTertiary
+                                                        },
+                                                        '&:nth-of-type(odd)': {
+                                                            backgroundColor: theme.palette.TwClrBgSecondary
+                                                        },
+                                                        '&:hover': {
+                                                            backgroundColor: theme.palette.TwClrBgSecondaryHover
+                                                        }
+                                                    },
+                                                    children: [
+                                                        showCheckbox && /*#__PURE__*/ jsx(TableCell, {
+                                                            padding: "checkbox",
+                                                            sx: {
+                                                                '&.MuiTableCell-root': {
+                                                                    borderBottom: `1px solid ${theme.palette.TwClrBgSecondary}`
+                                                                }
+                                                            },
+                                                            children: /*#__PURE__*/ jsx(Checkbox, {
+                                                                disableRipple: true,
+                                                                sx: CheckboxStyle(theme),
+                                                                color: "primary",
+                                                                checked: isItemSelected,
+                                                                onClick: (e)=>isClickable && isClickable(row) ? null : handleClick(e, row)
+                                                            })
+                                                        }),
+                                                        displayColumnDetails && displayColumnDetails.map((c)=>/*#__PURE__*/ jsx(Renderer, {
+                                                                index: index + 1,
+                                                                row: row,
+                                                                column: c,
+                                                                value: row[c.key],
+                                                                onRowClick: onSelect && controlledOnSelect ? (newValue)=>onSelect(row, c.key, newValue) : onClick,
+                                                                reloadData: reloadData,
+                                                                booleanFalseText: booleanFalseText,
+                                                                booleanTrueText: booleanTrueText,
+                                                                editText: editText,
+                                                                sx: {
+                                                                    paddingY: getTableCellPaddingY(density)
+                                                                }
+                                                            }, c.key))
+                                                    ]
+                                                }),
+                                                DetailsRenderer && /*#__PURE__*/ jsx(DetailsRenderer, {
+                                                    index: index,
+                                                    row: row
+                                                })
+                                            ]
+                                        }, index);
+                                    })
+                                ]
+                            })
+                        ]
+                    })
                 })
-              })
-            }), sortedPageRows && sortedPageRows.map((row, index) => {
-              const onClick = onSelect && !controlledOnSelect ? () => onSelect(row) : undefined;
-              const isItemSelected = isSelected(row);
-              return /*#__PURE__*/jsxs(React.Fragment, {
-                children: [/*#__PURE__*/jsxs(TableRow, {
-                  id: `row${index + 1}`,
-                  hover: true,
-                  onClick: e => {
-                    e.stopPropagation();
-                    if (onClick && !hasEditColumn && (isClickable ? isClickable(row) : true)) {
-                      onClick();
-                    }
-                    if (!onClick && !hasEditColumn && (isClickable ? isClickable(row) : true)) {
-                      handleClick(e, row);
-                    }
-                  },
-                  selected: isItemSelected,
-                  "aria-checked": isItemSelected,
-                  sx: {
-                    ...(isInactive && isInactive(row) ? {
-                      backgroundColor: theme.palette.neutral[50]
-                    } : {}),
-                    height: getTableRowHeight(density),
-                    '&.MuiTableRow-root.Mui-selected': {
-                      backgroundColor: theme.palette.TwClrBgSelectedTertiary
-                    },
-                    '&:nth-of-type(odd)': {
-                      backgroundColor: theme.palette.TwClrBgSecondary
-                    },
-                    '&:hover': {
-                      backgroundColor: theme.palette.TwClrBgSecondaryHover
-                    }
-                  },
-                  children: [showCheckbox && /*#__PURE__*/jsx(TableCell, {
-                    padding: "checkbox",
-                    sx: {
-                      '&.MuiTableCell-root': {
-                        borderBottom: `1px solid ${theme.palette.TwClrBgSecondary}`
-                      }
-                    },
-                    children: /*#__PURE__*/jsx(Checkbox, {
-                      disableRipple: true,
-                      sx: CheckboxStyle(theme),
-                      color: "primary",
-                      checked: isItemSelected,
-                      onClick: e => !isClickable || !isClickable(row) ? handleClick(e, row) : null
+            }),
+            tableComments && /*#__PURE__*/ jsx(Typography, {
+                fontWeight: 400,
+                fontSize: "14px",
+                color: theme.palette.TwClrTxtSecondary,
+                marginTop: 2,
+                children: tableComments
+            }),
+            renderPaginationText && /*#__PURE__*/ jsxs(Box, {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-end",
+                paddingTop: "24px",
+                children: [
+                    /*#__PURE__*/ jsx(Typography, {
+                        paddingRight: "24px",
+                        fontSize: "14px",
+                        children: renderPaginationText(minRowNumber, maxRowNumber, paginationTotal)
+                    }),
+                    /*#__PURE__*/ jsx(Pagination, {
+                        count: pagesCount,
+                        page: pageNumber,
+                        shape: "rounded",
+                        onChange: handleChangePage,
+                        siblingCount: isMobile ? 0 : 1,
+                        size: 'small'
                     })
-                  }), displayColumnDetails && displayColumnDetails.map(c => /*#__PURE__*/jsx(Renderer, {
-                    index: index + 1,
-                    row: row,
-                    column: c,
-                    value: row[c.key],
-                    onRowClick: onSelect && controlledOnSelect ? newValue => onSelect(row, c.key, newValue) : onClick,
-                    reloadData: reloadData,
-                    booleanFalseText: booleanFalseText,
-                    booleanTrueText: booleanTrueText,
-                    editText: editText,
-                    sx: {
-                      paddingY: getTableCellPaddingY(density)
-                    }
-                  }, c.key))]
-                }), DetailsRenderer && /*#__PURE__*/jsx(DetailsRenderer, {
-                  index: index,
-                  row: row
-                })]
-              }, index);
-            })]
-          })]
-        })
-      })
-    }), tableComments && /*#__PURE__*/jsx(Typography, {
-      fontWeight: 400,
-      fontSize: "14px",
-      color: theme.palette.TwClrTxtSecondary,
-      marginTop: 2,
-      children: tableComments
-    }), renderPaginationText && /*#__PURE__*/jsxs(Box, {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      paddingTop: "24px",
-      children: [/*#__PURE__*/jsx(Typography, {
-        paddingRight: "24px",
-        fontSize: "14px",
-        children: renderPaginationText(minRowNumber, maxRowNumber, paginationTotal)
-      }), /*#__PURE__*/jsx(Pagination, {
-        count: pagesCount,
-        page: pageNumber,
-        shape: "rounded",
-        onChange: handleChangePage,
-        siblingCount: isMobile ? 0 : 1,
-        size: 'small'
-      })]
-    })]
-  });
+                ]
+            })
+        ]
+    });
 }
 function tableSort(ignore, array, comparator) {
-  if (ignore) {
-    return array;
-  }
-  return stableSort(array, comparator);
+    if (ignore) return array;
+    return stableSort(array, comparator);
 }
-
-export { EnhancedTable as default, isTopBarButton, tableSort };
+export default EnhancedTable;
+export { isTopBarButton, tableSort };