mui-datatables-updated 1.0.2 → 1.0.3

package/src/components/Toolbar.tsx

@@ -1,340 +0,0 @@
-import { Close, CloudDownload, Print } from "@mui/icons-material";
-import FilterListIcon from "@mui/icons-material/FilterList";
-import SearchIcon from "@mui/icons-material/Search";
-import { Box, Button, Checkbox, IconButton, Popover, Slider, Stack, TextField, Toolbar, Tooltip, Typography } from "@mui/material";
-import { alpha } from "@mui/material/styles";
-import React, { useEffect, useState } from "react";
-import { Column, Options } from "./MUITable";
-import { UseReactToPrintFn } from "react-to-print";
-
-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;
-  printFn: UseReactToPrintFn;
-  columns: Column[];
-  CustomToolbar?: React.FC;
-  CustomSelectedToolbar?: React.FC<CustomSelectedToolbarProps<T>>;
-  data?: T[];
-  options?: Options;
-}
-
-export function EnhancedTableToolbar<T>(props: EnhancedTableToolbarProps<T>) {
-  const { title, numSelected, selected, onFilterChange, onSearch, printFn, columns, CustomToolbar, CustomSelectedToolbar, data, options } = 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);
-  const [openSearch, setOpenSearch] = useState(false);
-
-  function downloadCSV(data: Record<string, any>[], filename: string = "data.csv"): void {
-    // Base case
-    if (data.length === 0) {
-      console.warn("No data to export.");
-      return;
-    }
-
-    // Create CSV content
-    const headers = Object.keys(data[0] as Record<string, any>);
-    const csvRows = data.map(obj =>
-      headers.map(field => JSON.stringify(obj[field] ?? "")).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 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, columns]);
-
-  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 handleSearchChange = () => {
-    setOpenSearch((prev) => !prev);
-  };
-
-  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={[
-        { px: { sm: 2 }, borderBottom: 1, borderColor: "divider" },
-        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"
-          >
-            {options?.translations?.selectedTextRenderer
-              ? options.translations.selectedTextRenderer(numSelected)
-              : `${numSelected} selected`}
-          </Typography>
-          {CustomSelectedToolbar && (
-            <CustomSelectedToolbar data={data} selected={selected} />
-          )}
-        </>
-      ) : (
-        <Stack
-          direction="row"
-          justifyContent="space-between"
-          width="100%"
-          alignItems="center"
-        >
-          {openSearch ? (
-            <Stack direction="row" alignItems="center">
-              <SearchIcon />
-              <TextField
-                placeholder={options?.translations?.searchPlaceholder || "Search..."}
-                onChange={(e) => onSearch(e.target.value)}
-                variant="standard"
-                autoFocus
-                fullWidth
-                sx={{ marginLeft: 1 }}
-              />
-              <IconButton
-                onClick={handleSearchChange}
-                sx={{ '&:hover': { color: 'error.main' } }}
-              >
-                <Close />
-              </IconButton>
-            </Stack>
-          ) : (
-
-            <Typography
-              sx={{ flex: "1 1 100%", alignContent: "center", paddingLeft: 1 }}
-              variant="h6"
-              id="tableTitle"
-              component="div"
-            >
-              {title}
-            </Typography>
-          )}
-          <Stack direction="row" spacing={0.5}>
-            <Tooltip title={options?.translations?.searchTooltip || "Search"}>
-              <IconButton onClick={handleSearchChange}>
-                <SearchIcon />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title={options?.translations?.downloadTooltip || "Download CSV"}>
-              <IconButton onClick={() => downloadCSV(data as Record<string, any>[], "data.csv")}>
-                <CloudDownload />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title={options?.translations?.printTooltip || "Print"}>
-              <IconButton onClick={() => printFn()}>
-                <Print />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title={options?.translations?.filterTooltip || "Filter list"}>
-              <IconButton onClick={handleOpen}>
-                <FilterListIcon />
-              </IconButton>
-            </Tooltip>
-            {CustomToolbar && <CustomToolbar />}
-          </Stack>
-        </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 }}>
-            {options?.translations?.filtersTitle || "Filters"}
-          </Typography>
-          <Button variant="contained" size="small" sx={{ height: "fit-content" }} onClick={resetFilters}>
-            {options?.translations?.resetButtonText || "Reset"}
-          </Button>
-        </Stack>
-        <Stack key={resetCounter}>
-          {filterConfig.map(({ key, type, min, max }) => {
-            const currentFilter = getFilter(key);
-            return (
-              <Box key={key}>
-                <Typography variant="subtitle1">
-                  {columns.find((cell) => cell.name === 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" && (
-                  <TextField
-                    placeholder={options?.translations?.searchPlaceholder || "Search..."}
-                    size="small"
-                    value={(currentFilter?.value as string) || ""}
-                    onChange={(e) => handleFilterChange(key, e.target.value)}
-                    sx={{
-                      marginBottom: 1,
-                      paddingY: 0.5,
-                      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/utils.ts

@@ -1,17 +0,0 @@
-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

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

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "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"
-  ]
-}