material-react-table 0.4.5 → 0.4.6

package/src/inputs/MRT_FilterTextField.tsx

@@ -1,7 +1,5 @@
 import React, { ChangeEvent, FC, useState } from 'react';
 import { IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import FilterIcon from '@mui/icons-material/FilterList';
 import { HeaderGroup, useAsyncDebounce } from 'react-table';
 import { useMRT } from '../useMRT';
 
@@ -10,7 +8,10 @@ interface Props {
 }
 
 export const MRT_FilterTextField: FC<Props> = ({ column }) => {
-  const { localization } = useMRT();
+  const {
+    icons: { FilterListIcon, CloseIcon },
+    localization,
+  } = useMRT();
 
   const [filterValue, setFilterValue] = useState('');
 
@@ -37,7 +38,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
         },
       }}
       margin="dense"
-      placeholder={localization?.filterTextFieldPlaceholder?.replace(
+      placeholder={localization.filterTextFieldPlaceholder?.replace(
         '{column}',
         String(column.Header),
       )}
@@ -52,15 +53,13 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
         startAdornment: (
           <Tooltip
             arrow
-            title={
-              localization?.filterTextFieldPlaceholder?.replace(
-                '{column}',
-                String(column.Header),
-              ) ?? ''
-            }
+            title={localization.filterTextFieldPlaceholder?.replace(
+              '{column}',
+              String(column.Header),
+            )}
           >
             <InputAdornment position="start">
-              <FilterIcon />
+              <FilterListIcon />
             </InputAdornment>
           </Tooltip>
         ),
@@ -68,11 +67,11 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
           <InputAdornment position="end">
             <Tooltip
               arrow
-              title={localization?.filterTextFieldClearButtonTitle ?? ''}
+              title={localization.filterTextFieldClearButtonTitle ?? ''}
             >
               <span>
                 <IconButton
-                  aria-label={localization?.filterTextFieldClearButtonTitle}
+                  aria-label={localization.filterTextFieldClearButtonTitle}
                   disabled={filterValue?.length === 0}
                   onClick={handleClear}
                   size="small"

package/src/inputs/MRT_SearchTextField.tsx

@@ -6,8 +6,6 @@ import {
   styled,
   TextField as MuiTextField,
 } from '@mui/material';
-import SearchIcon from '@mui/icons-material/Search';
-import CloseIcon from '@mui/icons-material/Close';
 import { useMRT } from '../useMRT';
 import { useAsyncDebounce } from 'react-table';
 
@@ -19,6 +17,7 @@ interface Props {}
 
 export const MRT_SearchTextField: FC<Props> = () => {
   const {
+    icons: { SearchIcon, CloseIcon },
     showSearch,
     localization,
     muiSearchTextFieldProps,
@@ -45,7 +44,7 @@ export const MRT_SearchTextField: FC<Props> = () => {
     <Collapse in={showSearch} orientation="horizontal">
       <TextField
         id="global-search-text-field"
-        placeholder={localization?.searchTextFieldPlaceholder}
+        placeholder={localization.searchTextFieldPlaceholder}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
           setSearchValue(event.target.value);
           handleChange(event);
@@ -61,11 +60,11 @@ export const MRT_SearchTextField: FC<Props> = () => {
           endAdornment: (
             <InputAdornment position="end">
               <IconButton
-                aria-label={localization?.searchTextFieldClearButtonTitle}
+                aria-label={localization.searchTextFieldClearButtonTitle}
                 disabled={searchValue?.length === 0}
                 onClick={handleClear}
                 size="small"
-                title={localization?.searchTextFieldClearButtonTitle}
+                title={localization.searchTextFieldClearButtonTitle}
               >
                 <CloseIcon fontSize="small" />
               </IconButton>

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -40,15 +40,15 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
         enterNextDelay={1000}
         title={
           selectAll
-            ? localization?.selectAllCheckboxTitle ?? ''
-            : localization?.selectCheckboxTitle ?? ''
+            ? localization.selectAllCheckboxTitle
+            : localization.selectCheckboxTitle
         }
       >
         <Checkbox
           inputProps={{
             'aria-label': selectAll
-              ? localization?.selectAllCheckboxTitle ?? ''
-              : localization?.selectCheckboxTitle ?? '',
+              ? localization.selectAllCheckboxTitle
+              : localization.selectCheckboxTitle,
           }}
           onChange={onSelectChange}
           {...checkboxProps}

package/src/{utils/localization.ts → localization.ts}

@@ -32,7 +32,7 @@ export interface MRT_Localization {
   toolbarAlertGroupedThenByMessage: string;
 }
 
-export const defaultLocalization: MRT_Localization = {
+export const MRT_DefaultLocalization_EN: MRT_Localization = {
   actionsHeadColumnTitle: 'Actions',
   columnActionMenuButtonTitle: 'Column Actions',
   columnActionMenuItemClearSort: 'Clear sort',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -2,11 +2,6 @@ import React, { FC } from 'react';
 import { Divider, Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { HeaderGroup } from 'react-table';
-import ClearAllIcon from '@mui/icons-material/ClearAll';
-import SortIcon from '@mui/icons-material/Sort';
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
-import FilterIcon from '@mui/icons-material/FilterList';
 
 const MenuItem = styled(MuiMenuItem)({
   display: 'flex',
@@ -31,6 +26,13 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     enableColumnGrouping,
     localization,
     setShowFilters,
+    icons: {
+      FilterListIcon,
+      SortIcon,
+      ClearAllIcon,
+      DynamicFeedIcon,
+      VisibilityOffIcon,
+    },
   } = useMRT();
 
   const handleClearSort = () => {
@@ -87,7 +89,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             disabled={!column.isSorted}
             onClick={handleClearSort}
           >
-            <ClearAllIcon /> {localization?.columnActionMenuItemClearSort}
+            <ClearAllIcon /> {localization.columnActionMenuItemClearSort}
           </MenuItem>,
           <MenuItem
             key={2}
@@ -95,7 +97,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             onClick={handleSortAsc}
           >
             <SortIcon />{' '}
-            {localization?.columnActionMenuItemSortAsc?.replace(
+            {localization.columnActionMenuItemSortAsc?.replace(
               '{column}',
               String(column.Header),
             )}
@@ -106,7 +108,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             onClick={handleSortDesc}
           >
             <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
-            {localization?.columnActionMenuItemSortDesc?.replace(
+            {localization.columnActionMenuItemSortDesc?.replace(
               '{column}',
               String(column.Header),
             )}
@@ -116,8 +118,8 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         column.canFilter && [
           <Divider key={0} />,
           <MenuItem key={1} onClick={handleFilterByColumn}>
-            <FilterIcon />{' '}
-            {localization?.filterTextFieldPlaceholder?.replace(
+            <FilterListIcon />{' '}
+            {localization.filterTextFieldPlaceholder?.replace(
               '{column}',
               String(column.Header),
             )}
@@ -128,7 +130,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           <Divider key={1} />,
           <MenuItem key={2} onClick={handleGroupByColumn}>
             <DynamicFeedIcon />{' '}
-            {localization?.[
+            {localization[
               column.isGrouped
                 ? 'columnActionMenuItemUnGroupBy'
                 : 'columnActionMenuItemGroupBy'
@@ -139,7 +141,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         <Divider key={0} />,
         <MenuItem key={1} onClick={handleHideColumn}>
           <VisibilityOffIcon />{' '}
-          {localization?.columnActionMenuItemHideColumn?.replace(
+          {localization.columnActionMenuItemHideColumn?.replace(
             '{column}',
             String(column.Header),
           )}

package/src/menus/MRT_RowActionMenu.tsx

@@ -2,7 +2,6 @@ import React, { FC } from 'react';
 import { Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { Row } from 'react-table';
-import EditIcon from '@mui/icons-material/Edit';
 
 const MenuItem = styled(MuiMenuItem)({
   display: 'flex',
@@ -23,6 +22,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
   setAnchorEl,
 }) => {
   const {
+    icons: { EditIcon },
     enableRowEditing,
     localization,
     renderRowActionMenuItems,
@@ -37,7 +37,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
     >
       {enableRowEditing && (
         <MenuItem onClick={handleEdit}>
-          <EditIcon /> {localization?.rowActionMenuItemEdit}
+          <EditIcon /> {localization.rowActionMenuItemEdit}
         </MenuItem>
       )}
       {renderRowActionMenuItems?.(row, tableInstance, () =>

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -47,7 +47,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = () => {
 
   const selectMessage =
     tableInstance.selectedFlatRows.length > 0
-      ? localization?.toolbarAlertSelectionMessage
+      ? localization.toolbarAlertSelectionMessage
           ?.replace(
             '{selectedCount}',
             tableInstance.selectedFlatRows.length.toString(),
@@ -58,10 +58,10 @@ export const MRT_ToolbarAlertBanner: FC<Props> = () => {
   const groupedByMessage =
     tableInstance.state.groupBy.length > 0 ? (
       <span>
-        {localization?.toolbarAlertGroupedByMessage}{' '}
+        {localization.toolbarAlertGroupedByMessage}{' '}
         {tableInstance.state.groupBy.map((columnId, index) => (
           <Fragment key={`${index}-${columnId}`}>
-            {index > 0 ? localization?.toolbarAlertGroupedThenByMessage : ''}
+            {index > 0 ? localization.toolbarAlertGroupedThenByMessage : ''}
             <Chip
               color="secondary"
               label={

package/src/useMRT.tsx

@@ -21,14 +21,18 @@ import {
   useSortBy,
   useTable,
 } from 'react-table';
+import { MRT_Icons } from './icons';
+import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';
 
-export interface UseMRT<D extends {} = {}> extends MaterialReactTableProps<D> {
+export type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
   anyRowsCanExpand: boolean;
   anyRowsExpanded: boolean;
   currentEditingRow: Row<D> | null;
   densePadding: boolean;
   fullScreen: boolean;
+  icons: MRT_Icons;
+  localization: MRT_Localization;
   setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
   setDensePadding: (densePadding: boolean) => void;
   setFullScreen: (fullScreen: boolean) => void;
@@ -37,7 +41,7 @@ export interface UseMRT<D extends {} = {}> extends MaterialReactTableProps<D> {
   showFilters: boolean;
   showSearch: boolean;
   tableInstance: TableInstance<D>;
-}
+};
 
 const MaterialReactTableContext = (<D extends {}>() =>
   createContext<UseMRT<D>>({} as UseMRT<D>) as Context<UseMRT<D>>)();