mui-datatables-updated 1.0.0 → 1.0.2

package/src/components/MUITable.tsx

@@ -6,25 +6,47 @@ 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 React, { useCallback, useRef } from 'react';
+import { useReactToPrint } from "react-to-print";
+import { EnhancedTableHead } from './TableHead';
 import { CustomSelectedToolbarProps, EnhancedTableToolbar } from './Toolbar';
 import { getComparator, Order } from './utils';
+import { LabelDisplayedRowsArgs } from '@mui/material/TablePagination';
 
-export interface CustomCell<T> {
-  id: keyof T;
-  render: (row: T, key: keyof T) => React.ReactNode;
+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[];
-  headCells?: HeadCell<T>[];
   deactivateSelect?: boolean;
   defaultOrderBy?: string;
   defaultOrder?: Order;
   excludedColumns?: (keyof T)[];
-  customCells?: CustomCell<T>[];
+  columns?: Column[];
+  options?: Options;
   CustomToolbar?: React.FC;
   CustomSelectedToolbar?: React.FC<CustomSelectedToolbarProps<T>>;
 }
@@ -37,7 +59,6 @@ interface EnhancedTableState<T> {
   rowsPerPage: number;
   searchQuery: string;
   filterFunc: (row: T) => boolean;
-  filteredData: T[];
   currentData: T[];
   visibleRows: T[];
   emptyRows: number;
@@ -46,16 +67,18 @@ interface EnhancedTableState<T> {
 export const MUITable = <T extends object>({
   title,
   data,
-  headCells: passedHeadCells,
   deactivateSelect,
   defaultOrderBy,
   defaultOrder,
   excludedColumns,
-  customCells,
+  columns: passedColumns,
   CustomToolbar,
   CustomSelectedToolbar,
+  options,
   ...rest
 }: EnhancedTableProps<T>) => {
+  const tableRef = useRef<HTMLDivElement>(null);
+  const reactToPrintFn = useReactToPrint({ contentRef: tableRef });
 
   const getDefaultOrderByKey = React.useCallback((): keyof T => {
     if (data.length === 0) return "id" as keyof T;
@@ -83,25 +106,23 @@ export const MUITable = <T extends object>({
       rowsPerPage: 5,
       searchQuery: "",
       filterFunc: () => true,
-      filteredData: data,
       currentData: data,
       visibleRows: data,
       emptyRows: 0,
     };
   });
 
-  const generateHeadCells = React.useCallback((): HeadCell<T>[] => {
+  const generateColumns = React.useCallback((): Column[] => {
     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,
+        name: key,
         label: key.charAt(0).toUpperCase() + key.slice(1),
-        numeric: typeof data[0][key as keyof T] === 'number',
       }));
   }, [data, excludedColumns]);
 
-  const headCells = passedHeadCells || generateHeadCells();
+  const columns = passedColumns || generateColumns();
 
   const handleSearch = (query: string) => {
     setState((prevState) => ({ ...prevState, searchQuery: query.toLowerCase() }));
@@ -112,46 +133,49 @@ export const MUITable = <T extends object>({
     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
+  // Data sorting, filtering, and pagination
   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)
+    // Apply filters, search query, and sort data
+    const sortedData = [...data]
+      .filter(state.filterFunc)
+      .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(getComparator<T, keyof T>(state.order, state.orderBy));
 
-  // 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)
-    );
+    // Paginate the processed data
+    const startIndex = state.page * state.rowsPerPage;
     const paginatedData = sortedData.slice(
-      state.page * state.rowsPerPage,
-      state.page * state.rowsPerPage + state.rowsPerPage
+      startIndex,
+      startIndex + state.rowsPerPage
     );
+
     const calculatedEmptyRows = Math.max(
       0,
-      (1 + state.page) * state.rowsPerPage - state.currentData.length
+      (1 + state.page) * state.rowsPerPage - sortedData.length
     );
+
     setState((prevState) => ({
       ...prevState,
       visibleRows: paginatedData,
       emptyRows: calculatedEmptyRows,
+      selected: prevState.selected.filter((selectedRow) =>
+        data.includes(selectedRow)
+      ),
     }));
-  }, [state.currentData, state.order, state.orderBy, state.page, state.rowsPerPage]);
+  }, [
+    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(() => {
@@ -217,7 +241,7 @@ export const MUITable = <T extends object>({
   }, []);
 
   return (
-    <div {...rest}>
+    <div {...rest} ref={tableRef}>
       <Paper sx={{ width: '100%', mb: 2 }}>
         <EnhancedTableToolbar
           title={title}
@@ -225,10 +249,12 @@ export const MUITable = <T extends object>({
           selected={state.selected}
           onFilterChange={handleFilterChange}
           onSearch={handleSearch}
-          headCells={headCells}
+          printFn={reactToPrintFn}
+          columns={columns}
           CustomToolbar={CustomToolbar}
           CustomSelectedToolbar={CustomSelectedToolbar}
           data={data}
+          options={options}
         />
         <TableContainer>
           <Table
@@ -237,7 +263,7 @@ export const MUITable = <T extends object>({
             size="small"
           >
             <EnhancedTableHead
-              headCells={headCells}
+              columns={columns}
               numSelected={state.selected.length}
               order={state.order}
               orderBy={state.orderBy}
@@ -248,7 +274,6 @@ export const MUITable = <T extends object>({
             />
             <TableBody>
               {state.visibleRows.map((row, index) => {
-                const selectionKey = state.orderBy;
                 const isItemSelected = state.selected.some((selectedRow) => selectedRow === row);
                 const labelId = `enhanced-table-checkbox-${index}`;
 
@@ -259,7 +284,7 @@ export const MUITable = <T extends object>({
                     role="checkbox"
                     aria-checked={isItemSelected}
                     tabIndex={-1}
-                    key={String(row[selectionKey])}
+                    key={index}
                     selected={isItemSelected}
                     sx={{ cursor: 'pointer' }}
                   >
@@ -274,20 +299,17 @@ export const MUITable = <T extends object>({
                         />
                       </TableCell>
                     )}
-                    {headCells.map((headCell, cellIndex) => (
+                    {columns.map((column, cellIndex) => (
                       <TableCell
-                        key={String(headCell.id)}
+                        key={String(column.name)}
                         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])}
+                        {column.options?.customBodyRender
+                          ? column.options.customBodyRender((row as Record<string, any>)[column.name])
+                          : String((row as Record<string, any>)[column.name])}
                       </TableCell>
                     ))}
                   </TableRow>
@@ -299,7 +321,7 @@ export const MUITable = <T extends object>({
                     height: 33 * state.emptyRows,
                   }}
                 >
-                  <TableCell colSpan={headCells.length + 1} />
+                  <TableCell colSpan={columns.length + 1} />
                 </TableRow>
               )}
             </TableBody>
@@ -313,6 +335,8 @@ export const MUITable = <T extends object>({
           page={state.page}
           onPageChange={handleChangePage}
           onRowsPerPageChange={handleChangeRowsPerPage}
+          labelRowsPerPage={options?.translations?.rowsPerPageText || "Rows per page"}
+          labelDisplayedRows={options?.translations?.labelDisplayedRows || (({ from, to, count }) => `${from}-${to} of ${count}`)}
         />
       </Paper>
     </div>

package/src/components/TableHead.tsx

@@ -5,14 +5,9 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import { visuallyHidden } from '@mui/utils';
+import { Column } from './MUITable';
 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;
@@ -20,7 +15,7 @@ interface EnhancedTableProps<T> {
   order: Order;
   orderBy: keyof T;
   rowCount: number;
-  headCells: HeadCell<T>[];
+  columns: Column[];
   deactivateSelectAll?: boolean;
 }
 
@@ -31,7 +26,7 @@ export function EnhancedTableHead<T>({
   numSelected,
   rowCount,
   onRequestSort,
-  headCells,
+  columns,
   deactivateSelectAll,
 }: EnhancedTableProps<T>) {
   const createSortHandler =
@@ -55,25 +50,29 @@ export function EnhancedTableHead<T>({
             />
           </TableCell>
         }
-        {headCells.map((headCell) => (
+        {columns.map((column) => (
           <TableCell
-            key={String(headCell.id)}
+            key={String(column.name)}
             padding='normal'
-            sortDirection={orderBy === headCell.id ? order : false}
+            sortDirection={orderBy === column.name ? 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>
+            {column.options?.sort !== false ? (
+              <TableSortLabel
+                active={orderBy === column.name}
+                direction={orderBy === column.name ? order : 'asc'}
+                onClick={createSortHandler(column.name as keyof T)}
+                sx={{ fontWeight: 'bold' }}
+              >
+                {column.label}
+                {orderBy === column.name ? (
+                  <Box component="span" sx={visuallyHidden}>
+                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                  </Box>
+                ) : null}
+              </TableSortLabel>
+            ) : (
+              <span style={{ fontWeight: 700 }}>{column.label}</span>
+            )}
           </TableCell>
         ))}
       </TableRow>

package/src/components/Toolbar.tsx

@@ -1,10 +1,11 @@
+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, InputBase, Popover, Slider, Stack, Toolbar, Tooltip, Typography } from "@mui/material";
+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 { Close } from "@mui/icons-material";
-import { HeadCell } from "./TableHead";
+import { Column, Options } from "./MUITable";
+import { UseReactToPrintFn } from "react-to-print";
 
 interface Filter {
   key: string;
@@ -30,24 +31,53 @@ interface EnhancedTableToolbarProps<T> {
   selected: readonly T[];
   onFilterChange: (filterFunc: (row: T) => boolean) => void;
   onSearch: (query: string) => void;
-  headCells: HeadCell<T>[];
+  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, headCells, CustomToolbar, CustomSelectedToolbar, data } = props;
+  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 = Object.keys(data[0] as object).map((key: string) => {
+      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";
@@ -60,7 +90,7 @@ export function EnhancedTableToolbar<T>(props: EnhancedTableToolbarProps<T>) {
       });
       setFilterConfig(inferredConfig);
     }
-  }, [data]);
+  }, [data, columns]);
 
   useEffect(() => {
     const newFilterFunc = (row: T) => {
@@ -91,6 +121,10 @@ export function EnhancedTableToolbar<T>(props: EnhancedTableToolbarProps<T>) {
     setAnchorEl(null);
   };
 
+  const handleSearchChange = () => {
+    setOpenSearch((prev) => !prev);
+  };
+
   const open = Boolean(anchorEl);
 
   const getFilter = (key: string): Filter | undefined =>
@@ -137,11 +171,8 @@ export function EnhancedTableToolbar<T>(props: EnhancedTableToolbarProps<T>) {
   return (
     <Toolbar
       sx={[
-        { pl: { sm: 2 }, pr: { sm: 1 } },
-        numSelected > 0 && {
-          bgcolor: (theme) =>
-            alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
-        },
+        { px: { sm: 2 }, borderBottom: 1, borderColor: "divider" },
+        numSelected > 0 && { bgcolor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity) },
       ]}
     >
       {numSelected > 0 ? (
@@ -152,7 +183,9 @@ export function EnhancedTableToolbar<T>(props: EnhancedTableToolbarProps<T>) {
             variant="subtitle1"
             component="div"
           >
-            {numSelected} selected
+            {options?.translations?.selectedTextRenderer
+              ? options.translations.selectedTextRenderer(numSelected)
+              : `${numSelected} selected`}
           </Typography>
           {CustomSelectedToolbar && (
             <CustomSelectedToolbar data={data} selected={selected} />
@@ -165,39 +198,58 @@ export function EnhancedTableToolbar<T>(props: EnhancedTableToolbarProps<T>) {
           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>
+          {openSearch ? (
+            <Stack direction="row" alignItems="center">
               <SearchIcon />
-            </IconButton>
-          </Box>
-          <Tooltip title="Filter list">
-            <IconButton onClick={handleOpen}>
-              <FilterListIcon />
-            </IconButton>
-          </Tooltip>
-          {CustomToolbar && <CustomToolbar />}
+              <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
@@ -218,19 +270,19 @@ export function EnhancedTableToolbar<T>(props: EnhancedTableToolbarProps<T>) {
       >
         <Stack direction="row" justifyContent="space-between">
           <Typography variant="h6" sx={{ marginBottom: 2 }}>
-            Filters
+            {options?.translations?.filtersTitle || "Filters"}
           </Typography>
           <Button variant="contained" size="small" sx={{ height: "fit-content" }} onClick={resetFilters}>
-            Reset
+            {options?.translations?.resetButtonText || "Reset"}
           </Button>
         </Stack>
-        <Stack key={resetCounter} spacing={2}>
+        <Stack key={resetCounter}>
           {filterConfig.map(({ key, type, min, max }) => {
             const currentFilter = getFilter(key);
             return (
               <Box key={key}>
                 <Typography variant="subtitle1">
-                  {headCells.find((cell) => cell.id === key)?.label}
+                  {columns.find((cell) => cell.name === key)?.label}
                 </Typography>
                 {type === "number" && min !== undefined && max !== undefined && (
                   <Slider
@@ -249,15 +301,14 @@ export function EnhancedTableToolbar<T>(props: EnhancedTableToolbarProps<T>) {
                   />
                 )}
                 {type === "string" && (
-                  <InputBase
-                    placeholder="Search..."
+                  <TextField
+                    placeholder={options?.translations?.searchPlaceholder || "Search..."}
+                    size="small"
                     value={(currentFilter?.value as string) || ""}
                     onChange={(e) => handleFilterChange(key, e.target.value)}
                     sx={{
-                      padding: 1,
-                      border: 1,
-                      borderColor: "lightgray",
-                      borderRadius: 1,
+                      marginBottom: 1,
+                      paddingY: 0.5,
                       width: "100%",
                     }}
                   />

package/src/index.ts

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