material-react-table 0.6.3 → 0.6.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.3",
+  "version": "0.6.4",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -367,7 +367,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     ) => ReactNode;
   };
 
-export default <D extends {}>({
+export default <D extends {} = {}>({
   defaultColumn = { minWidth: 50, maxWidth: 1000 },
   filterTypes,
   globalFilter = 'fuzzy',

package/src/filtersFNs.ts

@@ -1,7 +1,7 @@
 import { matchSorter } from 'match-sorter';
 import { MRT_Row } from '.';
 
-export const fuzzyFilterFN = (
+export const fuzzy = (
   rows: MRT_Row[],
   columnIds: string[] | string,
   filterValue: string | number,
@@ -13,9 +13,9 @@ export const fuzzyFilterFN = (
     sorter: (rankedItems) => rankedItems,
   });
 
-fuzzyFilterFN.autoRemove = (val: any) => !val;
+fuzzy.autoRemove = (val: any) => !val;
 
-export const containsFilterFN = (
+export const contains = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -28,9 +28,9 @@ export const containsFilterFN = (
       .includes(filterValue.toString().toLowerCase().trim()),
   );
 
-containsFilterFN.autoRemove = (val: any) => !val;
+contains.autoRemove = (val: any) => !val;
 
-export const startsWithFilterFN = (
+export const startsWith = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -43,9 +43,9 @@ export const startsWithFilterFN = (
       .startsWith(filterValue.toString().toLowerCase().trim()),
   );
 
-startsWithFilterFN.autoRemove = (val: any) => !val;
+startsWith.autoRemove = (val: any) => !val;
 
-export const endsWithFilterFN = (
+export const endsWith = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -58,9 +58,9 @@ export const endsWithFilterFN = (
       .endsWith(filterValue.toString().toLowerCase().trim()),
   );
 
-endsWithFilterFN.autoRemove = (val: any) => !val;
+endsWith.autoRemove = (val: any) => !val;
 
-export const equalsFilterFN = (
+export const equals = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -71,9 +71,9 @@ export const equalsFilterFN = (
       filterValue.toString().toLowerCase().trim(),
   );
 
-equalsFilterFN.autoRemove = (val: any) => !val;
+equals.autoRemove = (val: any) => !val;
 
-export const notEqualsFilterFN = (
+export const notEquals = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -84,9 +84,9 @@ export const notEqualsFilterFN = (
       filterValue.toString().toLowerCase().trim(),
   );
 
-notEqualsFilterFN.autoRemove = (val: any) => !val;
+notEquals.autoRemove = (val: any) => !val;
 
-export const greaterThanFilterFN = (
+export const greaterThan = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -98,9 +98,9 @@ export const greaterThanFilterFN = (
         filterValue.toString().toLowerCase().trim(),
   );
 
-greaterThanFilterFN.autoRemove = (val: any) => !val;
+greaterThan.autoRemove = (val: any) => !val;
 
-export const lessThanFilterFN = (
+export const lessThan = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -112,33 +112,33 @@ export const lessThanFilterFN = (
         filterValue.toString().toLowerCase().trim(),
   );
 
-lessThanFilterFN.autoRemove = (val: any) => !val;
+lessThan.autoRemove = (val: any) => !val;
 
-export const emptyFilterFN = (
+export const empty = (
   rows: MRT_Row[],
   id: string,
   _filterValue: string | number,
 ) => rows.filter((row) => !row.values[id].toString().toLowerCase().trim());
 
-emptyFilterFN.autoRemove = (val: any) => !val;
+empty.autoRemove = (val: any) => !val;
 
-export const notEmptyFilterFN = (
+export const notEmpty = (
   rows: MRT_Row[],
   id: string,
   _filterValue: string | number,
 ) => rows.filter((row) => !!row.values[id].toString().toLowerCase().trim());
 
-notEmptyFilterFN.autoRemove = (val: any) => !val;
+notEmpty.autoRemove = (val: any) => !val;
 
 export const defaultFilterFNs = {
-  contains: containsFilterFN,
-  empty: emptyFilterFN,
-  endsWith: endsWithFilterFN,
-  equals: equalsFilterFN,
-  fuzzy: fuzzyFilterFN,
-  greaterThan: greaterThanFilterFN,
-  lessThan: lessThanFilterFN,
-  notEmpty: notEmptyFilterFN,
-  notEquals: notEqualsFilterFN,
-  startsWith: startsWithFilterFN,
+  contains,
+  empty,
+  endsWith,
+  equals,
+  fuzzy,
+  greaterThan,
+  lessThan,
+  notEmpty,
+  notEquals,
+  startsWith,
 };

package/src/inputs/MRT_FilterTextField.tsx

@@ -77,6 +77,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
     return <>{column.Filter?.({ column })}</>;
   }
 
+  const filterId = `mrt-${idPrefix}-${column.id}-filter-text-field`;
   const filterType = tableInstance.state.currentFilterTypes[column.id];
   const isSelectFilter = !!column.filterSelectOptions;
   const filterChipLabel =
@@ -98,7 +99,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
     <>
       <TextField
         fullWidth
-        id={`mrt-${idPrefix}-${column.id}-filter-text-field`}
+        id={filterId}
         inputProps={{
           disabled: !!filterChipLabel,
           sx: {
@@ -108,17 +109,28 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
           title: filterPlaceholder,
         }}
         helperText={
-          filterType instanceof Function
-            ? ''
-            : localization.filterMode.replace(
-                '{filterType}',
-                // @ts-ignore
-                localization[
-                  `filter${
-                    filterType.charAt(0).toUpperCase() + filterType.slice(1)
-                  }`
-                ],
-              )
+          <label htmlFor={filterId}>
+            {filterType instanceof Function
+              ? localization.filterMode.replace(
+                  '{filterType}',
+                  // @ts-ignore
+                  localization[
+                    `filter${
+                      filterType.name.charAt(0).toUpperCase() +
+                      filterType.name.slice(1)
+                    }`
+                  ] ?? '',
+                ) ?? ''
+              : localization.filterMode.replace(
+                  '{filterType}',
+                  // @ts-ignore
+                  localization[
+                    `filter${
+                      filterType.charAt(0).toUpperCase() + filterType.slice(1)
+                    }`
+                  ],
+                )}
+          </label>
         }
         FormHelperTextProps={{
           sx: { fontSize: '0.6rem', lineHeight: '0.8rem' },

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -4,16 +4,16 @@ import { useMRT } from '../useMRT';
 import type { MRT_FilterType, MRT_HeaderGroup } from '..';
 import { MRT_FILTER_TYPE } from '../enums';
 import {
-  containsFilterFN,
-  emptyFilterFN,
-  endsWithFilterFN,
-  equalsFilterFN,
-  fuzzyFilterFN,
-  greaterThanFilterFN,
-  lessThanFilterFN,
-  notEmptyFilterFN,
-  notEqualsFilterFN,
-  startsWithFilterFN,
+  contains,
+  empty,
+  endsWith,
+  equals,
+  fuzzy,
+  greaterThan,
+  lessThan,
+  notEmpty,
+  notEquals,
+  startsWith,
 } from '../filtersFNs';
 
 const commonMenuItemStyles = {
@@ -48,61 +48,61 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
         type: MRT_FILTER_TYPE.FUZZY,
         label: localization.filterFuzzy,
         divider: false,
-        fn: fuzzyFilterFN,
+        fn: fuzzy,
       },
       {
         type: MRT_FILTER_TYPE.CONTAINS,
         label: localization.filterContains,
         divider: true,
-        fn: containsFilterFN,
+        fn: contains,
       },
       {
         type: MRT_FILTER_TYPE.STARTS_WITH,
         label: localization.filterStartsWith,
         divider: false,
-        fn: startsWithFilterFN,
+        fn: startsWith,
       },
       {
         type: MRT_FILTER_TYPE.ENDS_WITH,
         label: localization.filterEndsWith,
         divider: true,
-        fn: endsWithFilterFN,
+        fn: endsWith,
       },
       {
         type: MRT_FILTER_TYPE.EQUALS,
         label: localization.filterEquals,
         divider: false,
-        fn: equalsFilterFN,
+        fn: equals,
       },
       {
         type: MRT_FILTER_TYPE.NOT_EQUALS,
         label: localization.filterNotEquals,
         divider: true,
-        fn: notEqualsFilterFN,
+        fn: notEquals,
       },
       {
         type: MRT_FILTER_TYPE.GREATER_THAN,
         label: localization.filterGreaterThan,
         divider: false,
-        fn: greaterThanFilterFN,
+        fn: greaterThan,
       },
       {
         type: MRT_FILTER_TYPE.LESS_THAN,
         label: localization.filterLessThan,
         divider: true,
-        fn: lessThanFilterFN,
+        fn: lessThan,
       },
       {
         type: MRT_FILTER_TYPE.EMPTY,
         label: localization.filterEmpty,
         divider: false,
-        fn: emptyFilterFN,
+        fn: empty,
       },
       {
         type: MRT_FILTER_TYPE.NOT_EMPTY,
         label: localization.filterNotEmpty,
         divider: false,
-        fn: notEmptyFilterFN,
+        fn: notEmpty,
       },
     ],
     [],

package/src/table/MRT_TableContainer.tsx

@@ -40,7 +40,7 @@ export const MRT_TableContainer: FC<Props> = () => {
         height: fullScreen ? '100%' : undefined,
         left: fullScreen ? '0' : undefined,
         m: fullScreen ? '0' : undefined,
-        overflowY: 'hidden',
+        overflowY: !fullScreen ? 'hidden' : undefined,
         position: fullScreen ? 'fixed' : undefined,
         right: fullScreen ? '0' : undefined,
         top: fullScreen ? '0' : undefined,

package/src/useMRT.tsx

@@ -128,7 +128,7 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
     () =>
       !props.isLoading || !!props.data.length
         ? props.data
-        : [...Array(10)].map((_) =>
+        : [...Array(10).fill(null)].map((_) =>
             Object.assign(
               {},
               ...findLowestLevelCols(props.columns).map((c) => ({