material-react-table 0.6.10 → 0.7.0-alpha.11

package/src/inputs/MRT_FilterTextField.tsx

@@ -1,6 +1,13 @@
-import React, { ChangeEvent, FC, MouseEvent, useState } from 'react';
+import React, {
+  ChangeEvent,
+  FC,
+  MouseEvent,
+  useCallback,
+  useState,
+} from 'react';
 import {
   Chip,
+  debounce,
   IconButton,
   InputAdornment,
   MenuItem,
@@ -8,36 +15,41 @@ import {
   TextFieldProps,
   Tooltip,
 } from '@mui/material';
-import { useAsyncDebounce } from 'react-table';
-import { useMRT } from '../useMRT';
-import type { MRT_HeaderGroup } from '..';
+import type { MRT_Header, MRT_TableInstance } from '..';
 import { MRT_FilterTypeMenu } from '../menus/MRT_FilterTypeMenu';
 import { MRT_FILTER_TYPE } from '../enums';
 
 interface Props {
-  column: MRT_HeaderGroup;
+  header: MRT_Header;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_FilterTextField: FC<Props> = ({ column }) => {
+export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
   const {
-    icons: { FilterListIcon, CloseIcon },
-    idPrefix,
-    localization,
-    muiTableHeadCellFilterTextFieldProps,
+    getState,
+    options: {
+      icons: { FilterListIcon, CloseIcon },
+      idPrefix,
+      localization,
+      muiTableHeadCellFilterTextFieldProps,
+    },
     setCurrentFilterTypes,
-    tableInstance,
-  } = useMRT();
+  } = tableInstance;
+
+  const { column } = header;
+
+  const { currentFilterTypes } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
   const mTableHeadCellFilterTextFieldProps =
     muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? muiTableHeadCellFilterTextFieldProps(column)
+      ? muiTableHeadCellFilterTextFieldProps({ column, tableInstance })
       : muiTableHeadCellFilterTextFieldProps;
 
   const mcTableHeadCellFilterTextFieldProps =
     column.muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? column.muiTableHeadCellFilterTextFieldProps(column)
+      ? column.muiTableHeadCellFilterTextFieldProps({ column, tableInstance })
       : column.muiTableHeadCellFilterTextFieldProps;
 
   const textFieldProps = {
@@ -45,11 +57,18 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
     ...mcTableHeadCellFilterTextFieldProps,
   } as TextFieldProps;
 
-  const [filterValue, setFilterValue] = useState('');
+  const [filterValue, setFilterValue] = useState<string>(
+    (column.getColumnFilterValue() ?? '') as string,
+  );
 
-  const handleChange = useAsyncDebounce((value) => {
-    column.setFilter(value ?? undefined);
-  }, 150);
+  const handleChange = useCallback(
+    debounce(
+      (event: ChangeEvent<HTMLInputElement>) =>
+        column.setColumnFilterValue(event.target.value ?? undefined),
+      150,
+    ),
+    [],
+  );
 
   const handleFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -57,24 +76,24 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
 
   const handleClear = () => {
     setFilterValue('');
-    column.setFilter(undefined);
+    column.setColumnFilterValue(undefined);
   };
 
   const handleClearFilterChip = () => {
     setFilterValue('');
-    column.setFilter(undefined);
+    column.setColumnFilterValue(undefined);
     setCurrentFilterTypes((prev) => ({
       ...prev,
-      [column.id]: MRT_FILTER_TYPE.BEST_MATCH,
+      [header.id]: MRT_FILTER_TYPE.BEST_MATCH,
     }));
   };
 
   if (column.Filter) {
-    return <>{column.Filter?.({ column })}</>;
+    return <>{column.Filter?.({ header, tableInstance })}</>;
   }
 
-  const filterId = `mrt-${idPrefix}-${column.id}-filter-text-field`;
-  const filterType = tableInstance.state.currentFilterTypes[column.id];
+  const filterId = `mrt-${idPrefix}-${header.id}-filter-text-field`;
+  const filterType = currentFilterTypes?.[header.id];
   const isSelectFilter = !!column.filterSelectOptions;
   const filterChipLabel =
     !(filterType instanceof Function) &&
@@ -88,7 +107,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
       : '';
   const filterPlaceholder = localization.filterByColumn?.replace(
     '{column}',
-    String(column.Header),
+    String(column.header),
   );
 
   return (
@@ -134,13 +153,14 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
         label={isSelectFilter && !filterValue ? filterPlaceholder : undefined}
         margin="none"
         placeholder={
-          filterChipLabel || isSelectFilter ? undefined : filterPlaceholder
+          filterPlaceholder
+          // filterChipLabel || isSelectFilter ? undefined : filterPlaceholder
         }
-        onChange={(e: ChangeEvent<HTMLInputElement>) => {
-          setFilterValue(e.target.value);
-          handleChange(e.target.value);
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          setFilterValue(event.target.value);
+          handleChange(event);
         }}
-        onClick={(e) => e.stopPropagation()}
+        onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
         select={isSelectFilter}
         value={filterValue ?? ''}
         variant="standard"
@@ -230,8 +250,9 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
       </TextField>
       <MRT_FilterTypeMenu
         anchorEl={anchorEl}
-        column={column}
+        header={header}
         setAnchorEl={setAnchorEl}
+        tableInstance={tableInstance}
       />
     </>
   );

package/src/inputs/MRT_SearchTextField.tsx

@@ -1,36 +1,49 @@
-import React, { ChangeEvent, FC, MouseEvent, useState } from 'react';
+import React, {
+  ChangeEvent,
+  FC,
+  MouseEvent,
+  useCallback,
+  useState,
+} from 'react';
 import {
   Collapse,
+  debounce,
   IconButton,
   InputAdornment,
   TextField,
   Tooltip,
 } from '@mui/material';
-import { useMRT } from '../useMRT';
-import { useAsyncDebounce } from 'react-table';
 import { MRT_FilterTypeMenu } from '../menus/MRT_FilterTypeMenu';
+import { MRT_TableInstance } from '..';
 
-interface Props {}
+interface Props {
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_SearchTextField: FC<Props> = () => {
+export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
   const {
-    icons: { SearchIcon, CloseIcon },
-    idPrefix,
-    localization,
-    muiSearchTextFieldProps,
-    onGlobalFilterChange,
-    tableInstance,
-  } = useMRT();
+    getState,
+    setGlobalFilter,
+    options: {
+      icons: { SearchIcon, CloseIcon },
+      idPrefix,
+      localization,
+      muiSearchTextFieldProps,
+      onGlobalFilterChange,
+    },
+  } = tableInstance;
+
+  const { globalFilter, showSearch } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState(globalFilter ?? '');
 
-  const handleChange = useAsyncDebounce(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      tableInstance.setGlobalFilter(event.target.value ?? undefined);
-      onGlobalFilterChange?.(event);
-    },
-    200,
+  const handleChange = useCallback(
+    debounce((event: ChangeEvent<HTMLInputElement>) => {
+      setGlobalFilter(event.target.value ?? undefined);
+      onGlobalFilterChange?.({ event, tableInstance });
+    }, 200),
+    [],
   );
 
   const handleGlobalFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
@@ -39,11 +52,16 @@ export const MRT_SearchTextField: FC<Props> = () => {
 
   const handleClear = () => {
     setSearchValue('');
-    tableInstance.setGlobalFilter(undefined);
+    setGlobalFilter(undefined);
   };
 
+  const textFieldProps =
+    muiSearchTextFieldProps instanceof Function
+      ? muiSearchTextFieldProps({ tableInstance })
+      : muiSearchTextFieldProps;
+
   return (
-    <Collapse in={tableInstance.state.showSearch} orientation="horizontal">
+    <Collapse in={showSearch} orientation="horizontal">
       <TextField
         id={`mrt-${idPrefix}-search-text-field`}
         placeholder={localization.search}
@@ -84,10 +102,14 @@ export const MRT_SearchTextField: FC<Props> = () => {
             </InputAdornment>
           ),
         }}
-        {...muiSearchTextFieldProps}
-        sx={{ justifySelf: 'end', ...muiSearchTextFieldProps?.sx }}
+        {...textFieldProps}
+        sx={{ justifySelf: 'end', ...textFieldProps?.sx }}
+      />
+      <MRT_FilterTypeMenu
+        anchorEl={anchorEl}
+        setAnchorEl={setAnchorEl}
+        tableInstance={tableInstance}
       />
-      <MRT_FilterTypeMenu anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
     </Collapse>
   );
 };

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,62 +1,69 @@
 import React, { ChangeEvent, FC } from 'react';
 import { Checkbox, Tooltip } from '@mui/material';
-import { useMRT } from '../useMRT';
-import type { MRT_Row } from '..';
+import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row?: MRT_Row;
   selectAll?: boolean;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
+export const MRT_SelectCheckbox: FC<Props> = ({
+  row,
+  selectAll,
+  tableInstance,
+}) => {
   const {
-    localization,
-    muiSelectCheckboxProps,
-    onSelectChange,
-    onSelectAllChange,
-    tableInstance,
-    tableInstance: {
-      state: { densePadding },
+    getRowModel,
+    getSelectedRowModel,
+    getState,
+    getToggleAllRowsSelectedProps,
+    options: {
+      isLoading,
+      localization,
+      muiSelectCheckboxProps,
+      onSelectChange,
+      onSelectAllChange,
     },
-  } = useMRT();
+  } = tableInstance;
+
+  const { isDensePadding } = getState();
 
   const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
-      tableInstance?.getToggleAllRowsSelectedProps?.()?.onChange?.(event);
-      onSelectAllChange?.(
+      getToggleAllRowsSelectedProps?.()?.onChange?.(event as any);
+      onSelectAllChange?.({
         event,
-        event.target.checked ? tableInstance.rows : [],
-      );
+        selectedRows: event.target.checked ? getRowModel().flatRows : [],
+        tableInstance,
+      });
     } else if (row) {
-      row?.getToggleRowSelectedProps()?.onChange?.(event);
-      onSelectChange?.(
+      row?.getToggleSelectedProps()?.onChange?.(event as any);
+      onSelectChange?.({
         event,
         row,
-        event.target.checked
-          ? [...tableInstance.selectedFlatRows, row]
-          : tableInstance.selectedFlatRows.filter(
+        selectedRows: event.target.checked
+          ? [...getSelectedRowModel().flatRows, row]
+          : getSelectedRowModel().flatRows.filter(
               (selectedRow) => selectedRow.id !== row.id,
             ),
-      );
+        tableInstance,
+      });
     }
   };
 
   const mTableBodyRowSelectCheckboxProps =
     muiSelectCheckboxProps instanceof Function
-      ? muiSelectCheckboxProps(selectAll, row, tableInstance)
+      ? muiSelectCheckboxProps({ isSelectAll: !!selectAll, row, tableInstance })
       : muiSelectCheckboxProps;
 
   const rtSelectCheckboxProps = selectAll
-    ? tableInstance.getToggleAllRowsSelectedProps()
-    : row?.getToggleRowSelectedProps();
+    ? getToggleAllRowsSelectedProps()
+    : row?.getToggleSelectedProps();
 
   const checkboxProps = {
-    ...mTableBodyRowSelectCheckboxProps,
     ...rtSelectCheckboxProps,
-    style: {
-      ...rtSelectCheckboxProps?.style,
-      ...mTableBodyRowSelectCheckboxProps?.style,
-    },
+    ...mTableBodyRowSelectCheckboxProps,
   };
 
   return (
@@ -69,13 +76,18 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
       }
     >
       <Checkbox
+        disabled={isLoading}
         inputProps={{
           'aria-label': selectAll
             ? localization.toggleSelectAll
             : localization.toggleSelectRow,
         }}
-        size={densePadding ? 'small' : 'medium'}
+        size={isDensePadding ? 'small' : 'medium'}
         {...checkboxProps}
+        sx={{
+          height: isDensePadding ? '1.75rem' : '2.25rem',
+          width: isDensePadding ? '1.75rem' : '2.25rem',
+        }}
         onChange={handleSelectChange}
         title={undefined}
       />

package/src/localization.ts

@@ -12,13 +12,13 @@ export interface MRT_Localization {
   edit: string;
   expand: string;
   expandAll: string;
+  filterBestMatch: string;
   filterBestMatchFirst: string;
   filterByColumn: string;
   filterContains: string;
   filterEmpty: string;
   filterEndsWith: string;
   filterEquals: string;
-  filterBestMatch: string;
   filterGreaterThan: string;
   filterLessThan: string;
   filterMode: string;
@@ -30,13 +30,18 @@ export interface MRT_Localization {
   groupedBy: string;
   hideAll: string;
   hideColumn: string;
+  pinToLeft: string;
+  pinToRight: string;
   rowActions: string;
+  rowNumber: string;
+  rowNumbers: string;
   save: string;
   search: string;
+  select: string;
   selectedCountOfRowCountRowsSelected: string;
   showAll: string;
-  showHideColumns: string;
   showAllColumns: string;
+  showHideColumns: string;
   showHideFilters: string;
   showHideSearch: string;
   sortByColumnAsc: string;
@@ -47,6 +52,7 @@ export interface MRT_Localization {
   toggleSelectAll: string;
   toggleSelectRow: string;
   ungroupByColumn: string;
+  unpin: string;
 }
 
 export const MRT_DefaultLocalization_EN: MRT_Localization = {
@@ -81,11 +87,16 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   groupedBy: 'Grouped by ',
   hideAll: 'Hide all',
   hideColumn: 'Hide {column} column',
+  pinToLeft: 'Pin to left',
+  pinToRight: 'Pin to right',
   rowActions: 'Row Actions',
+  rowNumber: '#',
+  rowNumbers: 'Row Numbers',
   save: 'Save',
   search: 'Search',
   selectedCountOfRowCountRowsSelected:
     '{selectedCount} of {rowCount} row(s) selected',
+  select: 'Select',
   showAll: 'Show all',
   showAllColumns: 'Show all columns',
   showHideColumns: 'Show/Hide columns',
@@ -99,4 +110,5 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   toggleSelectAll: 'Toggle select all',
   toggleSelectRow: 'Toggle select row',
   ungroupByColumn: 'Ungroup by {column}',
+  unpin: 'Unpin',
 };