mui-datatables-updated 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Diego Jacobo Martínez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "mui-datatables-updated",
+  "version": "1.0.0",
+  "description": "MUI Datatable library inspired by the gregnb/mui-datatables project, featuring an up-to-date implementation with Typescript Support.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rollup -c"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Djmr5/mui-datatables-updated.git"
+  },
+  "keywords": [
+    "MUI",
+    "mui-datatables",
+    "datatables",
+    "react-table",
+    "typescript",
+    "react",
+    "material-ui",
+    "data-table"
+  ],
+  "author": "Diego Jacobo Martínez Djmr5",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Djmr5/mui-datatables-updated/issues"
+  },
+  "homepage": "https://github.com/Djmr5/mui-datatables-updated#readme",
+  "peerDependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
+    "@mui/utils": "^6.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.4.0",
+    "@mui/material": "^6.4.0",
+    "@mui/utils": "^6.4.0",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "rollup": "^4.30.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.7.3"
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,23 @@
+import typescript from 'rollup-plugin-typescript2';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: 'dist/index.js',
+      format: 'cjs',
+      sourcemap: true,
+    },
+    {
+      file: 'dist/index.esm.js',
+      format: 'esm',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    peerDepsExternal(),
+    typescript(),
+  ],
+  external: ['react', 'react-dom', '@mui/material'],
+};

package/src/components/MUITable.tsx

@@ -0,0 +1,320 @@
+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, { useCallback } from 'react';
+import { EnhancedTableHead, HeadCell } from './TableHead';
+import { CustomSelectedToolbarProps, EnhancedTableToolbar } from './Toolbar';
+import { getComparator, Order } from './utils';
+
+export interface CustomCell<T> {
+  id: keyof T;
+  render: (row: T, key: keyof T) => React.ReactNode;
+}
+
+export interface EnhancedTableProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  title: string;
+  data: T[];
+  headCells?: HeadCell<T>[];
+  deactivateSelect?: boolean;
+  defaultOrderBy?: string;
+  defaultOrder?: Order;
+  excludedColumns?: (keyof T)[];
+  customCells?: CustomCell<T>[];
+  CustomToolbar?: React.FC;
+  CustomSelectedToolbar?: React.FC<CustomSelectedToolbarProps<T>>;
+}
+
+interface EnhancedTableState<T> {
+  order: Order;
+  orderBy: keyof T;
+  selected: readonly T[];
+  page: number;
+  rowsPerPage: number;
+  searchQuery: string;
+  filterFunc: (row: T) => boolean;
+  filteredData: T[];
+  currentData: T[];
+  visibleRows: T[];
+  emptyRows: number;
+}
+
+export const MUITable = <T extends object>({
+  title,
+  data,
+  headCells: passedHeadCells,
+  deactivateSelect,
+  defaultOrderBy,
+  defaultOrder,
+  excludedColumns,
+  customCells,
+  CustomToolbar,
+  CustomSelectedToolbar,
+  ...rest
+}: EnhancedTableProps<T>) => {
+
+  const getDefaultOrderByKey = React.useCallback((): keyof T => {
+    if (data.length === 0) return "id" as keyof T;
+
+    const keys = data.length > 0 ? (Object.keys(data[0]) as (keyof T)[]) : [];
+
+    if (defaultOrderBy) {
+      if (keys.includes(defaultOrderBy as keyof T)) {
+        return defaultOrderBy as keyof T;
+      } else {
+        console.warn(`{defaultOrderBy}: "${defaultOrderBy}" not found among the object keys. Falling back to automatic key detection.`);
+      }
+    }
+
+    return (keys.includes("id" as keyof T) ? "id" : keys[0]) as keyof T;
+  }, [data, defaultOrderBy]);
+
+  const [state, setState] = React.useState<EnhancedTableState<T>>(() => {
+    const orderByKey = getDefaultOrderByKey();
+    return {
+      order: defaultOrder || 'asc',
+      orderBy: orderByKey,
+      selected: [] as readonly T[],
+      page: 0,
+      rowsPerPage: 5,
+      searchQuery: "",
+      filterFunc: () => true,
+      filteredData: data,
+      currentData: data,
+      visibleRows: data,
+      emptyRows: 0,
+    };
+  });
+
+  const generateHeadCells = React.useCallback((): HeadCell<T>[] => {
+    if (data.length === 0) return [];
+    return Object.keys(data[0] as object)
+      .filter((key) => !(excludedColumns || []).includes(key as keyof T))
+      .map((key) => ({
+        id: key as keyof T,
+        label: key.charAt(0).toUpperCase() + key.slice(1),
+        numeric: typeof data[0][key as keyof T] === 'number',
+      }));
+  }, [data, excludedColumns]);
+
+  const headCells = passedHeadCells || generateHeadCells();
+
+  const handleSearch = (query: string) => {
+    setState((prevState) => ({ ...prevState, searchQuery: query.toLowerCase() }));
+  };
+
+  React.useEffect(() => {
+    const orderByKey = getDefaultOrderByKey();
+    setState((prevState) => ({ ...prevState, orderBy: orderByKey }));
+  }, [data, getDefaultOrderByKey]);
+
+  // Filter data based on applied filters
+  React.useEffect(() => {
+    const newFilteredData = data.filter(state.filterFunc);
+
+    setState((prevState) => ({
+      ...prevState,
+      filteredData: newFilteredData,
+      currentData: newFilteredData,
+    }));
+  }, [data, state.filterFunc]);
+
+  // Search data based on search query
+  React.useEffect(() => {
+    const searchResults = state.filteredData.filter((row) =>
+      Object.values(row as Record<string, unknown>).some((value) =>
+        typeof value === 'string' && value.toLowerCase().includes(state.searchQuery)
+      )
+    );
+    setState((prevState) => ({ ...prevState, currentData: searchResults }));
+  }, [state.filteredData, state.searchQuery]);
+
+  // Sort and paginate data to display TablePagination and visible rows respectively
+  React.useEffect(() => {
+    const sortedData = [...state.currentData].sort(
+      getComparator<T, keyof T>(state.order, state.orderBy)
+    );
+    const paginatedData = sortedData.slice(
+      state.page * state.rowsPerPage,
+      state.page * state.rowsPerPage + state.rowsPerPage
+    );
+    const calculatedEmptyRows = Math.max(
+      0,
+      (1 + state.page) * state.rowsPerPage - state.currentData.length
+    );
+    setState((prevState) => ({
+      ...prevState,
+      visibleRows: paginatedData,
+      emptyRows: calculatedEmptyRows,
+    }));
+  }, [state.currentData, state.order, state.orderBy, state.page, state.rowsPerPage]);
+
+  // Remove selected rows deleted from the data to prevent stale selected state
+  React.useEffect(() => {
+    setState((prevState) => ({
+      ...prevState,
+      selected: prevState.selected.filter((selectedRow) =>
+        data.some((row) => row === selectedRow)
+      ),
+    }));
+  }, [data]);
+
+
+  const handleRequestSort = (_event: React.MouseEvent<unknown>, property: keyof T) => {
+    const isAsc = state.orderBy === property && state.order === 'asc';
+    setState((prevState) => ({
+      ...prevState,
+      order: isAsc ? 'desc' : 'asc',
+      orderBy: property,
+    }));
+  };
+
+  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      setState((prevState) => ({ ...prevState, selected: [...state.currentData] }));
+    } else {
+      setState((prevState) => ({ ...prevState, selected: [] }));
+    }
+  };
+
+  const handleClick = (_event: React.MouseEvent<unknown>, row: T) => {
+    const selectedIndex = state.selected.findIndex((selectedRow) => selectedRow === row);
+    let newSelected: readonly T[] = [];
+
+    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) => ({ ...prevState, selected: newSelected }));
+  };
+
+  const handleChangePage = (_event: unknown, newPage: number) => {
+    setState((prevState) => ({ ...prevState, page: newPage }));
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState((prevState) => ({
+      ...prevState,
+      rowsPerPage: parseInt(event.target.value, 10),
+      page: 0,
+    }));
+  };
+
+  const handleFilterChange = useCallback((filterFunc: (row: T) => boolean) => {
+    setState((prevState) => ({ ...prevState, filterFunc }));
+  }, []);
+
+  return (
+    <div {...rest}>
+      <Paper sx={{ width: '100%', mb: 2 }}>
+        <EnhancedTableToolbar
+          title={title}
+          numSelected={state.selected.length}
+          selected={state.selected}
+          onFilterChange={handleFilterChange}
+          onSearch={handleSearch}
+          headCells={headCells}
+          CustomToolbar={CustomToolbar}
+          CustomSelectedToolbar={CustomSelectedToolbar}
+          data={data}
+        />
+        <TableContainer>
+          <Table
+            sx={{ minWidth: 750 }}
+            aria-labelledby="tableTitle"
+            size="small"
+          >
+            <EnhancedTableHead
+              headCells={headCells}
+              numSelected={state.selected.length}
+              order={state.order}
+              orderBy={state.orderBy}
+              onSelectAllClick={deactivateSelect ? undefined : handleSelectAllClick}
+              onRequestSort={handleRequestSort}
+              rowCount={state.currentData.length}
+              deactivateSelectAll={deactivateSelect}
+            />
+            <TableBody>
+              {state.visibleRows.map((row, index) => {
+                const selectionKey = state.orderBy;
+                const isItemSelected = state.selected.some((selectedRow) => selectedRow === row);
+                const labelId = `enhanced-table-checkbox-${index}`;
+
+                return (
+                  <TableRow
+                    hover
+                    onClick={deactivateSelect ? undefined : (event) => handleClick(event, row)}
+                    role="checkbox"
+                    aria-checked={isItemSelected}
+                    tabIndex={-1}
+                    key={String(row[selectionKey])}
+                    selected={isItemSelected}
+                    sx={{ cursor: 'pointer' }}
+                  >
+                    {!deactivateSelect && (
+                      <TableCell padding="checkbox">
+                        <Checkbox
+                          color="primary"
+                          checked={isItemSelected}
+                          inputProps={{
+                            'aria-labelledby': labelId,
+                          }}
+                        />
+                      </TableCell>
+                    )}
+                    {headCells.map((headCell, cellIndex) => (
+                      <TableCell
+                        key={String(headCell.id)}
+                        component={cellIndex === 0 ? "th" : undefined}
+                        id={cellIndex === 0 ? labelId : undefined}
+                        scope={cellIndex === 0 ? "row" : undefined}
+                        padding="normal"
+                      >
+                        {customCells &&
+                          customCells.some((renderer) => renderer.id === headCell.id)
+                          ? customCells
+                            .find((renderer) => renderer.id === headCell.id)
+                            ?.render(row, headCell.id)
+                          : String(row[headCell.id])}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+              })}
+              {state.emptyRows > 0 && (
+                <TableRow
+                  style={{
+                    height: 33 * state.emptyRows,
+                  }}
+                >
+                  <TableCell colSpan={headCells.length + 1} />
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        <TablePagination
+          rowsPerPageOptions={[5, 10, 25]}
+          component="div"
+          count={state.currentData.length}
+          rowsPerPage={state.rowsPerPage}
+          page={state.page}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+        />
+      </Paper>
+    </div>
+  );
+};

package/src/components/TableHead.tsx

@@ -0,0 +1,82 @@
+import Box from '@mui/material/Box';
+import Checkbox from '@mui/material/Checkbox';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import { visuallyHidden } from '@mui/utils';
+import { Order } from './utils';
+
+export interface HeadCell<T> {
+  id: keyof T;
+  label: string;
+  numeric: boolean;
+}
+
+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;
+  headCells: HeadCell<T>[];
+  deactivateSelectAll?: boolean;
+}
+
+export function EnhancedTableHead<T>({
+  onSelectAllClick,
+  order,
+  orderBy,
+  numSelected,
+  rowCount,
+  onRequestSort,
+  headCells,
+  deactivateSelectAll,
+}: EnhancedTableProps<T>) {
+  const createSortHandler =
+    (property: keyof T) => (event: React.MouseEvent<unknown>) => {
+      onRequestSort(event, property);
+    };
+
+  return (
+    <TableHead>
+      <TableRow>
+        {!deactivateSelectAll &&
+          <TableCell padding="checkbox">
+            <Checkbox
+              color="primary"
+              indeterminate={numSelected > 0 && numSelected < rowCount}
+              checked={rowCount > 0 && numSelected === rowCount}
+              onChange={onSelectAllClick}
+              inputProps={{
+                'aria-label': 'select all items',
+              }}
+            />
+          </TableCell>
+        }
+        {headCells.map((headCell) => (
+          <TableCell
+            key={String(headCell.id)}
+            padding='normal'
+            sortDirection={orderBy === headCell.id ? order : false}
+          >
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              direction={orderBy === headCell.id ? order : 'asc'}
+              onClick={createSortHandler(headCell.id)}
+              sx={{ fontWeight: 'bold' }}
+            >
+              {headCell.label}
+              {orderBy === headCell.id ? (
+                <Box component="span" sx={visuallyHidden}>
+                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                </Box>
+              ) : null}
+            </TableSortLabel>
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}

package/src/components/Toolbar.tsx

@@ -0,0 +1,289 @@
+import FilterListIcon from "@mui/icons-material/FilterList";
+import SearchIcon from "@mui/icons-material/Search";
+import { Box, Button, Checkbox, IconButton, InputBase, Popover, Slider, Stack, Toolbar, Tooltip, Typography } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import React, { useEffect, useState } from "react";
+import { Close } from "@mui/icons-material";
+import { HeadCell } from "./TableHead";
+
+interface Filter {
+  key: string;
+  type: "number" | "string" | "boolean";
+  value?: string | boolean | number[];
+}
+
+interface FilterConfig {
+  key: string;
+  type: "number" | "string" | "boolean";
+  min?: number;
+  max?: number;
+}
+
+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;
+  headCells: HeadCell<T>[];
+  CustomToolbar?: React.FC;
+  CustomSelectedToolbar?: React.FC<CustomSelectedToolbarProps<T>>;
+  data?: T[];
+}
+
+export function EnhancedTableToolbar<T>(props: EnhancedTableToolbarProps<T>) {
+  const { title, numSelected, selected, onFilterChange, onSearch, headCells, CustomToolbar, CustomSelectedToolbar, data } = props;
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const [filters, setFilters] = useState<Filter[]>([]);
+  const [filterConfig, setFilterConfig] = useState<FilterConfig[]>([]);
+  // rest value to force re-render of filters
+  const [resetCounter, setResetCounter] = useState(0);
+
+  useEffect(() => {
+    if (data && data.length > 0) {
+      const inferredConfig = Object.keys(data[0] as object).map((key: string) => {
+        const values = data.map((row) => (row as Record<string, any>)[key]);
+        const isNumber = values.every((val) => typeof val === "number");
+        const inferredType = isNumber ? "number" : typeof values[0] === "boolean" ? "boolean" : "string";
+        return {
+          key,
+          type: inferredType as "number" | "string" | "boolean",
+          min: isNumber ? Math.min(...values) : undefined,
+          max: isNumber ? Math.max(...values) : undefined,
+        };
+      });
+      setFilterConfig(inferredConfig);
+    }
+  }, [data]);
+
+  useEffect(() => {
+    const newFilterFunc = (row: T) => {
+      if (filters.length === 0) return true;
+      return filters.every((filter) => {
+        const rowValue = (row as Record<string, any>)[filter.key];
+        if (filter.type === "number") {
+          const [min, max] = filter.value as number[];
+          return rowValue >= min && rowValue <= max;
+        }
+        if (filter.type === "string") {
+          return rowValue.toString().toLowerCase().includes((filter.value as string).toLowerCase());
+        }
+        if (filter.type === "boolean") {
+          return rowValue === filter.value;
+        }
+        return true;
+      });
+    };
+    onFilterChange(newFilterFunc);
+  }, [filters, onFilterChange]);
+
+  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+
+  const getFilter = (key: string): Filter | undefined =>
+    filters.find((filter) => filter.key === key);
+
+  const updateFilter = (updatedFilter: Filter) => {
+    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: string) => {
+    setFilters((prevFilters) => prevFilters.filter((filter) => filter.key !== key));
+  };
+
+  const handleFilterChange = (key: string, value: any) => {
+    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 (
+    <Toolbar
+      sx={[
+        { pl: { sm: 2 }, pr: { sm: 1 } },
+        numSelected > 0 && {
+          bgcolor: (theme) =>
+            alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+        },
+      ]}
+    >
+      {numSelected > 0 ? (
+        <>
+          <Typography
+            sx={{ flex: "1 1 100%" }}
+            color="inherit"
+            variant="subtitle1"
+            component="div"
+          >
+            {numSelected} selected
+          </Typography>
+          {CustomSelectedToolbar && (
+            <CustomSelectedToolbar data={data} selected={selected} />
+          )}
+        </>
+      ) : (
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          width="100%"
+          alignItems="center"
+        >
+          <Typography
+            sx={{ flex: "1 1 100%", alignContent: "center", paddingLeft: 1 }}
+            variant="h6"
+            id="tableTitle"
+            component="div"
+          >
+            {title}
+          </Typography>
+          <Box
+            sx={{
+              flexGrow: 1,
+              display: "flex",
+              alignItems: "center",
+              border: 1,
+              borderColor: "lightgray",
+              borderRadius: 1,
+            }}
+          >
+            <InputBase
+              placeholder="Search…"
+              onChange={(e) => onSearch(e.target.value)}
+              sx={{ marginLeft: 2, flex: 1, width: 180 }}
+            />
+            <IconButton>
+              <SearchIcon />
+            </IconButton>
+          </Box>
+          <Tooltip title="Filter list">
+            <IconButton onClick={handleOpen}>
+              <FilterListIcon />
+            </IconButton>
+          </Tooltip>
+          {CustomToolbar && <CustomToolbar />}
+        </Stack>
+      )}
+      <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 } }
+        }}
+      >
+        <Stack direction="row" justifyContent="space-between">
+          <Typography variant="h6" sx={{ marginBottom: 2 }}>
+            Filters
+          </Typography>
+          <Button variant="contained" size="small" sx={{ height: "fit-content" }} onClick={resetFilters}>
+            Reset
+          </Button>
+        </Stack>
+        <Stack key={resetCounter} spacing={2}>
+          {filterConfig.map(({ key, type, min, max }) => {
+            const currentFilter = getFilter(key);
+            return (
+              <Box key={key}>
+                <Typography variant="subtitle1">
+                  {headCells.find((cell) => cell.id === key)?.label}
+                </Typography>
+                {type === "number" && min !== undefined && max !== undefined && (
+                  <Slider
+                    value={[
+                      (currentFilter?.value as number[] | undefined)?.[0] ?? min,
+                      (currentFilter?.value as number[] | undefined)?.[1] ?? max,
+                    ]}
+                    onChange={(_, newValue) => {
+                      const [newMin, newMax] = newValue as number[];
+                      handleFilterChange(key, [newMin, newMax]);
+                    }}
+                    valueLabelDisplay="auto"
+                    min={min || 0}
+                    max={max || 100}
+                    step={1}
+                  />
+                )}
+                {type === "string" && (
+                  <InputBase
+                    placeholder="Search..."
+                    value={(currentFilter?.value as string) || ""}
+                    onChange={(e) => handleFilterChange(key, e.target.value)}
+                    sx={{
+                      padding: 1,
+                      border: 1,
+                      borderColor: "lightgray",
+                      borderRadius: 1,
+                      width: "100%",
+                    }}
+                  />
+                )}
+                {type === "boolean" && (
+                  <Box display="flex" alignItems="center">
+                    <Checkbox
+                      checked={currentFilter?.value === true}
+                      onChange={(e) =>
+                        handleFilterChange(key, e.target.checked)
+                      }
+                    />
+                    {currentFilter && (
+                      <Close
+                        color="error"
+                        sx={{ cursor: "pointer", fontSize: 15 }}
+                        onClick={() => handleFilterChange(key, undefined)}
+                      />
+                    )}
+                  </Box>
+                )}
+              </Box>
+            );
+          })}
+        </Stack>
+      </Popover>
+    </Toolbar>
+  );
+}

package/src/components/test-data.ts

@@ -0,0 +1,89 @@
+import { HeadCell } from "./TableHead";
+export interface Data {
+  id: number;
+  calories: number;
+  carbs: number;
+  fat: number;
+  name: string;
+  protein: number;
+}
+
+function createData(
+  id: number,
+  name: string,
+  calories: number,
+  fat: number,
+  carbs: number,
+  protein: number,
+): Data {
+  return {
+    id,
+    name,
+    calories,
+    fat,
+    carbs,
+    protein,
+  };
+}
+
+export const rows = [
+  createData(1, 'Cupcake', 305, 3.7, 67, 4.3),
+  createData(2, 'Donut', 452, 25.0, 51, 4.9),
+  createData(3, 'Eclair', 262, 16.0, 24, 6.0),
+  createData(4, 'Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData(5, 'Gingerbread', 356, 16.0, 49, 3.9),
+  createData(6, 'Honeycomb', 408, 3.2, 87, 6.5),
+  createData(7, 'Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData(8, 'Jelly Bean', 375, 0.0, 94, 0.0),
+  createData(9, 'KitKat', 518, 26.0, 65, 7.0),
+  createData(10, 'Lollipop', 392, 0.2, 98, 0.0),
+  createData(11, 'Marshmallow', 318, 0, 81, 2.0),
+  createData(12, 'Nougat', 360, 19.0, 9, 37.0),
+  createData(13, 'Oreo', 437, 18.0, 63, 4.0),
+  createData(14, 'Pie', 305, 3.7, 67, 4.3),
+  createData(15, 'Quiche', 452, 25.0, 51, 4.9),
+  createData(16, 'Raspberry', 262, 16.0, 24, 6.0),
+  createData(17, 'Strawberry', 159, 6.0, 24, 4.0),
+  createData(18, 'Tiramisu', 356, 16.0, 49, 3.9),
+  createData(19, 'Ugli fruit', 408, 3.2, 87, 6.5),
+  createData(20, 'Vanilla', 237, 9.0, 37, 4.3),
+  createData(21, 'Waffle', 375, 0.0, 94, 0.0),
+  createData(22, 'Xigua', 518, 26.0, 65, 7.0),
+  createData(23, 'Yogurt', 392, 0.2, 98, 0.0),
+  createData(24, 'Zucchini', 318, 0, 81, 2.0),
+  createData(25, 'Apple', 360, 19.0, 9, 37.0),
+  createData(26, 'Banana', 437, 18.0, 63, 4.0),
+  createData(27, 'Cherry', 305, 3.7, 67, 4.3),
+  createData(28, 'Date', 452, 25.0, 51, 4.9),
+  createData(29, 'Elderberry', 262, 16.0, 24, 6.0),
+  createData(30, 'Fig', 159, 6.0, 24, 4.0),
+  createData(31, 'Grape', 356, 16.0, 49, 3.9),
+];
+
+export const headCells: HeadCell<typeof rows[0]>[] = [
+  {
+    id: 'name',
+    numeric: false,
+    label: 'Dessert (100g serving)',
+  },
+  {
+    id: 'calories',
+    numeric: true,
+    label: 'Calories',
+  },
+  {
+    id: 'fat',
+    numeric: true,
+    label: 'Fat (g)',
+  },
+  {
+    id: 'carbs',
+    numeric: true,
+    label: 'Carbs (g)',
+  },
+  {
+    id: 'protein',
+    numeric: true,
+    label: 'Protein (g)',
+  },
+];

package/src/components/utils.ts

@@ -0,0 +1,17 @@
+export type Order = 'asc' | 'desc';
+
+export function getComparator<T, Key extends keyof T>(
+  order: Order,
+  orderBy: Key,
+): (a: T, b: T) => number {
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a[orderBy], b[orderBy])
+    : (a, b) => -descendingComparator(a[orderBy], b[orderBy]);
+}
+
+function descendingComparator<T>(a: T, b: T): number {
+  if (b < a) return -1;
+  if (b > a) return 1;
+  return 0;
+}
+

package/src/index.ts

@@ -0,0 +1 @@
+export { MUITable } from './components/MUITable';

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "declaration": true,
+    "declarationDir": "./dist/types",
+    "outDir": "./dist",
+    "isolatedModules": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}