material-react-table 1.0.0-beta.16 → 1.0.0-beta.19

package/src/_locales/es.ts

@@ -1,86 +1 @@
-import { MRT_Localization } from '../MaterialReactTable';
-
-export const MRT_Localization_ES: MRT_Localization = {
-  actions: 'Actions',
-  and: 'and',
-  cancel: 'Cancel',
-  changeFilterMode: 'Change filter mode',
-  changeSearchMode: 'Change search mode',
-  clearFilter: 'Clear filter',
-  clearSearch: 'Clear search',
-  clearSort: 'Clear sort',
-  clickToCopy: 'Click to copy',
-  columnActions: 'Column Actions',
-  copiedToClipboard: 'Copied to clipboard',
-  dropToGroupBy: 'Drop to group by {column}',
-  edit: 'Edit',
-  expand: 'Expand',
-  expandAll: 'Expand all',
-  filterArrIncludes: 'Includes',
-  filterArrIncludesAll: 'Includes all',
-  filterArrIncludesSome: 'Includes',
-  filterBetween: 'Between',
-  filterBetweenInclusive: 'Between Inclusive',
-  filterByColumn: 'Filter by {column}',
-  filterContains: 'Contains',
-  filterEmpty: 'Empty',
-  filterEndsWith: 'Ends With',
-  filterEquals: 'Equals',
-  filterEqualsString: 'Equals',
-  filterFuzzy: 'Fuzzy',
-  filterGreaterThan: 'Greater Than',
-  filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
-  filterInNumberRange: 'Between',
-  filterIncludesString: 'Contains',
-  filterIncludesStringSensitive: 'Contains',
-  filterLessThan: 'Less Than',
-  filterLessThanOrEqualTo: 'Less Than Or Equal To',
-  filterMode: 'Filter Mode: {filterType}',
-  filterNotEmpty: 'Not Empty',
-  filterNotEquals: 'Not Equals',
-  filterStartsWith: 'Starts With',
-  filterWeakEquals: 'Equals',
-  filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
-  grab: 'Grab',
-  groupByColumn: 'Group by {column}',
-  groupedBy: 'Grouped by ',
-  hideAll: 'Hide all',
-  hideColumn: 'Hide {column} column',
-  max: 'Max',
-  min: 'Min',
-  move: 'Move',
-  noRecordsToDisplay: 'No records to display',
-  noResultsFound: 'No results found',
-  or: 'or',
-  pinToLeft: 'Pin to left',
-  pinToRight: 'Pin to right',
-  resetColumnSize: 'Reset column size',
-  resetOrder: 'Reset order',
-  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',
-  showHideFilters: 'Show/Hide filters',
-  showHideSearch: 'Show/Hide search',
-  sortByColumnAsc: 'Sort by {column} ascending',
-  sortByColumnDesc: 'Sort by {column} descending',
-  sortedByColumnAsc: 'Sorted by {column} ascending',
-  sortedByColumnDesc: 'Sorted by {column} descending',
-  thenBy: ', then by ',
-  toggleDensity: 'Toggle density',
-  toggleFullScreen: 'Toggle full screen',
-  toggleSelectAll: 'Toggle select all',
-  toggleSelectRow: 'Toggle select row',
-  toggleVisibility: 'Toggle visibility',
-  ungroupByColumn: 'Ungroup by {column}',
-  unpin: 'Unpin',
-  unpinAll: 'Unpin all',
-  unsorted: 'Unsorted',
-};
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/fr.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/hi.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/id.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/ja.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/nl.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/pt-BR.ts

@@ -0,0 +1,92 @@
+import { MRT_Localization } from '../MaterialReactTable';
+
+export const MRT_Localization_PT_BR: MRT_Localization = {
+  actions: 'Ações',
+  and: 'e',
+  cancel: 'Cancelar',
+  changeFilterMode: 'Alterar o modo de filtro',
+  changeSearchMode: 'Alterar o modo de pesquisa',
+  clearFilter: 'Limpar filtros',
+  clearSearch: 'Limpar pesquisa',
+  clearSort: 'Limpar classificações',
+  clickToCopy: 'Clique para copiar',
+  columnActions: 'Ações das colunas',
+  copiedToClipboard: 'Copiado para área de transferência',
+  dropToGroupBy: 'Solte para agrupar por {column}',
+  edit: 'Editar',
+  expand: 'Expandir',
+  expandAll: 'Expandir tudo',
+  filterArrIncludes: 'Inclui',
+  filterArrIncludesAll: 'Incluir tudo',
+  filterArrIncludesSome: 'Inclui alguns',
+  filterBetween: 'Entre',
+  filterBetweenInclusive: 'Entre valores incluídos',
+  filterByColumn: 'Filtrar por {column}',
+  filterContains: 'Contém',
+  filterEmpty: 'vazio',
+  filterEndsWith: 'Termina com',
+  filterEquals: 'Igual',
+  filterEqualsString: 'Igual',
+  filterFuzzy: 'Impreciso',
+  filterGreaterThan: 'Maior que',
+  filterGreaterThanOrEqualTo: 'Maior ou igual que',
+  filterInNumberRange: 'Entre',
+  filterIncludesString: 'Contém',
+  filterIncludesStringSensitive: 'Contém',
+  filterLessThan: 'Menor que',
+  filterLessThanOrEqualTo: 'Menor ou igual que',
+  filterMode: 'Modo de filtro: {filterType}',
+  filterNotEmpty: 'Não é vazio',
+  filterNotEquals: 'Não é igual',
+  filterStartsWith: 'Começa com',
+  filterWeakEquals: 'Igual',
+  filteringByColumn: 'Filtrando por {column} - {filterType} {filterValue}',
+  goToFirstPage: 'Ir para a primeira página',
+  goToLastPage: 'Ir para a última página',
+  goToNextPage: 'Ir para a próxima página',
+  goToPreviousPage: 'Ir para a página anterior',
+  grab: 'Agarrar',
+  groupByColumn: 'Agrupar por {column}',
+  groupedBy: 'Agrupado por ',
+  hideAll: 'Ocultar tudo',
+  hideColumn: 'Ocultar coluna {column}',
+  max: 'Max',
+  min: 'Min',
+  move: 'Mover',
+  noRecordsToDisplay: 'Não há registros a serem exibidos',
+  noResultsFound: 'Nenhum resultado encontrado',
+  of: 'de',
+  or: 'ou',
+  pinToLeft: 'Fixar à esquerda',
+  pinToRight: 'Fixar à direita',
+  resetColumnSize: 'Restaurar tamanho da coluna',
+  resetOrder: 'Restaurar ordem',
+  rowActions: 'Ações da linha',
+  rowNumber: '#',
+  rowNumbers: 'Número da linha',
+  rowsPerPage: 'Linhas por página',
+  save: 'Salvar',
+  search: 'Pesquisar',
+  selectedCountOfRowCountRowsSelected:
+    '{selectedCount} de {rowCount} linha(s) selecionada(s)',
+  select: 'Selecionar',
+  showAll: 'Mostrar tudo',
+  showAllColumns: 'Mostrar todas as colunas',
+  showHideColumns: 'Mostrar/Ocultar colunas',
+  showHideFilters: 'Mostrar/Ocultar filtros',
+  showHideSearch: 'Mostrar/Ocultar barra de pesquisa',
+  sortByColumnAsc: 'Ordenar por {column} em ascendente',
+  sortByColumnDesc: 'Ordenar por {column} em descendente',
+  sortedByColumnAsc: 'Ordenado por {column} em ascendente',
+  sortedByColumnDesc: 'Ordenado por {column} em descendente',
+  thenBy: ', depois por ',
+  toggleDensity: 'Alternar densidade',
+  toggleFullScreen: 'Alternar tela cheia',
+  toggleSelectAll: 'Alternar selecionar tudo',
+  toggleSelectRow: 'Alternar seleção da linha',
+  toggleVisibility: 'Alternar visibilidade',
+  ungroupByColumn: 'Desagrupar por {column}',
+  unpin: 'Desfixar',
+  unpinAll: 'Desfixar tudo',
+  unsorted: 'Desordenar',
+};

package/src/_locales/pt.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/ru.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/uk.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/vi.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/_locales/zh.ts

@@ -0,0 +1 @@
+//Not supported yet, but if you want to help, copy en.ts file contents here and translate, then make a PR

package/src/body/MRT_TableBodyRow.tsx

@@ -69,7 +69,7 @@ export const MRT_TableBodyRow: FC<Props> = ({
           backgroundColor: lighten(theme.palette.background.default, 0.06),
           opacity:
             draggingRow?.id === row.id || hoveredRow?.id === row.id ? 0.5 : 1,
-          transition: 'all 0.2s ease-in-out',
+          transition: 'all 0.1s ease-in-out',
           '&:hover td': {
             backgroundColor:
               tableRowProps?.hover !== false && getIsSomeColumnsPinned()

package/src/body/MRT_TableDetailPanel.tsx

@@ -36,7 +36,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           pb: row.getIsExpanded() ? '1rem' : 0,
           pt: row.getIsExpanded() ? '1rem' : 0,
-          transition: 'all 0.2s ease-in-out',
+          transition: 'all 0.1s ease-in-out',
           width: `${table.getTotalSize()}px`,
           ...(tableCellProps?.sx instanceof Function
             ? tableCellProps.sx(theme)

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -59,7 +59,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
                   ? -90
                   : 0
               }deg)`,
-              transition: 'transform 0.2s',
+              transition: 'transform 0.1s',
             }}
           />
         </IconButton>

package/src/buttons/MRT_ExpandButton.tsx

@@ -61,7 +61,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
                   ? -180
                   : 0
               }deg)`,
-              transition: 'transform 0.2s',
+              transition: 'transform 0.1s',
             }}
           />
         </IconButton>

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -46,7 +46,7 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
           m: 0,
           opacity: 0.5,
           p: '2px',
-          transition: 'all 0.2s ease-in-out',
+          transition: 'all 0.1s ease-in-out',
           '&:hover': {
             backgroundColor: 'transparent',
             opacity: 1,

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -8,7 +8,7 @@ const commonIconButtonStyles = {
   height: '2rem',
   ml: '10px',
   opacity: 0.5,
-  transition: 'opacity 0.2s',
+  transition: 'opacity 0.1s',
   width: '2rem',
   '&:hover': {
     opacity: 1,

package/src/column.utils.ts

@@ -233,7 +233,7 @@ export const getCommonCellStyles = ({
     column.getIsPinned() === 'right'
       ? `${getTotalRight(table, column)}px`
       : undefined,
-  transition: `all ${column.getIsResizing() ? 0 : '0.2s'} ease-in-out`,
+  transition: `all ${column.getIsResizing() ? 0 : '0.1s'} ease-in-out`,
   ...(tableCellProps?.sx instanceof Function
     ? tableCellProps.sx(theme)
     : (tableCellProps?.sx as any)),
@@ -241,3 +241,24 @@ export const getCommonCellStyles = ({
   minWidth: `max(${column.getSize()}px, ${column.columnDef.minSize ?? 30}px)`,
   width: header?.getSize() ?? column.getSize(),
 });
+
+export const MRT_DefaultColumn = {
+  minSize: 40,
+  maxSize: 1000,
+  size: 180,
+};
+
+export const MRT_DefaultDisplayColumn: Partial<MRT_ColumnDef> = {
+  columnDefType: 'display',
+  enableClickToCopy: false,
+  enableColumnActions: false,
+  enableColumnDragging: false,
+  enableColumnFilter: false,
+  enableColumnOrdering: false,
+  enableEditing: false,
+  enableGlobalFilter: false,
+  enableGrouping: false,
+  enableHiding: false,
+  enableResizing: false,
+  enableSorting: false,
+};

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -66,7 +66,7 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
             height: '2rem',
             mt: '-0.2rem',
             opacity: 0.5,
-            transition: 'opacity 0.2s',
+            transition: 'opacity 0.1s',
             width: '2rem',
             '&:hover': {
               opacity: 1,

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -42,7 +42,11 @@ export const MRT_TableHeadCellGrabHandle: FC<Props> = ({
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
     iconButtonProps?.onDragStart?.(event);
     setDraggingColumn(column);
-    event.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
+    event.dataTransfer.setDragImage(
+      tableHeadCellRef.current as HTMLElement,
+      0,
+      0,
+    );
   };
 
   const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -32,7 +32,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({ header, table }) => {
         position: 'absolute',
         right: '1px',
         touchAction: 'none',
-        transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
+        transition: column.getIsResizing() ? undefined : 'all 0.1s ease-in-out',
         userSelect: 'none',
         zIndex: 4,
         '&:active': {

package/src/table/MRT_TablePaper.tsx

@@ -40,7 +40,7 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
         }
       }}
       sx={(theme) => ({
-        transition: 'all 0.2s ease-in-out',
+        transition: 'all 0.1s ease-in-out',
         ...(tablePaperProps?.sx instanceof Function
           ? tablePaperProps?.sx(theme)
           : (tablePaperProps?.sx as any)),

package/src/toolbar/MRT_TablePagination.tsx

@@ -3,8 +3,8 @@ import { TablePagination } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props<TData extends Record<string, any> = {}> {
-  table: MRT_TableInstance<TData>;
   position: 'top' | 'bottom';
+  table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
@@ -19,6 +19,7 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
     options: {
       muiTablePaginationProps,
       enableToolbarInternalActions,
+      localization,
       rowCount,
     },
   } = table;
@@ -41,12 +42,21 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
 
   return (
     <TablePagination
-      SelectProps={{
-        sx: { m: '0 1rem 0 1ch' },
-        MenuProps: { MenuListProps: { disablePadding: true } },
-      }}
       component="div"
       count={totalRowCount}
+      getItemAriaLabel={(type) =>
+        type === 'first'
+          ? localization.goToFirstPage
+          : type === 'last'
+          ? localization.goToLastPage
+          : type === 'next'
+          ? localization.goToNextPage
+          : localization.goToPreviousPage
+      }
+      labelDisplayedRows={({ from, to, count }) =>
+        `${from}-${to} ${localization.of} ${count}`
+      }
+      labelRowsPerPage={localization.rowsPerPage}
       onPageChange={(_: any, newPage: number) => setPageIndex(newPage)}
       onRowsPerPageChange={handleChangeRowsPerPage}
       page={pageIndex}
@@ -55,6 +65,11 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
       showFirstButton={showFirstLastPageButtons}
       showLastButton={showFirstLastPageButtons}
       {...tablePaginationProps}
+      SelectProps={{
+        sx: { m: '0 1rem 0 1ch' },
+        MenuProps: { MenuListProps: { disablePadding: true }, sx: { m: 0 } },
+        ...tablePaginationProps?.SelectProps,
+      }}
       sx={(theme) => ({
         '& .MuiTablePagination-toolbar': {
           display: 'flex',

package/src/toolbar/MRT_TopToolbar.tsx

@@ -17,7 +17,7 @@ export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   minHeight: '3.5rem',
   overflow: 'hidden',
   p: '0 !important',
-  transition: 'all 0.2s ease-in-out',
+  transition: 'all 0.1s ease-in-out',
   zIndex: 1,
 });
 

package/dist/cjs/_locales/es.d.ts

@@ -1,2 +0,0 @@
-import { MRT_Localization } from '../MaterialReactTable';
-export declare const MRT_Localization_ES: MRT_Localization;

package/dist/esm/_locales/es.d.ts

@@ -1,2 +0,0 @@
-import { MRT_Localization } from '../MaterialReactTable';
-export declare const MRT_Localization_ES: MRT_Localization;