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

package/components/table/index.js

@@ -1,359 +1,378 @@
-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);
+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);
 };
-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);
+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;
         }
-    }, [
-        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
+        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
     }));
-    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) return [];
-        else {
-            const itemsToSkip = onPageChange ? 0 : maxItemsPerPage * (pageNumber - 1);
-            return (isPresorted ? rows : stableSort(rows, getComparator(order, orderBy, sortComparator))).slice(itemsToSkip, itemsToSkip + maxItemsPerPage);
+  }, [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);
         }
-    }, [
-        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);
-                                    })
-                                ]
-                            })
-                        ]
-                    })
+      }
+    }
+  }, [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
                 })
-            }),
-            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'
+              })
+            }), 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
                     })
-                ]
-            })
-        ]
-    });
+                  }), 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 default EnhancedTable;
-export { isTopBarButton, tableSort };
+
+export { EnhancedTable as default, isTopBarButton, tableSort };