material-react-table 0.22.1 → 0.23.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.22.1",
+  "version": "0.23.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -68,6 +68,7 @@
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-storysource": "^6.5.9",
     "@storybook/addons": "^6.5.9",
     "@storybook/react": "^6.5.9",
     "@types/react": "^18.0.15",
@@ -98,7 +99,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
-    "@tanstack/react-table": "8.1.4",
+    "@tanstack/react-table": "8.2.2",
     "react-virtual": "^2.10.4"
   }
 }

package/src/MaterialReactTable.tsx

@@ -131,7 +131,7 @@ export type MRT_TableState<TData extends Record<string, any> = {}> =
     isLoading: boolean;
     isFullScreen: boolean;
     showAlertBanner: boolean;
-    showFilters: boolean;
+    showColumnFilters: boolean;
     showGlobalFilter: boolean;
     showProgressBars: boolean;
     showSkeletons: boolean;
@@ -338,7 +338,7 @@ export type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<
 };
 
 export type MRT_Column<TData extends Record<string, any> = {}> = Omit<
-  Column<TData>,
+  Column<TData, unknown>,
   'header' | 'footer' | 'columns' | 'columnDef' | 'filterFn'
 > & {
   columnDef: MRT_DefinedColumnDef<TData>;
@@ -349,7 +349,7 @@ export type MRT_Column<TData extends Record<string, any> = {}> = Omit<
 };
 
 export type MRT_Header<TData extends Record<string, any> = {}> = Omit<
-  Header<TData>,
+  Header<TData, unknown>,
   'column'
 > & {
   column: MRT_Column<TData>;
@@ -374,7 +374,7 @@ export type MRT_Row<TData extends Record<string, any> = {}> = Omit<
 };
 
 export type MRT_Cell<TData extends Record<string, any> = {}> = Omit<
-  Cell<TData>,
+  Cell<TData, unknown>,
   'column' | 'row'
 > & {
   column: MRT_Column<TData>;

package/src/buttons/MRT_CopyButton.tsx

@@ -50,7 +50,6 @@ export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
       title={copied ? localization.copiedToClipboard : localization.clickToCopy}
     >
       <Button
-        aria-label={localization.clickToCopy}
         onClick={() => handleCopy(cell.getValue())}
         size="small"
         type="button"

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -15,10 +15,10 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ table, ...rest }) => {
     },
     setShowFilters,
   } = table;
-  const { showFilters } = getState();
+  const { showColumnFilters } = getState();
 
   const handleToggleShowFilters = () => {
-    setShowFilters(!showFilters);
+    setShowFilters(!showColumnFilters);
   };
 
   return (
@@ -28,7 +28,7 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ table, ...rest }) => {
         onClick={handleToggleShowFilters}
         {...rest}
       >
-        {showFilters ? <FilterListOffIcon /> : <FilterListIcon />}
+        {showColumnFilters ? <FilterListOffIcon /> : <FilterListIcon />}
       </IconButton>
     </Tooltip>
   );

package/src/filtersFns.ts

@@ -4,10 +4,10 @@ import { filterFns, Row } from '@tanstack/react-table';
 export const fuzzy = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   columnId: string,
-  filterValue: string,
+  filterValue: string | number,
   addMeta: (item: RankingInfo) => void,
 ) => {
-  const itemRank = rankItem(row.getValue(columnId), filterValue, {
+  const itemRank = rankItem(row.getValue(columnId), filterValue as string, {
     threshold: rankings.MATCHES,
   });
   addMeta(itemRank);
@@ -22,7 +22,7 @@ export const contains = <TData extends Record<string, any> = {}>(
   filterValue: string | number,
 ) =>
   row
-    .getValue(id)
+    .getValue<string | number>(id)
     .toString()
     .toLowerCase()
     .trim()
@@ -36,7 +36,7 @@ export const startsWith = <TData extends Record<string, any> = {}>(
   filterValue: string | number,
 ) =>
   row
-    .getValue(id)
+    .getValue<string | number>(id)
     .toString()
     .toLowerCase()
     .trim()
@@ -50,7 +50,7 @@ export const endsWith = <TData extends Record<string, any> = {}>(
   filterValue: string | number,
 ) =>
   row
-    .getValue(id)
+    .getValue<string | number>(id)
     .toString()
     .toLowerCase()
     .trim()
@@ -63,7 +63,7 @@ export const equals = <TData extends Record<string, any> = {}>(
   id: string,
   filterValue: string | number,
 ) =>
-  row.getValue(id).toString().toLowerCase().trim() ===
+  row.getValue<string | number>(id).toString().toLowerCase().trim() ===
   filterValue.toString().toLowerCase().trim();
 
 equals.autoRemove = (val: any) => !val;
@@ -73,7 +73,7 @@ export const notEquals = <TData extends Record<string, any> = {}>(
   id: string,
   filterValue: string | number,
 ) =>
-  row.getValue(id).toString().toLowerCase().trim() !==
+  row.getValue<string | number>(id).toString().toLowerCase().trim() !==
   filterValue.toString().toLowerCase().trim();
 
 notEquals.autoRemove = (val: any) => !val;
@@ -83,9 +83,9 @@ export const greaterThan = <TData extends Record<string, any> = {}>(
   id: string,
   filterValue: string | number,
 ) =>
-  !isNaN(+filterValue) && !isNaN(+row.getValue(id))
-    ? +row.getValue(id) >= +filterValue
-    : row.getValue(id).toString().toLowerCase().trim() >
+  !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
+    ? +row.getValue<string | number>(id) >= +filterValue
+    : row.getValue<string | number>(id).toString().toLowerCase().trim() >
       filterValue.toString().toLowerCase().trim();
 
 greaterThan.autoRemove = (val: any) => !val;
@@ -95,9 +95,9 @@ export const lessThan = <TData extends Record<string, any> = {}>(
   id: string,
   filterValue: string | number,
 ) =>
-  !isNaN(+filterValue) && !isNaN(+row.getValue(id))
-    ? +row.getValue(id) <= +filterValue
-    : row.getValue(id).toString().toLowerCase().trim() <
+  !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
+    ? +row.getValue<string | number>(id) <= +filterValue
+    : row.getValue<string | number>(id).toString().toLowerCase().trim() <
       filterValue.toString().toLowerCase().trim();
 
 lessThan.autoRemove = (val: any) => !val;
@@ -121,7 +121,7 @@ export const empty = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   _filterValue: string | number,
-) => !row.getValue(id).toString().trim();
+) => !row.getValue<string | number>(id).toString().trim();
 
 empty.autoRemove = (val: any) => !val;
 
@@ -129,7 +129,7 @@ export const notEmpty = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   _filterValue: string | number,
-) => !!row.getValue(id).toString().trim();
+) => !!row.getValue<string | number>(id).toString().trim();
 
 notEmpty.autoRemove = (val: any) => !val;
 

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -14,11 +14,11 @@ export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
   table,
 }) => {
   const { getState } = table;
-  const { currentFilterFns, showFilters } = getState();
+  const { currentFilterFns, showColumnFilters } = getState();
   const { column } = header;
 
   return (
-    <Collapse in={showFilters} mountOnEnter unmountOnExit>
+    <Collapse in={showColumnFilters} mountOnEnter unmountOnExit>
       {currentFilterFns[column.id] === 'between' ? (
         <MRT_FilterRangeFields header={header} table={table} />
       ) : (

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -12,7 +12,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({ header, table }) => {
     getState,
     options: { columnResizeMode },
   } = table;
-  const { density, showFilters } = getState();
+  const { density, showColumnFilters } = getState();
   const { column } = header;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
@@ -26,7 +26,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({ header, table }) => {
         borderRadius: '2px',
         borderRightWidth: '2px',
         cursor: 'col-resize',
-        height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
+        height: showColumnFilters && columnDefType === 'data' ? '4rem' : '2rem',
         mr: density === 'compact' ? '-0.5rem' : '-1rem',
         opacity: 0.8,
         position: 'absolute',

package/src/inputs/MRT_EditCellTextField.tsx

@@ -29,7 +29,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
   const { column, row } = cell;
   const { columnDef } = column;
 
-  const [value, setValue] = useState(cell.getValue());
+  const [value, setValue] = useState(cell.getValue<string>());
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);

package/src/table/MRT_TableRoot.tsx

@@ -65,8 +65,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const [showAlertBanner, setShowAlertBanner] = useState(
     props.initialState?.showAlertBanner ?? false,
   );
-  const [showFilters, setShowFilters] = useState(
-    initialState?.showFilters ?? false,
+  const [showColumnFilters, setShowFilters] = useState(
+    initialState?.showColumnFilters ?? false,
   );
   const [showGlobalFilter, setShowGlobalFilter] = useState(
     initialState?.showGlobalFilter ?? false,
@@ -230,7 +230,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         density,
         isFullScreen,
         showAlertBanner,
-        showFilters,
+        showColumnFilters,
         showGlobalFilter,
         ...props.state,
       } as TableState,

package/src/utils.ts

@@ -85,7 +85,10 @@ export const getLeadingDisplayColumnIds = <
     ((props.positionActionsColumn === 'first' && props.enableRowActions) ||
       (props.enableEditing && props.editingMode === 'row')) &&
       'mrt-row-actions',
-    (props.enableExpanding || props.enableGrouping) && 'mrt-expand',
+    (props.enableExpanding ||
+      props.enableGrouping ||
+      props.renderDetailPanel) &&
+      'mrt-expand',
     props.enableRowSelection && 'mrt-select',
     props.enableRowNumbers && 'mrt-row-numbers',
   ].filter(Boolean) as string[];