mui-datatables-updated 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,183 @@
+# MUI Datatable library inspired by the gregnb/mui-datatables project, featuring an up-to-date implementation with Typescript Support
+
+## Installation
+
+If not already installed, install the Material-UI library:
+
+```bash
+npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
+```
+
+Then install the mui-datatables-updated package:
+
+```bash
+npm install mui-datatables-updated
+```
+
+## Usage
+
+```jsx
+import React from 'react';
+import MUIDataTable from 'mui-datatables-updated';
+
+const sampleData = [
+  {
+    "id": 1,
+    "name": "Cupcake",
+    "carbs": 67,
+  },
+  {
+    "id": 2,
+    "name": "Donut",
+    "carbs": 51,
+  }
+];
+
+export default function App() {
+  return (
+    <>
+      <MUITable title='Sample title' data={sampleData} />
+    </>
+  )
+}
+```
+
+## Options
+
+| Name | Type | Description |
+| --- | --- | --- |
+| title | string | Title of the table |
+| data | array | Data to be displayed in the table |
+| deactivateSelect | boolean | Disable row selection |
+| defaultOrderBy | string -> must be a key in the data object | Default order by key to sort the table data on first load |
+| defaultOrder | 'asc' or 'desc' | Default order to be used when sorting and displaying on first load |
+| excludedColumns | array | Array of **keys** in data objects to be excluded from the table |
+| columns | array | Array of objects to define the columns of the table |
+| options | object | Object to define the options of the table |
+
+### Example
+
+```jsx
+import MUITable from 'mui-datatables-updated'
+
+const sampleColumns = [
+  {
+    name: 'name',
+    label: 'Name of dessert',
+  },
+  {
+    name: 'healthy',
+    label: 'Is Healthy?',
+    options: {
+      sort: false,
+      customBodyRender: (value: boolean) => value ? ':)' : ':('
+    }
+  },
+  {
+    name: 'carbs',
+    label: 'Carbs (g)',
+    options: {
+      sort: false
+    }
+  },
+  {
+    name: 'id',
+    label: 'ID',
+  }
+]
+
+function App() {
+  return (
+    <>
+      <h1>MUI Table test</h1>
+      <MUITable
+        title='Sample Test'
+        data={sampleData}
+        defaultOrder='desc'
+        defaultOrderBy='name'
+        excludedColumns={['id']}
+      />
+      <MUITable
+        title='Sample Test'
+        data={sampleData}
+        defaultOrder='desc'
+        defaultOrderBy='name'
+        columns={sampleColumns}
+        deactivateSelect
+        options={{
+          translations: {
+            filterTooltip: 'Filtrar',
+            filtersTitle: 'Filtros',
+            resetButtonText: 'Reiniciar',
+            searchPlaceholder: 'Buscar...',
+            rowsPerPageText: 'Filas por página',
+            selectedTextRenderer: (numSelected) => `${numSelected} seleccionado/s`,
+            labelDisplayedRows: ({ from, to, count }) => `${from}-${to} de ${count}`,
+          }
+        }}
+      />
+    </>
+  )
+}
+```
+
+## Custom Columns
+
+On each column object, you have the ability to customize columns to show the filtering options in the filter dropdown and to disable sorting when clicking on the column header. Values are set to true by default.
+
+| Name | Type | Description |
+| --- | --- | --- |
+| name | string | Key in the data object |
+| label | string | Label to be displayed in the column header |
+| options | object | Object to define the options of the column |
+
+### Options Object
+
+| Name | Type | Description |
+| --- | --- | --- |
+| customBodyRender | function | Function to render custom content in the column |
+| filter | boolean | Show filter dropdown in the column |
+| sort | boolean | Enable sorting when clicking on the column header |
+
+### Custom columns example
+
+```jsx
+const columns = [
+ {
+  name: "active",
+  label: "Is Active",
+  options: {
+    customBodyRender: (value: boolean) => value ? 'Yes' : 'No',
+    filter: true,
+    sort: false
+  }
+ },
+ ...
+];
+```
+
+## Localization
+
+As well as gregnb original package, I decided that the cost of bringing in another library to perform localizations would be too expensive. Instead the ability to override most text labels (which aren't many) is offered through the translations property. The available customizations are:
+
+```jsx
+<MUITable
+  title='Sample Test'
+  data={sampleData}
+  options={{
+    translations: {
+      filterTooltip: 'Filtrar',
+      filtersTitle: 'Filtros',
+      resetButtonText: 'Reiniciar',
+      searchPlaceholder: 'Buscar...',
+      rowsPerPageText: 'Filas por página',
+      selectedTextRenderer: (numSelected) => `${numSelected} seleccionado/s`,
+      labelDisplayedRows: ({ from, to, count }) => `${from}-${to} de ${count}`,
+    }
+  }}
+/>
+```
+
+## Contributing
+
+Pull requests are welcome. I won't be able to implement new features in the short term, so feel free to contribute to the project by adding new features, fixing bugs, creating tests, and improving the documentation.

package/dist/components/MUITable.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { CustomSelectedToolbarProps } from './Toolbar';
+import { Order } from './utils';
+import { LabelDisplayedRowsArgs } from '@mui/material/TablePagination';
+export interface Column {
+    name: string;
+    label?: string;
+    options?: {
+        customBodyRender?: (value: any) => React.ReactNode;
+        filter?: boolean;
+        sort?: boolean;
+    };
+}
+export interface Options {
+    translations?: {
+        filterTooltip?: string;
+        searchTooltip?: string;
+        downloadTooltip?: string;
+        printTooltip?: string;
+        filtersTitle?: string;
+        resetButtonText?: string;
+        rowsPerPageText?: string;
+        searchPlaceholder?: string;
+        selectedTextRenderer?: (selected: number) => string;
+        labelDisplayedRows?: ({ from, to, count }: LabelDisplayedRowsArgs) => string;
+    };
+}
+export interface EnhancedTableProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    title: string;
+    data: T[];
+    deactivateSelect?: boolean;
+    defaultOrderBy?: string;
+    defaultOrder?: Order;
+    excludedColumns?: (keyof T)[];
+    columns?: Column[];
+    options?: Options;
+    CustomToolbar?: React.FC;
+    CustomSelectedToolbar?: React.FC<CustomSelectedToolbarProps<T>>;
+}
+export declare const MUITable: <T extends object>({ title, data, deactivateSelect, defaultOrderBy, defaultOrder, excludedColumns, columns: passedColumns, CustomToolbar, CustomSelectedToolbar, options, ...rest }: EnhancedTableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TableHead.d.ts

@@ -0,0 +1,14 @@
+import { Column } from './MUITable';
+import { Order } from './utils';
+interface EnhancedTableProps<T> {
+    numSelected: number;
+    onRequestSort: (event: React.MouseEvent<unknown>, property: keyof T) => void;
+    onSelectAllClick?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    order: Order;
+    orderBy: keyof T;
+    rowCount: number;
+    columns: Column[];
+    deactivateSelectAll?: boolean;
+}
+export declare function EnhancedTableHead<T>({ onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort, columns, deactivateSelectAll, }: EnhancedTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Toolbar.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { Column, Options } from "./MUITable";
+import { UseReactToPrintFn } from "react-to-print";
+export interface CustomSelectedToolbarProps<T> {
+    selected?: readonly T[];
+    data?: T[];
+}
+interface EnhancedTableToolbarProps<T> {
+    title: string;
+    numSelected: number;
+    selected: readonly T[];
+    onFilterChange: (filterFunc: (row: T) => boolean) => void;
+    onSearch: (query: string) => void;
+    printFn: UseReactToPrintFn;
+    columns: Column[];
+    CustomToolbar?: React.FC;
+    CustomSelectedToolbar?: React.FC<CustomSelectedToolbarProps<T>>;
+    data?: T[];
+    options?: Options;
+}
+export declare function EnhancedTableToolbar<T>(props: EnhancedTableToolbarProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/table.d.ts

@@ -0,0 +1 @@
+export declare const Table: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/test-data.d.ts

@@ -0,0 +1,11 @@
+import { HeadCell } from "./TableHead";
+export interface Data {
+    id: number;
+    calories: number;
+    carbs: number;
+    fat: number;
+    name: string;
+    protein: number;
+}
+export declare const rows: Data[];
+export declare const headCells: HeadCell<typeof rows[0]>[];

package/dist/components/utils.d.ts

@@ -0,0 +1,2 @@
+export type Order = 'asc' | 'desc';
+export declare function getComparator<T, Key extends keyof T>(order: Order, orderBy: Key): (a: T, b: T) => number;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { MUITable as default } from './components/MUITable';
+export type { Column } from './components/MUITable';
+export type { CustomSelectedToolbarProps } from './components/Toolbar';

package/dist/index.esm.js

@@ -0,0 +1,361 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Checkbox from '@mui/material/Checkbox';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useReactToPrint } from 'react-to-print';
+import Box from '@mui/material/Box';
+import TableHead from '@mui/material/TableHead';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import { visuallyHidden } from '@mui/utils';
+import { Close, CloudDownload, Print } from '@mui/icons-material';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import SearchIcon from '@mui/icons-material/Search';
+import { Toolbar, Typography, Stack, TextField, IconButton, Tooltip, Popover, Button, Box as Box$1, Slider, Checkbox as Checkbox$1 } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function EnhancedTableHead({ onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort, columns, deactivateSelectAll, }) {
+    const createSortHandler = (property) => (event) => {
+        onRequestSort(event, property);
+    };
+    return (jsx(TableHead, { children: jsxs(TableRow, { children: [!deactivateSelectAll &&
+                    jsx(TableCell, { padding: "checkbox", children: jsx(Checkbox, { color: "primary", indeterminate: numSelected > 0 && numSelected < rowCount, checked: rowCount > 0 && numSelected === rowCount, onChange: onSelectAllClick, inputProps: {
+                                'aria-label': 'select all items',
+                            } }) }), columns.map((column) => {
+                    var _a;
+                    return (jsx(TableCell, { padding: 'normal', sortDirection: orderBy === column.name ? order : false, children: ((_a = column.options) === null || _a === undefined ? undefined : _a.sort) !== false ? (jsxs(TableSortLabel, { active: orderBy === column.name, direction: orderBy === column.name ? order : 'asc', onClick: createSortHandler(column.name), sx: { fontWeight: 'bold' }, children: [column.label, orderBy === column.name ? (jsx(Box, { component: "span", sx: visuallyHidden, children: order === 'desc' ? 'sorted descending' : 'sorted ascending' })) : null] })) : (jsx("span", { style: { fontWeight: 700 }, children: column.label })) }, String(column.name)));
+                })] }) }));
+}
+
+function EnhancedTableToolbar(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { title, numSelected, selected, onFilterChange, onSearch, printFn, columns, CustomToolbar, CustomSelectedToolbar, data, options } = props;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [filters, setFilters] = useState([]);
+    const [filterConfig, setFilterConfig] = useState([]);
+    // rest value to force re-render of filters
+    const [resetCounter, setResetCounter] = useState(0);
+    const [openSearch, setOpenSearch] = useState(false);
+    function downloadCSV(data, filename = "data.csv") {
+        // Base case
+        if (data.length === 0) {
+            console.warn("No data to export.");
+            return;
+        }
+        // Create CSV content
+        const headers = Object.keys(data[0]);
+        const csvRows = data.map(obj => headers.map(field => { var _a; return JSON.stringify((_a = obj[field]) !== null && _a !== undefined ? _a : ""); }).join(","));
+        const csvContent = [headers.join(","), ...csvRows].join("\n");
+        // Create Blob and download
+        const blob = new Blob([csvContent], { type: "text/csv" });
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(blob);
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(link.href);
+    }
+    useEffect(() => {
+        if (data && data.length > 0) {
+            const inferredConfig = columns.map((column) => {
+                const key = column.name;
+                const values = data.map((row) => row[key]);
+                const isNumber = values.every((val) => typeof val === "number");
+                const inferredType = isNumber ? "number" : typeof values[0] === "boolean" ? "boolean" : "string";
+                return {
+                    key,
+                    type: inferredType,
+                    min: isNumber ? Math.min(...values) : undefined,
+                    max: isNumber ? Math.max(...values) : undefined,
+                };
+            });
+            setFilterConfig(inferredConfig);
+        }
+    }, [data, columns]);
+    useEffect(() => {
+        const newFilterFunc = (row) => {
+            if (filters.length === 0)
+                return true;
+            return filters.every((filter) => {
+                const rowValue = row[filter.key];
+                if (filter.type === "number") {
+                    const [min, max] = filter.value;
+                    return rowValue >= min && rowValue <= max;
+                }
+                if (filter.type === "string") {
+                    return rowValue.toString().toLowerCase().includes(filter.value.toLowerCase());
+                }
+                if (filter.type === "boolean") {
+                    return rowValue === filter.value;
+                }
+                return true;
+            });
+        };
+        onFilterChange(newFilterFunc);
+    }, [filters, onFilterChange]);
+    const handleOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleSearchChange = () => {
+        setOpenSearch((prev) => !prev);
+    };
+    const open = Boolean(anchorEl);
+    const getFilter = (key) => filters.find((filter) => filter.key === key);
+    const updateFilter = (updatedFilter) => {
+        setFilters((prevFilters) => {
+            const existingIndex = prevFilters.findIndex((filter) => filter.key === updatedFilter.key);
+            if (existingIndex !== -1) {
+                // Update existing filter
+                const newFilters = [...prevFilters];
+                newFilters[existingIndex] = updatedFilter;
+                return newFilters;
+            }
+            // Add new filter
+            return [...prevFilters, updatedFilter];
+        });
+    };
+    const removeFilter = (key) => {
+        setFilters((prevFilters) => prevFilters.filter((filter) => filter.key !== key));
+    };
+    const handleFilterChange = (key, value) => {
+        if (value === undefined || value === null || value === "") {
+            removeFilter(key);
+        }
+        else {
+            const config = filterConfig.find((config) => config.key === key);
+            if (!config)
+                return;
+            updateFilter({
+                key,
+                type: config.type,
+                value,
+            });
+        }
+    };
+    const resetFilters = () => {
+        setFilters([]);
+        setResetCounter((prev) => prev + 1);
+    };
+    return (jsxs(Toolbar, { sx: [
+            { px: { sm: 2 }, borderBottom: 1, borderColor: "divider" },
+            numSelected > 0 && { bgcolor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity) },
+        ], children: [numSelected > 0 ? (jsxs(Fragment, { children: [jsx(Typography, { sx: { flex: "1 1 100%" }, color: "inherit", variant: "subtitle1", component: "div", children: ((_a = options === null || options === undefined ? undefined : options.translations) === null || _a === undefined ? undefined : _a.selectedTextRenderer)
+                            ? options.translations.selectedTextRenderer(numSelected)
+                            : `${numSelected} selected` }), CustomSelectedToolbar && (jsx(CustomSelectedToolbar, { data: data, selected: selected }))] })) : (jsxs(Stack, { direction: "row", justifyContent: "space-between", width: "100%", alignItems: "center", children: [openSearch ? (jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(SearchIcon, {}), jsx(TextField, { placeholder: ((_b = options === null || options === undefined ? undefined : options.translations) === null || _b === undefined ? undefined : _b.searchPlaceholder) || "Search...", onChange: (e) => onSearch(e.target.value), variant: "standard", autoFocus: true, fullWidth: true, sx: { marginLeft: 1 } }), jsx(IconButton, { onClick: handleSearchChange, sx: { '&:hover': { color: 'error.main' } }, children: jsx(Close, {}) })] })) : (jsx(Typography, { sx: { flex: "1 1 100%", alignContent: "center", paddingLeft: 1 }, variant: "h6", id: "tableTitle", component: "div", children: title })), jsxs(Stack, { direction: "row", spacing: 0.5, children: [jsx(Tooltip, { title: ((_c = options === null || options === undefined ? undefined : options.translations) === null || _c === undefined ? undefined : _c.searchTooltip) || "Search", children: jsx(IconButton, { onClick: handleSearchChange, children: jsx(SearchIcon, {}) }) }), jsx(Tooltip, { title: ((_d = options === null || options === undefined ? undefined : options.translations) === null || _d === undefined ? undefined : _d.downloadTooltip) || "Download CSV", children: jsx(IconButton, { onClick: () => downloadCSV(data, "data.csv"), children: jsx(CloudDownload, {}) }) }), jsx(Tooltip, { title: ((_e = options === null || options === undefined ? undefined : options.translations) === null || _e === undefined ? undefined : _e.printTooltip) || "Print", children: jsx(IconButton, { onClick: () => printFn(), children: jsx(Print, {}) }) }), jsx(Tooltip, { title: ((_f = options === null || options === undefined ? undefined : options.translations) === null || _f === undefined ? undefined : _f.filterTooltip) || "Filter list", children: jsx(IconButton, { onClick: handleOpen, children: jsx(FilterListIcon, {}) }) }), CustomToolbar && jsx(CustomToolbar, {})] })] })), jsxs(Popover, { open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
+                    vertical: "bottom",
+                    horizontal: "right",
+                }, transformOrigin: {
+                    vertical: "top",
+                    horizontal: "right",
+                }, slotProps: {
+                    paper: { sx: { width: "20%", padding: 2, boxShadow: 2 } }
+                }, children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(Typography, { variant: "h6", sx: { marginBottom: 2 }, children: ((_g = options === null || options === undefined ? undefined : options.translations) === null || _g === undefined ? undefined : _g.filtersTitle) || "Filters" }), jsx(Button, { variant: "contained", size: "small", sx: { height: "fit-content" }, onClick: resetFilters, children: ((_h = options === null || options === undefined ? undefined : options.translations) === null || _h === undefined ? undefined : _h.resetButtonText) || "Reset" })] }), jsx(Stack, { children: filterConfig.map(({ key, type, min, max }) => {
+                            var _a, _b, _c, _d, _e, _f;
+                            const currentFilter = getFilter(key);
+                            return (jsxs(Box$1, { children: [jsx(Typography, { variant: "subtitle1", children: (_a = columns.find((cell) => cell.name === key)) === null || _a === undefined ? undefined : _a.label }), type === "number" && min !== undefined && max !== undefined && (jsx(Slider, { value: [
+                                            (_c = (_b = currentFilter === null || currentFilter === undefined ? undefined : currentFilter.value) === null || _b === undefined ? undefined : _b[0]) !== null && _c !== undefined ? _c : min,
+                                            (_e = (_d = currentFilter === null || currentFilter === undefined ? undefined : currentFilter.value) === null || _d === undefined ? undefined : _d[1]) !== null && _e !== undefined ? _e : max,
+                                        ], onChange: (_, newValue) => {
+                                            const [newMin, newMax] = newValue;
+                                            handleFilterChange(key, [newMin, newMax]);
+                                        }, valueLabelDisplay: "auto", min: min || 0, max: max || 100, step: 1 })), type === "string" && (jsx(TextField, { placeholder: ((_f = options === null || options === undefined ? undefined : options.translations) === null || _f === undefined ? undefined : _f.searchPlaceholder) || "Search...", size: "small", value: (currentFilter === null || currentFilter === undefined ? undefined : currentFilter.value) || "", onChange: (e) => handleFilterChange(key, e.target.value), sx: {
+                                            marginBottom: 1,
+                                            paddingY: 0.5,
+                                            width: "100%",
+                                        } })), type === "boolean" && (jsxs(Box$1, { display: "flex", alignItems: "center", children: [jsx(Checkbox$1, { checked: (currentFilter === null || currentFilter === undefined ? undefined : currentFilter.value) === true, onChange: (e) => handleFilterChange(key, e.target.checked) }), currentFilter && (jsx(Close, { color: "error", sx: { cursor: "pointer", fontSize: 15 }, onClick: () => handleFilterChange(key, undefined) }))] }))] }, key));
+                        }) }, resetCounter)] })] }));
+}
+
+function getComparator(order, orderBy) {
+    return order === 'desc'
+        ? (a, b) => descendingComparator(a[orderBy], b[orderBy])
+        : (a, b) => -descendingComparator(a[orderBy], b[orderBy]);
+}
+function descendingComparator(a, b) {
+    if (b < a)
+        return -1;
+    if (b > a)
+        return 1;
+    return 0;
+}
+
+const MUITable = (_a) => {
+    var _b, _c;
+    var { title, data, deactivateSelect, defaultOrderBy, defaultOrder, excludedColumns, columns: passedColumns, CustomToolbar, CustomSelectedToolbar, options } = _a, rest = __rest(_a, ["title", "data", "deactivateSelect", "defaultOrderBy", "defaultOrder", "excludedColumns", "columns", "CustomToolbar", "CustomSelectedToolbar", "options"]);
+    const tableRef = useRef(null);
+    const reactToPrintFn = useReactToPrint({ contentRef: tableRef });
+    const getDefaultOrderByKey = React.useCallback(() => {
+        if (data.length === 0)
+            return "id";
+        const keys = data.length > 0 ? Object.keys(data[0]) : [];
+        if (defaultOrderBy) {
+            if (keys.includes(defaultOrderBy)) {
+                return defaultOrderBy;
+            }
+            else {
+                console.warn(`{defaultOrderBy}: "${defaultOrderBy}" not found among the object keys. Falling back to automatic key detection.`);
+            }
+        }
+        return (keys.includes("id") ? "id" : keys[0]);
+    }, [data, defaultOrderBy]);
+    const [state, setState] = React.useState(() => {
+        const orderByKey = getDefaultOrderByKey();
+        return {
+            order: defaultOrder || 'asc',
+            orderBy: orderByKey,
+            selected: [],
+            page: 0,
+            rowsPerPage: 5,
+            searchQuery: "",
+            filterFunc: () => true,
+            currentData: data,
+            visibleRows: data,
+            emptyRows: 0,
+        };
+    });
+    const generateColumns = React.useCallback(() => {
+        if (data.length === 0)
+            return [];
+        return Object.keys(data[0])
+            .filter((key) => !(excludedColumns || []).includes(key))
+            .map((key) => ({
+            name: key,
+            label: key.charAt(0).toUpperCase() + key.slice(1),
+        }));
+    }, [data, excludedColumns]);
+    const columns = passedColumns || generateColumns();
+    const handleSearch = (query) => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { searchQuery: query.toLowerCase() })));
+    };
+    React.useEffect(() => {
+        const orderByKey = getDefaultOrderByKey();
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { orderBy: orderByKey })));
+    }, [data, getDefaultOrderByKey]);
+    // Data sorting, filtering, and pagination
+    React.useEffect(() => {
+        // Apply filters, search query, and sort data
+        const sortedData = [...data]
+            .filter(state.filterFunc)
+            .filter((row) => Object.values(row).some((value) => typeof value === "string" &&
+            value.toLowerCase().includes(state.searchQuery)))
+            .sort(getComparator(state.order, state.orderBy));
+        // Paginate the processed data
+        const startIndex = state.page * state.rowsPerPage;
+        const paginatedData = sortedData.slice(startIndex, startIndex + state.rowsPerPage);
+        const calculatedEmptyRows = Math.max(0, (1 + state.page) * state.rowsPerPage - sortedData.length);
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { visibleRows: paginatedData, emptyRows: calculatedEmptyRows, selected: prevState.selected.filter((selectedRow) => data.includes(selectedRow)) })));
+    }, [
+        state.filterFunc,
+        state.order,
+        state.orderBy,
+        state.page,
+        state.rowsPerPage,
+        state.searchQuery,
+        data,
+    ]);
+    // Remove selected rows deleted from the data to prevent stale selected state
+    React.useEffect(() => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { selected: prevState.selected.filter((selectedRow) => data.some((row) => row === selectedRow)) })));
+    }, [data]);
+    const handleRequestSort = (_event, property) => {
+        const isAsc = state.orderBy === property && state.order === 'asc';
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { order: isAsc ? 'desc' : 'asc', orderBy: property })));
+    };
+    const handleSelectAllClick = (event) => {
+        if (event.target.checked) {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { selected: [...state.currentData] })));
+        }
+        else {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { selected: [] })));
+        }
+    };
+    const handleClick = (_event, row) => {
+        const selectedIndex = state.selected.findIndex((selectedRow) => selectedRow === row);
+        let newSelected = [];
+        if (selectedIndex === -1) {
+            newSelected = [...state.selected, row];
+        }
+        else if (selectedIndex === 0) {
+            newSelected = state.selected.slice(1);
+        }
+        else if (selectedIndex === state.selected.length - 1) {
+            newSelected = state.selected.slice(0, -1);
+        }
+        else if (selectedIndex > 0) {
+            newSelected = [
+                ...state.selected.slice(0, selectedIndex),
+                ...state.selected.slice(selectedIndex + 1),
+            ];
+        }
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { selected: newSelected })));
+    };
+    const handleChangePage = (_event, newPage) => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { page: newPage })));
+    };
+    const handleChangeRowsPerPage = (event) => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { rowsPerPage: parseInt(event.target.value, 10), page: 0 })));
+    };
+    const handleFilterChange = useCallback((filterFunc) => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { filterFunc })));
+    }, []);
+    return (jsx("div", Object.assign({}, rest, { ref: tableRef, children: jsxs(Paper, { sx: { width: '100%', mb: 2 }, children: [jsx(EnhancedTableToolbar, { title: title, numSelected: state.selected.length, selected: state.selected, onFilterChange: handleFilterChange, onSearch: handleSearch, printFn: reactToPrintFn, columns: columns, CustomToolbar: CustomToolbar, CustomSelectedToolbar: CustomSelectedToolbar, data: data, options: options }), jsx(TableContainer, { children: jsxs(Table, { sx: { minWidth: 750 }, "aria-labelledby": "tableTitle", size: "small", children: [jsx(EnhancedTableHead, { columns: columns, numSelected: state.selected.length, order: state.order, orderBy: state.orderBy, onSelectAllClick: deactivateSelect ? undefined : handleSelectAllClick, onRequestSort: handleRequestSort, rowCount: state.currentData.length, deactivateSelectAll: deactivateSelect }), jsxs(TableBody, { children: [state.visibleRows.map((row, index) => {
+                                        const isItemSelected = state.selected.some((selectedRow) => selectedRow === row);
+                                        const labelId = `enhanced-table-checkbox-${index}`;
+                                        return (jsxs(TableRow, { hover: true, onClick: deactivateSelect ? undefined : (event) => handleClick(event, row), role: "checkbox", "aria-checked": isItemSelected, tabIndex: -1, selected: isItemSelected, sx: { cursor: 'pointer' }, children: [!deactivateSelect && (jsx(TableCell, { padding: "checkbox", children: jsx(Checkbox, { color: "primary", checked: isItemSelected, inputProps: {
+                                                            'aria-labelledby': labelId,
+                                                        } }) })), columns.map((column, cellIndex) => {
+                                                    var _a;
+                                                    return (jsx(TableCell, { component: cellIndex === 0 ? "th" : undefined, id: cellIndex === 0 ? labelId : undefined, scope: cellIndex === 0 ? "row" : undefined, padding: "normal", children: ((_a = column.options) === null || _a === undefined ? undefined : _a.customBodyRender)
+                                                            ? column.options.customBodyRender(row[column.name])
+                                                            : String(row[column.name]) }, String(column.name)));
+                                                })] }, index));
+                                    }), state.emptyRows > 0 && (jsx(TableRow, { style: {
+                                            height: 33 * state.emptyRows,
+                                        }, children: jsx(TableCell, { colSpan: columns.length + 1 }) }))] })] }) }), jsx(TablePagination, { rowsPerPageOptions: [5, 10, 25], component: "div", count: state.currentData.length, rowsPerPage: state.rowsPerPage, page: state.page, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage, labelRowsPerPage: ((_b = options === null || options === undefined ? undefined : options.translations) === null || _b === undefined ? undefined : _b.rowsPerPageText) || "Rows per page", labelDisplayedRows: ((_c = options === null || options === undefined ? undefined : options.translations) === null || _c === undefined ? undefined : _c.labelDisplayedRows) || (({ from, to, count }) => `${from}-${to} of ${count}`) })] }) })));
+};
+
+export { MUITable as default };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}