material-react-table 0.5.9 → 0.6.0

package/dist/menus/MRT_ShowHideColumnsMenu.d.ts

@@ -1,7 +1,8 @@
 import { FC } from 'react';
-import type { MRT_ColumnInstance } from '..';
 interface Props {
-    column: MRT_ColumnInstance;
+    anchorEl: HTMLElement | null;
+    isSubMenu?: boolean;
+    setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 export declare const MRT_ShowHideColumnsMenu: FC<Props>;
 export {};

package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import type { MRT_ColumnInstance } from '..';
+interface Props {
+    column: MRT_ColumnInstance;
+    isSubMenu?: boolean;
+}
+export declare const MRT_ShowHideColumnsMenuItems: FC<Props>;
+export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.9",
+  "version": "0.6.0",
   "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/buttons/MRT_EditActionButtons.tsx

@@ -30,17 +30,14 @@ export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
 
   return (
     <Box sx={{ display: 'flex', gap: '0.75rem' }}>
-      <Tooltip arrow title={localization.rowActionButtonCancel}>
-        <IconButton
-          aria-label={localization.rowActionButtonCancel}
-          onClick={handleCancel}
-        >
+      <Tooltip arrow title={localization.cancel}>
+        <IconButton aria-label={localization.cancel} onClick={handleCancel}>
           <CancelIcon />
         </IconButton>
       </Tooltip>
-      <Tooltip arrow title={localization.rowActionButtonSave}>
+      <Tooltip arrow title={localization.save}>
         <IconButton
-          aria-label={localization.rowActionButtonSave}
+          aria-label={localization.save}
           color="info"
           onClick={handleSave}
         >

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -20,8 +20,8 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
       sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
     >
       <IconButton
-        aria-label={localization.expandAllButtonTitle}
-        title={localization.expandAllButtonTitle}
+        aria-label={localization.expandAll}
+        title={localization.expandAll}
       >
         <DoubleArrowDownIcon
           style={{

package/src/buttons/MRT_ExpandButton.tsx

@@ -28,9 +28,9 @@ export const MRT_ExpandButton: FC<Props> = ({ row }) => {
       }}
     >
       <IconButton
-        aria-label={localization.expandButtonTitle}
+        aria-label={localization.expand}
         disabled={!row.canExpand && !renderDetailPanel}
-        title={localization.expandButtonTitle}
+        title={localization.expand}
         {...row.getToggleRowExpandedProps()}
       >
         <ExpandMoreIcon

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -15,9 +15,9 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({ ...rest }) => {
   } = useMRT();
 
   return (
-    <Tooltip arrow title={localization.toggleFullScreenButtonTitle}>
+    <Tooltip arrow title={localization.toggleFullScreen}>
       <IconButton
-        aria-label={localization.toggleFilterButtonTitle}
+        aria-label={localization.showHideFilters}
         onClick={() => setFullScreen(!fullScreen)}
         size="small"
         {...rest}

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -1,16 +1,7 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import {
-  Button,
-  IconButton,
-  Menu,
-  Tooltip,
-  Divider,
-  IconButtonProps,
-  Box,
-} from '@mui/material';
+import { IconButton, Tooltip, IconButtonProps } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
-import type { MRT_ColumnInstance } from '..';
 
 interface Props extends IconButtonProps {}
 
@@ -18,7 +9,6 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
   const {
     icons: { ViewColumnIcon },
     localization,
-    tableInstance,
   } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -29,9 +19,9 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
 
   return (
     <>
-      <Tooltip arrow title={localization.showHideColumnsButtonTitle}>
+      <Tooltip arrow title={localization.showHideColumns}>
         <IconButton
-          aria-label={localization.showHideColumnsButtonTitle}
+          aria-label={localization.showHideColumns}
           onClick={handleClick}
           size="small"
           {...rest}
@@ -39,45 +29,7 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
           <ViewColumnIcon />
         </IconButton>
       </Tooltip>
-      <Menu
-        anchorEl={anchorEl}
-        open={!!anchorEl}
-        onClose={() => setAnchorEl(null)}
-        MenuListProps={{
-          dense: tableInstance.state.densePadding,
-        }}
-      >
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            p: '0.5rem',
-          }}
-        >
-          <Button
-            disabled={
-              !tableInstance.getToggleHideAllColumnsProps().checked &&
-              !tableInstance.getToggleHideAllColumnsProps().indeterminate
-            }
-            onClick={() => tableInstance.toggleHideAllColumns(true)}
-          >
-            {localization.columnShowHideMenuHideAll}
-          </Button>
-          <Button
-            disabled={tableInstance.getToggleHideAllColumnsProps().checked}
-            onClick={() => tableInstance.toggleHideAllColumns(false)}
-          >
-            {localization.columnShowHideMenuShowAll}
-          </Button>
-        </Box>
-        <Divider />
-        {tableInstance.columns.map((column: MRT_ColumnInstance, index) => (
-          <MRT_ShowHideColumnsMenu
-            key={`${index}-${column.id}`}
-            column={column}
-          />
-        ))}
-      </Menu>
+      <MRT_ShowHideColumnsMenu anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
     </>
   );
 };

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -29,10 +29,10 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
         enterDelay={1000}
         enterNextDelay={1000}
         placement="top"
-        title={localization.columnActionMenuButtonTitle}
+        title={localization.columnActions}
       >
         <IconButton
-          aria-label={localization.columnActionMenuButtonTitle}
+          aria-label={localization.columnActions}
           onClick={handleClick}
           size="small"
           sx={{

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -15,9 +15,9 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({ ...rest }) => {
   } = useMRT();
 
   return (
-    <Tooltip arrow title={localization.toggleDensePaddingSwitchTitle}>
+    <Tooltip arrow title={localization.toggleDensePadding}>
       <IconButton
-        aria-label={localization.toggleDensePaddingSwitchTitle}
+        aria-label={localization.toggleDensePadding}
         onClick={() => setDensePadding(!densePadding)}
         size="small"
         {...rest}

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -15,9 +15,9 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ ...rest }) => {
   } = useMRT();
 
   return (
-    <Tooltip arrow title={localization.toggleFilterButtonTitle}>
+    <Tooltip arrow title={localization.showHideFilters}>
       <IconButton
-        aria-label={localization.toggleFilterButtonTitle}
+        aria-label={localization.showHideFilters}
         onClick={() => setShowFilters(!showFilters)}
         size="small"
         {...rest}

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -54,11 +54,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
       ) : row.id === tableInstance.state.currentEditingRow?.id ? (
         <MRT_EditActionButtons row={row} />
       ) : !renderRowActionMenuItems && enableRowEditing ? (
-        <Tooltip
-          placement="right"
-          arrow
-          title={localization.rowActionMenuItemEdit}
-        >
+        <Tooltip placement="right" arrow title={localization.edit}>
           <IconButton sx={commonIconButtonStyles} onClick={handleEdit}>
             <EditIcon />
           </IconButton>
@@ -69,10 +65,10 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
             arrow
             enterDelay={1000}
             enterNextDelay={1000}
-            title={localization.rowActionMenuButtonTitle}
+            title={localization.rowActions}
           >
             <IconButton
-              aria-label={localization.rowActionMenuButtonTitle}
+              aria-label={localization.rowActions}
               onClick={handleOpenRowActionMenu}
               size="small"
               sx={commonIconButtonStyles}

package/src/buttons/MRT_ToggleSearchButton.tsx

@@ -30,7 +30,7 @@ export const MRT_ToggleSearchButton: FC<Props> = ({ ...rest }) => {
   };
 
   return (
-    <Tooltip arrow title={localization.toggleSearchButtonTitle}>
+    <Tooltip arrow title={localization.showHideSearch}>
       <IconButton size="small" onClick={handleToggleSearch} {...rest}>
         {showSearch ? <SearchOffIcon /> : <SearchIcon />}
       </IconButton>

package/src/head/MRT_TableHeadCell.tsx

@@ -66,21 +66,34 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
 
   const sortTooltip = column.isSorted
     ? column.isSortedDesc
-      ? localization.columnActionMenuItemClearSort
-      : localization.columnActionMenuItemSortDesc?.replace(
+      ? localization.clearSort
+      : localization.sortByColumnDesc?.replace(
           '{column}',
           column.Header as string,
         )
-    : localization.columnActionMenuItemSortAsc?.replace(
+    : localization.sortByColumnAsc?.replace(
         '{column}',
         column.Header as string,
       );
 
+  const filterType = tableInstance.state.currentFilterTypes[column.id];
+
   const filterTooltip = !!column.filterValue
-    ? localization.filterApplied
+    ? localization.filteringByColumn
         .replace('{column}', String(column.Header))
-        .replace('{filterType}', column.filterValue)
-    : localization.toggleFilterButtonTitle;
+        .replace(
+          '{filterType}',
+          filterType instanceof Function
+            ? ''
+            : // @ts-ignore
+              localization[
+                `filter${
+                  filterType.charAt(0).toUpperCase() + filterType.slice(1)
+                }`
+              ],
+        )
+        .replace('{filterValue}', column.filterValue)
+    : localization.showHideFilters;
 
   const columnHeader = column.render('Header') as string;
 

package/src/head/MRT_TableHeadCellActions.tsx

@@ -18,7 +18,7 @@ export const MRT_TableHeadCellActions: FC<Props> = () => {
       style={{ textAlign: 'center' }}
       sx={{ ...commonTableHeadCellStyles(densePadding), textAlign: 'center' }}
     >
-      {localization.actionsHeadColumnTitle}
+      {localization.actions}
     </TableCell>
   );
 };

package/src/inputs/MRT_FilterTextField.tsx

@@ -78,14 +78,18 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
   }
 
   const filterType = tableInstance.state.currentFilterTypes[column.id];
-  const isCustomFilterType = filterType instanceof Function;
   const isSelectFilter = !!column.filterSelectOptions;
   const filterChipLabel =
-    !isCustomFilterType &&
+    !(filterType instanceof Function) &&
     [MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(
       filterType as MRT_FILTER_TYPE,
-    );
-  const filterPlaceholder = localization.filterTextFieldPlaceholder?.replace(
+    )
+      ? //@ts-ignore
+        localization[
+          `filter${filterType.charAt(0).toUpperCase() + filterType.slice(1)}`
+        ]
+      : '';
+  const filterPlaceholder = localization.filterByColumn?.replace(
     '{column}',
     String(column.Header),
   );
@@ -103,6 +107,22 @@ 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)
+                  }`
+                ],
+              )
+        }
+        FormHelperTextProps={{
+          sx: { fontSize: '0.6rem', lineHeight: '0.8rem' },
+        }}
         label={isSelectFilter && !filterValue ? filterPlaceholder : undefined}
         InputLabelProps={{
           shrink: false,
@@ -138,7 +158,10 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
                 </span>
               </Tooltip>
               {filterChipLabel && (
-                <Chip onDelete={handleClearFilterChip} label={filterType} />
+                <Chip
+                  onDelete={handleClearFilterChip}
+                  label={filterChipLabel}
+                />
               )}
             </InputAdornment>
           ),
@@ -148,11 +171,11 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
                 arrow
                 disableHoverListener={isSelectFilter}
                 placement="right"
-                title={localization.filterTextFieldClearButtonTitle ?? ''}
+                title={localization.clearFilter ?? ''}
               >
                 <span>
                   <IconButton
-                    aria-label={localization.filterTextFieldClearButtonTitle}
+                    aria-label={localization.clearFilter}
                     disabled={!filterValue?.length}
                     onClick={handleClear}
                     size="small"
@@ -170,7 +193,8 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
         }}
         {...textFieldProps}
         sx={{
-          m: '0 -0.25rem',
+          m: '-0.25rem',
+          p: 0,
           minWidth: !filterChipLabel ? '5rem' : 'auto',
           width: 'calc(100% + 0.5rem)',
           mt: isSelectFilter && !filterValue ? '-1rem' : undefined,
@@ -182,7 +206,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
       >
         {isSelectFilter && (
           <MenuItem divider disabled={!filterValue} value="">
-            {localization.filterTextFieldClearButtonTitle}
+            {localization.clearFilter}
           </MenuItem>
         )}
         {column?.filterSelectOptions?.map((option) => {

package/src/inputs/MRT_SearchTextField.tsx

@@ -34,7 +34,7 @@ export const MRT_SearchTextField: FC<Props> = () => {
     <Collapse in={tableInstance.state.showSearch} orientation="horizontal">
       <TextField
         id={`mrt-${idPrefix}-search-text-field`}
-        placeholder={localization.searchTextFieldPlaceholder}
+        placeholder={localization.search}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
           setSearchValue(event.target.value);
           handleChange(event);
@@ -50,11 +50,11 @@ export const MRT_SearchTextField: FC<Props> = () => {
           endAdornment: (
             <InputAdornment position="end">
               <IconButton
-                aria-label={localization.searchTextFieldClearButtonTitle}
+                aria-label={localization.clearSearch}
                 disabled={searchValue?.length === 0}
                 onClick={handleClear}
                 size="small"
-                title={localization.searchTextFieldClearButtonTitle}
+                title={localization.clearSearch}
               >
                 <CloseIcon fontSize="small" />
               </IconButton>

package/src/inputs/MRT_SelectCheckbox.tsx

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

package/src/localization.ts

@@ -1,99 +1,94 @@
 export interface MRT_Localization {
-  actionsHeadColumnTitle: string;
+  actions: string;
+  cancel: string;
   changeFilterMode: string;
-  columnActionMenuButtonTitle: string;
-  columnActionMenuItemClearSort: string;
-  columnActionMenuItemGroupBy: string;
-  columnActionMenuItemHideColumn: string;
-  columnActionMenuItemSortAsc: string;
-  columnActionMenuItemSortDesc: string;
-  columnActionMenuItemUnGroupBy: string;
-  columnShowHideMenuHideAll: string;
-  columnShowHideMenuShowAll: string;
-  expandAllButtonTitle: string;
-  expandButtonTitle: string;
-  filterApplied: string;
-  filterMenuItemContains: string;
-  filterMenuItemEmpty: string;
-  filterMenuItemEndsWith: string;
-  filterMenuItemEquals: string;
-  filterMenuItemFuzzy: string;
-  filterMenuItemGreaterThan: string;
-  filterMenuItemLessThan: string;
-  filterMenuItemNotEmpty: string;
-  filterMenuItemNotEquals: string;
-  filterMenuItemStartsWith: string;
-  filterMenuTitle: string;
-  filterTextFieldChangeFilterButtonTitle: string;
-  filterTextFieldChipLabelEmpty: string;
-  filterTextFieldChipLabelNotEmpty: string;
-  filterTextFieldClearButtonTitle: string;
-  filterTextFieldPlaceholder: string;
-  rowActionButtonCancel: string;
-  rowActionButtonSave: string;
-  rowActionMenuButtonTitle: string;
-  rowActionMenuItemEdit: string;
-  rowActionsColumnTitle: string;
-  searchTextFieldClearButtonTitle: string;
-  searchTextFieldPlaceholder: string;
-  selectAllCheckboxTitle: string;
-  selectCheckboxTitle: string;
-  showHideColumnsButtonTitle: string;
-  toggleDensePaddingSwitchTitle: string;
-  toggleFilterButtonTitle: string;
-  toggleFullScreenButtonTitle: string;
-  toggleSearchButtonTitle: string;
-  toolbarAlertGroupedByMessage: string;
-  toolbarAlertGroupedThenByMessage: string;
-  toolbarAlertSelectionMessage: string;
+  clearFilter: string;
+  clearSearch: string;
+  clearSort: string;
+  columnActions: string;
+  edit: string;
+  expand: string;
+  expandAll: string;
+  filterByColumn: string;
+  filterContains: string;
+  filterEmpty: string;
+  filterEndsWith: string;
+  filterEquals: string;
+  filterFuzzy: string;
+  filterGreaterThan: string;
+  filterLessThan: string;
+  filterMode: string;
+  filterNotEmpty: string;
+  filterNotEquals: string;
+  filterStartsWith: string;
+  filteringByColumn: string;
+  groupByColumn: string;
+  groupedBy: string;
+  hideAll: string;
+  hideColumn: string;
+  rowActions: string;
+  save: string;
+  search: string;
+  selectedCountOfRowCountRowsSelected: string;
+  showAll: string;
+  showHideColumns: string;
+  showAllColumns: string;
+  showHideFilters: string;
+  showHideSearch: string;
+  sortByColumnAsc: string;
+  sortByColumnDesc: string;
+  thenBy: string;
+  toggleDensePadding: string;
+  toggleFullScreen: string;
+  toggleSelectAll: string;
+  toggleSelectRow: string;
+  ungroupByColumn: string;
 }
 
 export const MRT_DefaultLocalization_EN: MRT_Localization = {
-  actionsHeadColumnTitle: 'Actions',
+  actions: 'Actions',
+  cancel: 'Cancel',
   changeFilterMode: 'Change filter mode',
-  columnActionMenuButtonTitle: 'Column Actions',
-  columnActionMenuItemClearSort: 'Clear sort',
-  columnActionMenuItemGroupBy: 'Group by {column}',
-  columnActionMenuItemHideColumn: 'Hide {column} column',
-  columnActionMenuItemSortAsc: 'Sort by {column} ascending',
-  columnActionMenuItemSortDesc: 'Sort by {column} descending',
-  columnActionMenuItemUnGroupBy: 'Ungroup by {column}',
-  columnShowHideMenuHideAll: 'Hide all',
-  columnShowHideMenuShowAll: 'Show all',
-  expandAllButtonTitle: 'Expand all',
-  expandButtonTitle: 'Expand',
-  filterApplied: 'Filtering by {column} - ({filterType})',
-  filterMenuItemContains: 'Contains Exact',
-  filterMenuItemEmpty: 'Empty',
-  filterMenuItemEndsWith: 'Ends With',
-  filterMenuItemEquals: 'Equals',
-  filterMenuItemFuzzy: 'Fuzzy Match (Default)',
-  filterMenuItemGreaterThan: 'Greater Than',
-  filterMenuItemLessThan: 'Less Than',
-  filterMenuItemNotEmpty: 'Not Empty',
-  filterMenuItemNotEquals: 'Not Equals',
-  filterMenuItemStartsWith: 'Starts With',
-  filterMenuTitle: 'Filter Mode',
-  filterTextFieldChangeFilterButtonTitle: 'Change Filter Mode',
-  filterTextFieldChipLabelEmpty: 'Empty',
-  filterTextFieldChipLabelNotEmpty: 'Not Empty',
-  filterTextFieldClearButtonTitle: 'Clear filter',
-  filterTextFieldPlaceholder: 'Filter by {column}',
-  rowActionButtonCancel: 'Cancel',
-  rowActionButtonSave: 'Save',
-  rowActionMenuButtonTitle: 'Row Actions',
-  rowActionMenuItemEdit: 'Edit',
-  rowActionsColumnTitle: 'Actions',
-  searchTextFieldClearButtonTitle: 'Clear search',
-  searchTextFieldPlaceholder: 'Search',
-  selectAllCheckboxTitle: 'Toggle select all',
-  selectCheckboxTitle: 'Toggle select row',
-  showHideColumnsButtonTitle: 'Show/Hide columns',
-  toggleDensePaddingSwitchTitle: 'Toggle dense padding',
-  toggleFilterButtonTitle: 'Show/Hide filters',
-  toggleFullScreenButtonTitle: 'Toggle full screen',
-  toggleSearchButtonTitle: 'Show/Hide search',
-  toolbarAlertGroupedByMessage: 'Grouped by ',
-  toolbarAlertGroupedThenByMessage: ', then by ',
-  toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected',
+  clearFilter: 'Clear filter',
+  clearSearch: 'Clear search',
+  clearSort: 'Clear sort',
+  columnActions: 'Column Actions',
+  edit: 'Edit',
+  expand: 'Expand',
+  expandAll: 'Expand all',
+  filterByColumn: 'Filter by {column}',
+  filterContains: 'Contains Exact',
+  filterEmpty: 'Empty',
+  filterEndsWith: 'Ends With',
+  filterEquals: 'Equals',
+  filterFuzzy: 'Fuzzy Match',
+  filterGreaterThan: 'Greater Than',
+  filterLessThan: 'Less Than',
+  filterMode: 'Filter Mode: {filterType}',
+  filterNotEmpty: 'Not Empty',
+  filterNotEquals: 'Not Equals',
+  filterStartsWith: 'Starts With',
+  filteringByColumn: 'Filtering by {column} - {filterType} "{filterValue}"',
+  groupByColumn: 'Group by {column}',
+  groupedBy: 'Grouped by ',
+  hideAll: 'Hide all',
+  hideColumn: 'Hide {column} column',
+  rowActions: 'Row Actions',
+  save: 'Save',
+  search: 'Search',
+  selectedCountOfRowCountRowsSelected:
+    '{selectedCount} of {rowCount} row(s) selected',
+  showAll: 'Show all',
+  showAllColumns: 'Show all columns',
+  showHideColumns: 'Show/Hide columns',
+  showHideFilters: 'Show/Hide filters',
+  showHideSearch: 'Show/Hide search',
+  sortByColumnAsc: 'Sort by {column} ascending',
+  sortByColumnDesc: 'Sort by {column} descending',
+  thenBy: ', then by ',
+  toggleDensePadding: 'Toggle dense padding',
+  toggleFullScreen: 'Toggle full screen',
+  toggleSelectAll: 'Toggle select all',
+  toggleSelectRow: 'Toggle select row',
+  ungroupByColumn: 'Ungroup by {column}',
 };