material-react-table 1.10.0 → 1.11.0

package/src/_locales/id.ts

@@ -0,0 +1,95 @@
+import type { MRT_Localization } from '../MaterialReactTable';
+
+export const MRT_Localization_ID: MRT_Localization = {
+  actions: 'Aksi',
+  and: 'dan',
+  cancel: 'Batal',
+  changeFilterMode: 'Ubah mode filter',
+  changeSearchMode: 'Ubah mode pencarian',
+  clearFilter: 'Hapus filter',
+  clearSearch: 'Hapus pencarian',
+  clearSort: 'Hapus urutan',
+  clickToCopy: 'Klik untuk menyalin',
+  collapse: 'Ciutkan',
+  collapseAll: 'Ciutkan semua',
+  columnActions: 'Aksi Kolom',
+  copiedToClipboard: 'Disalin ke papan klip',
+  dropToGroupBy: 'Jatuhkan untuk mengelompokkan berdasarkan {column}',
+  edit: 'Ubah',
+  expand: 'Bentangkan',
+  expandAll: 'Bentangkan semua',
+  filterArrIncludes: 'Termasuk',
+  filterArrIncludesAll: 'Termasuk semua',
+  filterArrIncludesSome: 'Termasuk',
+  filterBetween: 'Antara',
+  filterBetweenInclusive: 'Antara Inklusif',
+  filterByColumn: 'Filter berdasarkan {column}',
+  filterContains: 'Berisi',
+  filterEmpty: 'Kosong',
+  filterEndsWith: 'Berakhir Dengan',
+  filterEquals: 'Sama dengan',
+  filterEqualsString: 'Sama dengan',
+  filterFuzzy: 'Fuzzy',
+  filterGreaterThan: 'Lebih Dari',
+  filterGreaterThanOrEqualTo: 'Lebih Dari Atau Sama Dengan',
+  filterInNumberRange: 'Antara',
+  filterIncludesString: 'Berisi',
+  filterIncludesStringSensitive: 'Berisi',
+  filterLessThan: 'Kurang Dari',
+  filterLessThanOrEqualTo: 'Kurang Dari Atau Sama Dengan',
+  filterMode: 'Mode Filter: {filterType}',
+  filterNotEmpty: 'Tidak Kosong',
+  filterNotEquals: 'Tidak Sama Dengan',
+  filterStartsWith: 'Dimulai Dengan',
+  filterWeakEquals: 'Sama Dengan',
+  filteringByColumn:
+    'Memfilter berdasarkan {column} - {filterType} {filterValue}',
+  goToFirstPage: 'Pergi ke halaman pertama',
+  goToLastPage: 'Pergi ke halaman terakhir',
+  goToNextPage: 'Pergi ke halaman berikutnya',
+  goToPreviousPage: 'Pergi ke halaman sebelumnya',
+  grab: 'Ambil',
+  groupByColumn: 'Kelompokkan berdasarkan {column}',
+  groupedBy: 'Dikelompokkan berdasarkan ',
+  hideAll: 'Sembunyikan semua',
+  hideColumn: 'Sembunyikan kolom {column}',
+  max: 'Maks',
+  min: 'Min',
+  move: 'Pindah',
+  noRecordsToDisplay: 'Tidak ada data untuk ditampilkan',
+  noResultsFound: 'Tidak ada hasil yang ditemukan',
+  of: 'dari',
+  or: 'atau',
+  pinToLeft: 'Sematkan ke kiri',
+  pinToRight: 'Sematkan ke kanan',
+  resetColumnSize: 'Reset ukuran kolom',
+  resetOrder: 'Reset urutan',
+  rowActions: 'Aksi Baris',
+  rowNumber: '#',
+  rowNumbers: 'Nomor Baris',
+  rowsPerPage: 'Baris per halaman',
+  save: 'Simpan',
+  search: 'Cari',
+  selectedCountOfRowCountRowsSelected:
+    '{selectedCount} dari {rowCount} baris dipilih',
+  select: 'Pilih',
+  showAll: 'Tampilkan semua',
+  showAllColumns: 'Tampilkan semua kolom',
+  showHideColumns: 'Tampilkan/Sembunyikan kolom',
+  showHideFilters: 'Tampilkan/Sembunyikan filter',
+  showHideSearch: 'Tampilkan/Sembunyikan pencarian',
+  sortByColumnAsc: 'Urutkan berdasarkan {column} menaik',
+  sortByColumnDesc: 'Urutkan berdasarkan {column} menurun',
+  sortedByColumnAsc: 'Diurutkan berdasarkan {column} menaik',
+  sortedByColumnDesc: 'Diurutkan berdasarkan {column} menurun',
+  thenBy: ', lalu berdasarkan ',
+  toggleDensity: 'Beralih kepadatan',
+  toggleFullScreen: 'Beralih layar penuh',
+  toggleSelectAll: 'Beralih pilih semua',
+  toggleSelectRow: 'Beralih pilih baris',
+  toggleVisibility: 'Beralih visibilitas',
+  ungroupByColumn: 'Batalkan pengelompokan berdasarkan {column}',
+  unpin: 'Lepaskan sematan',
+  unpinAll: 'Lepaskan semua sematan',
+  unsorted: 'Tidak diurutkan',
+};

package/src/head/MRT_TableHeadCell.tsx

@@ -177,7 +177,7 @@ export const MRT_TableHeadCell = ({ header, table }: Props) => {
         <Box
           className="Mui-TableHeadCell-Content"
           sx={{
-            alignItems: 'flex-start',
+            alignItems: 'center',
             display: 'flex',
             flexDirection:
               tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
@@ -213,7 +213,7 @@ export const MRT_TableHeadCell = ({ header, table }: Props) => {
             <Box
               className="Mui-TableHeadCell-Content-Wrapper"
               sx={{
-                minWidth: '5ch',
+                minWidth: `${Math.min(columnDef.header.length, 5)}ch`,
                 overflow: columnDefType === 'data' ? 'hidden' : undefined,
                 textOverflow: 'ellipsis',
                 whiteSpace:

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -33,7 +33,7 @@ export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
         cursor: 'col-resize',
         mr: density === 'compact' ? '-0.75rem' : '-1rem',
         position: 'absolute',
-        right: '1px',
+        right: '4px',
         px: '4px',
         '&:active > hr': {
           backgroundColor: theme.palette.info.main,

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -5,7 +5,6 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
-import { MRT_ShowHideColumnsMenu } from './MRT_ShowHideColumnsMenu';
 import type { MRT_Header, MRT_TableInstance } from '..';
 
 export const commonMenuItemStyles = {
@@ -67,12 +66,11 @@ export const MRT_ColumnActionMenu = ({
   } = table;
   const { column } = header;
   const { columnDef } = column;
-  const { columnSizing, columnVisibility, density } = getState();
+  const { columnSizing, columnVisibility, density, showColumnFilters } =
+    getState();
 
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
     useState<null | HTMLElement>(null);
-  const [showHideColumnsMenuAnchorEl, setShowHideColumnsMenuAnchorEl] =
-    useState<null | HTMLElement>(null);
 
   const handleClearSort = () => {
     column.clearSorting();
@@ -132,13 +130,6 @@ export const MRT_ColumnActionMenu = ({
     setFilterMenuAnchorEl(event.currentTarget);
   };
 
-  const handleOpenShowHideColumnsMenu = (
-    event: React.MouseEvent<HTMLElement>,
-  ) => {
-    event.stopPropagation();
-    setShowHideColumnsMenuAnchorEl(event.currentTarget);
-  };
-
   const isSelectFilter = !!columnDef.filterSelectOptions;
 
   const allowedColumnFilterOptions =
@@ -238,6 +229,7 @@ export const MRT_ColumnActionMenu = ({
             </Box>
           </MenuItem>,
           <MenuItem
+            disabled={showColumnFilters && !enableColumnFilterModes}
             divider={enableGrouping || enableHiding}
             key={1}
             onClick={handleFilterByColumn}
@@ -386,22 +378,7 @@ export const MRT_ColumnActionMenu = ({
               String(columnDef.header),
             )}
           </Box>
-          <IconButton
-            onClick={handleOpenShowHideColumnsMenu}
-            onMouseEnter={handleOpenShowHideColumnsMenu}
-            size="small"
-            sx={{ p: 0 }}
-          >
-            <ArrowRightIcon />
-          </IconButton>
         </MenuItem>,
-        <MRT_ShowHideColumnsMenu
-          anchorEl={showHideColumnsMenuAnchorEl}
-          isSubMenu
-          key={2}
-          setAnchorEl={setShowHideColumnsMenuAnchorEl}
-          table={table}
-        />,
       ]}
     </Menu>
   );

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -18,7 +18,6 @@ export const MRT_ShowHideColumnsMenu = <
   TData extends Record<string, any> = {},
 >({
   anchorEl,
-  isSubMenu,
   setAnchorEl,
   table,
 }: Props<TData>) => {
@@ -88,12 +87,12 @@ export const MRT_ShowHideColumnsMenu = <
       <Box
         sx={{
           display: 'flex',
-          justifyContent: isSubMenu ? 'center' : 'space-between',
+          justifyContent: 'space-between',
           p: '0.5rem',
           pt: 0,
         }}
       >
-        {!isSubMenu && enableHiding && (
+        {enableHiding && (
           <Button
             disabled={!getIsSomeColumnsVisible()}
             onClick={hideAllColumns}
@@ -101,7 +100,7 @@ export const MRT_ShowHideColumnsMenu = <
             {localization.hideAll}
           </Button>
         )}
-        {!isSubMenu && enableColumnOrdering && (
+        {enableColumnOrdering && (
           <Button
             onClick={() =>
               table.setColumnOrder(
@@ -112,7 +111,7 @@ export const MRT_ShowHideColumnsMenu = <
             {localization.resetOrder}
           </Button>
         )}
-        {!isSubMenu && enablePinning && (
+        {enablePinning && (
           <Button
             disabled={!getIsSomeColumnsPinned()}
             onClick={() => table.resetColumnPinning(true)}
@@ -135,7 +134,6 @@ export const MRT_ShowHideColumnsMenu = <
           allColumns={allColumns}
           column={column}
           hoveredColumn={hoveredColumn}
-          isSubMenu={isSubMenu}
           key={`${index}-${column.id}`}
           setHoveredColumn={setHoveredColumn}
           table={table}

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -20,7 +20,6 @@ interface Props<TData extends Record<string, any> = {}> {
   allColumns: MRT_Column<TData>[];
   column: MRT_Column<TData>;
   hoveredColumn: MRT_Column<TData> | null;
-  isSubMenu?: boolean;
   setHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
   table: MRT_TableInstance<TData>;
 }
@@ -32,7 +31,6 @@ export const MRT_ShowHideColumnsMenuItems = <
   hoveredColumn,
   setHoveredColumn,
   column,
-  isSubMenu,
   table,
 }: Props<TData>) => {
   const {
@@ -115,8 +113,7 @@ export const MRT_ShowHideColumnsMenuItems = <
             gap: '8px',
           }}
         >
-          {!isSubMenu &&
-            columnDefType !== 'group' &&
+          {columnDefType !== 'group' &&
             enableColumnOrdering &&
             !allColumns.some(
               (col) => col.columnDef.columnDefType === 'group',
@@ -130,8 +127,7 @@ export const MRT_ShowHideColumnsMenuItems = <
             ) : (
               <Box sx={{ width: '28px' }} />
             ))}
-          {!isSubMenu &&
-            enablePinning &&
+          {enablePinning &&
             (column.getCanPin() ? (
               <MRT_ColumnPinningButtons column={column} table={table} />
             ) : (
@@ -158,7 +154,7 @@ export const MRT_ShowHideColumnsMenuItems = <
                   <Switch />
                 </Tooltip>
               }
-              disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
+              disabled={!column.getCanHide()}
               label={columnDef.header}
               onChange={() => handleToggleColumnHidden(column)}
             />
@@ -174,7 +170,6 @@ export const MRT_ShowHideColumnsMenuItems = <
           allColumns={allColumns}
           column={c}
           hoveredColumn={hoveredColumn}
-          isSubMenu={isSubMenu}
           key={`${i}-${c.id}`}
           setHoveredColumn={setHoveredColumn}
           table={table}