material-react-table 2.9.2 → 2.10.0

package/src/locales/vi.ts

@@ -10,6 +10,7 @@ export const MRT_Localization_VI: MRT_Localization = {
   clearSearch: 'Xoá ô tìm kiếm',
   clearSort: 'Huỷ sắp xếp',
   clickToCopy: 'Nhấn vào để sao chép',
+  copy: 'Sao chép',
   columnActions: 'Lựa chọn',
   copiedToClipboard: 'Sao chép vào bảng tạm',
   collapse: 'Thu gọn',

package/src/locales/zh-Hans.ts

@@ -10,6 +10,7 @@ export const MRT_Localization_ZH_HANS: MRT_Localization = {
   clearSearch: '清除搜索',
   clearSort: '清除排序',
   clickToCopy: '点击以复制',
+  copy: '复制',
   collapse: '折叠',
   collapseAll: '全部折叠',
   columnActions: '列操作',

package/src/locales/zh-Hant.ts

@@ -10,6 +10,7 @@ export const MRT_Localization_ZH_HANT: MRT_Localization = {
   clearSearch: '清除搜尋',
   clearSort: '清除排序',
   clickToCopy: '點擊以複製',
+  copy: '複製',
   collapse: '折疊',
   collapseAll: '全部折疊',
   columnActions: '欄位動作',

package/src/types.ts

@@ -176,6 +176,7 @@ export interface MRT_Localization {
   collapseAll: string;
   columnActions: string;
   copiedToClipboard: string;
+  copy: string;
   dropToGroupBy: string;
   edit: string;
   expand: string;
@@ -315,17 +316,19 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   getTopRows: () => MRT_Row<TData>[];
   options: MRT_StatefulTableOptions<TData>;
   refs: {
-    bottomToolbarRef: MutableRefObject<HTMLDivElement>;
+    actionCellRef: MutableRefObject<HTMLTableCellElement | null>;
+    bottomToolbarRef: MutableRefObject<HTMLDivElement | null>;
     editInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
     filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
-    searchInputRef: MutableRefObject<HTMLInputElement>;
-    tableContainerRef: MutableRefObject<HTMLDivElement>;
-    tableFooterRef: MutableRefObject<HTMLTableSectionElement>;
+    searchInputRef: MutableRefObject<HTMLInputElement | null>;
+    tableContainerRef: MutableRefObject<HTMLDivElement | null>;
+    tableFooterRef: MutableRefObject<HTMLTableSectionElement | null>;
     tableHeadCellRefs: MutableRefObject<Record<string, HTMLTableCellElement>>;
-    tableHeadRef: MutableRefObject<HTMLTableSectionElement>;
-    tablePaperRef: MutableRefObject<HTMLDivElement>;
-    topToolbarRef: MutableRefObject<HTMLDivElement>;
+    tableHeadRef: MutableRefObject<HTMLTableSectionElement | null>;
+    tablePaperRef: MutableRefObject<HTMLDivElement | null>;
+    topToolbarRef: MutableRefObject<HTMLDivElement | null>;
   };
+  setActionCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
   setColumnFilterFns: Dispatch<SetStateAction<MRT_ColumnFilterFnsState>>;
   setCreatingRow: Dispatch<SetStateAction<MRT_Row<TData> | null | true>>;
   setDensity: Dispatch<SetStateAction<MRT_DensityState>>;
@@ -376,6 +379,7 @@ export type MRT_StatefulTableOptions<TData extends MRT_RowData> =
   };
 
 export type MRT_TableState<TData extends MRT_RowData> = TableState & {
+  actionCell?: MRT_Cell<TData> | null;
   columnFilterFns: MRT_ColumnFilterFnsState;
   creatingRow: MRT_Row<TData> | null;
   density: MRT_DensityState;
@@ -503,7 +507,10 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
       }) => DropdownOption[])
     | DropdownOption[];
   editVariant?: 'select' | 'text';
-  enableClickToCopy?: boolean;
+  enableClickToCopy?:
+    | 'context-menu'
+    | ((cell: MRT_Cell<TData>) => 'context-menu' | boolean)
+    | boolean;
   enableColumnActions?: boolean;
   enableColumnDragging?: boolean;
   enableColumnFilterModes?: boolean;
@@ -642,6 +649,16 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
         table: MRT_TableInstance<TData>;
       }) => TableCellProps)
     | TableCellProps;
+  renderCellActionMenuItems?: (props: {
+    cell: MRT_Cell<TData>;
+    closeMenu: () => void;
+    column: MRT_Column<TData>;
+    internalMenuItems: ReactNode[];
+    row: MRT_Row<TData>;
+    staticColumnIndex?: number;
+    staticRowIndex?: number;
+    table: MRT_TableInstance<TData>;
+  }) => ReactNode[];
   renderColumnActionsMenuItems?: (props: {
     closeMenu: () => void;
     column: MRT_Column<TData>;
@@ -833,7 +850,11 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   }>;
   editDisplayMode?: 'cell' | 'custom' | 'modal' | 'row' | 'table';
   enableBottomToolbar?: boolean;
-  enableClickToCopy?: boolean;
+  enableCellActions?: ((cell: MRT_Cell<TData>) => boolean) | boolean;
+  enableClickToCopy?:
+    | 'context-menu'
+    | ((cell: MRT_Cell<TData>) => 'context-menu' | boolean)
+    | boolean;
   enableColumnActions?: boolean;
   enableColumnDragging?: boolean;
   enableColumnFilterModes?: boolean;
@@ -1115,6 +1136,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   muiTopToolbarProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => BoxProps)
     | BoxProps;
+  onActionCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
   onColumnFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
   onCreatingRowCancel?: (props: {
     row: MRT_Row<TData>;
@@ -1167,6 +1189,16 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   renderCaption?:
     | ((props: { table: MRT_TableInstance<TData> }) => ReactNode)
     | ReactNode;
+  renderCellActionMenuItems?: (props: {
+    cell: MRT_Cell<TData>;
+    closeMenu: () => void;
+    column: MRT_Column<TData>;
+    internalMenuItems: ReactNode[];
+    row: MRT_Row<TData>;
+    staticColumnIndex?: number;
+    staticRowIndex?: number;
+    table: MRT_TableInstance<TData>;
+  }) => ReactNode[];
   renderColumnActionsMenuItems?: (props: {
     closeMenu: () => void;
     column: MRT_Column<TData>;

package/src/utils/cell.utils.ts

@@ -0,0 +1,50 @@
+import {
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+import { parseFromValuesOrFunc } from './utils';
+
+export const isCellEditable = <TData extends MRT_RowData>({
+  cell,
+  table,
+}: {
+  cell: MRT_Cell<TData>;
+  table: MRT_TableInstance<TData>;
+}) => {
+  const { enableEditing } = table.options;
+  const {
+    column: { columnDef },
+    row,
+  } = cell;
+  return (
+    !cell.getIsPlaceholder() &&
+    parseFromValuesOrFunc(enableEditing, row) &&
+    parseFromValuesOrFunc(columnDef.enableEditing, row) !== false
+  );
+};
+
+export const openEditingCell = <TData extends MRT_RowData>({
+  cell,
+  table,
+}: {
+  cell: MRT_Cell<TData>;
+  table: MRT_TableInstance<TData>;
+}) => {
+  const {
+    options: { editDisplayMode },
+    refs: { editInputRefs },
+  } = table;
+  const { column } = cell;
+
+  if (isCellEditable({ cell, table }) && editDisplayMode === 'cell') {
+    table.setEditingCell(cell);
+    queueMicrotask(() => {
+      const textField = editInputRefs.current[column.id];
+      if (textField) {
+        textField.focus();
+        textField.select?.();
+      }
+    });
+  }
+};

package/src/utils/displayColumn.utils.ts

@@ -31,21 +31,21 @@ export function defaultDisplayColumnProps<TData extends MRT_RowData>({
 
 export const showRowPinningColumn = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-) => {
+): boolean => {
   const { enableRowPinning, rowPinningDisplayMode } = tableOptions;
-  return enableRowPinning && !rowPinningDisplayMode?.startsWith('select');
+  return !!(enableRowPinning && !rowPinningDisplayMode?.startsWith('select'));
 };
 
 export const showRowDragColumn = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-) => {
+): boolean => {
   const { enableRowDragging, enableRowOrdering } = tableOptions;
-  return enableRowDragging || enableRowOrdering;
+  return !!(enableRowDragging || enableRowOrdering);
 };
 
 export const showRowExpandColumn = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-) => {
+): boolean => {
   const {
     enableExpanding,
     enableGrouping,
@@ -61,7 +61,7 @@ export const showRowExpandColumn = <TData extends MRT_RowData>(
 
 export const showRowActionsColumn = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-) => {
+): boolean => {
   const {
     createDisplayMode,
     editDisplayMode,
@@ -69,7 +69,7 @@ export const showRowActionsColumn = <TData extends MRT_RowData>(
     enableRowActions,
     state: { creatingRow },
   } = tableOptions;
-  return (
+  return !!(
     enableRowActions ||
     (creatingRow && createDisplayMode === 'row') ||
     (enableEditing && ['modal', 'row'].includes(editDisplayMode ?? ''))
@@ -78,15 +78,15 @@ export const showRowActionsColumn = <TData extends MRT_RowData>(
 
 export const showRowSelectionColumn = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-) => tableOptions.enableRowSelection;
+): boolean => !!tableOptions.enableRowSelection;
 
 export const showRowNumbersColumn = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-) => tableOptions.enableRowNumbers;
+): boolean => !!tableOptions.enableRowNumbers;
 
 export const showRowSpacerColumn = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-) => tableOptions.layoutMode === 'grid-no-grow';
+): boolean => tableOptions.layoutMode === 'grid-no-grow';
 
 export const getLeadingDisplayColumnIds = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
@@ -119,16 +119,34 @@ export const getTrailingDisplayColumnIds = <TData extends MRT_RowData>(
 
 export const getDefaultColumnOrderIds = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
+  reset = false,
 ) => {
-  const leadingDisplayCols: string[] = getLeadingDisplayColumnIds(tableOptions);
-  const trailingDisplayCols: string[] =
+  const {
+    state: { columnOrder: currentColumnOrderIds = [] },
+  } = tableOptions;
+
+  const leadingDisplayColIds: string[] =
+    getLeadingDisplayColumnIds(tableOptions);
+  const trailingDisplayColIds: string[] =
     getTrailingDisplayColumnIds(tableOptions);
-  const allLeafColumnDefs = getAllLeafColumnDefs(tableOptions.columns)
-    .map((columnDef) => getColumnId(columnDef))
-    .filter(
-      (columnId) =>
-        !leadingDisplayCols.includes(columnId) &&
-        !trailingDisplayCols.includes(columnId),
-    );
-  return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
+
+  const defaultColumnDefIds = getAllLeafColumnDefs(tableOptions.columns).map(
+    (columnDef) => getColumnId(columnDef),
+  );
+
+  let allLeafColumnDefIds = reset
+    ? defaultColumnDefIds
+    : Array.from(new Set([...currentColumnOrderIds, ...defaultColumnDefIds]));
+
+  allLeafColumnDefIds = allLeafColumnDefIds.filter(
+    (colId) =>
+      !leadingDisplayColIds.includes(colId) &&
+      !trailingDisplayColIds.includes(colId),
+  );
+
+  return [
+    ...leadingDisplayColIds,
+    ...allLeafColumnDefIds,
+    ...trailingDisplayColIds,
+  ];
 };

package/src/hooks/display-columns/getMRT_DisplayColumns.tsx

@@ -1,26 +0,0 @@
-import {
-  type MRT_ColumnDef,
-  type MRT_RowData,
-  type MRT_StatefulTableOptions,
-} from '../../types';
-import { getMRT_RowActionsColumnDef } from './getMRT_RowActionsColumnDef';
-import { getMRT_RowDragColumnDef } from './getMRT_RowDragColumnDef';
-import { getMRT_RowExpandColumnDef } from './getMRT_RowExpandColumnDef';
-import { getMRT_RowNumbersColumnDef } from './getMRT_RowNumbersColumnDef';
-import { getMRT_RowPinningColumnDef } from './getMRT_RowPinningColumnDef';
-import { getMRT_RowSelectColumnDef } from './getMRT_RowSelectColumnDef';
-import { getMRT_RowSpacerColumnDef } from './getMRT_RowSpacerColumnDef';
-
-export const getMRT_DisplayColumns = <TData extends MRT_RowData>(
-  tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData>[] => {
-  return [
-    getMRT_RowNumbersColumnDef(tableOptions),
-    getMRT_RowSelectColumnDef(tableOptions),
-    getMRT_RowExpandColumnDef(tableOptions),
-    getMRT_RowActionsColumnDef(tableOptions),
-    getMRT_RowDragColumnDef(tableOptions),
-    getMRT_RowPinningColumnDef(tableOptions),
-    getMRT_RowSpacerColumnDef(tableOptions),
-  ].filter(Boolean) as MRT_ColumnDef<TData>[];
-};

package/src/locales/am.ts

@@ -1,94 +0,0 @@
-import { type MRT_Localization } from '..';
-
-export const MRT_Localization_AM: MRT_Localization = {
-  actions: 'እግር',
-  and: 'እና',
-  cancel: 'ሰርዝ',
-  changeFilterMode: 'በማጣጣት የተቋቋኸውን ይቀይር',
-  changeSearchMode: 'በደጋገሚ የተጠቀሰከውን ይቀይር',
-  clearFilter: 'ተጠናቀቁ',
-  clearSearch: 'የይላላ ግባብውን ይሰርዝ',
-  clearSort: 'የማጣጣትውን ይሰረዝ',
-  clickToCopy: 'ከሁሉም ተዘጋጅላቸው ይከፍሉ',
-  collapse: 'ርክበ',
-  collapseAll: 'ሁሉንም ርክበ',
-  columnActions: 'ሁሉንም ማጠናከሪያዎች',
-  copiedToClipboard: 'የተቀደሰውን ብለን ይከፈሉ',
-  dropToGroupBy: 'ለ{column} የቡና ቦታ ወደጥዋት ይዘገቡ',
-  edit: 'አስተካክ',
-  expand: 'ጠቀሱ',
-  expandAll: 'ሁሉንም ጠቀሱ',
-  filterArrIncludes: 'አካሉን አስፈልጎ',
-  filterArrIncludesAll: 'አካሉን ሁሉንም አስፈልጎ',
-  filterArrIncludesSome: 'አካሉን ያለሁሉን አስፈልጎ',
-  filterBetween: 'እና',
-  filterBetweenInclusive: 'እና',
-  filterByColumn: '{column} በአካል ማጣጣት',
-  filterContains: 'የነሀበቱ አካል',
-  filterEmpty: 'ትናት የለው',
-  filterEndsWith: 'የመጨረሻው እብዎች',
-  filterEquals: 'ከተማ',
-  filterEqualsString: 'ከተማ',
-  filterFuzzy: 'አስተናገር',
-  filterGreaterThan: 'ድጋሜ',
-  filterGreaterThanOrEqualTo: 'ድጋሜ ወይስ ትናት',
-  filterInNumberRange: 'እና',
-  filterIncludesString: 'አካሉን አስፈልጎ',
-  filterIncludesStringSensitive: 'አካሉን አስፈልጎ',
-  filterLessThan: 'ትናት',
-  filterLessThanOrEqualTo: 'ትናት ወይስ ድጋሜ',
-  filterMode: 'የቡና አካል: {filterType}',
-  filterNotEmpty: 'ከለዎ',
-  filterNotEquals: 'ከተማ የለው',
-  filterStartsWith: 'የመጀሳው እብዎች',
-  filterWeakEquals: 'ከተማ',
-  filteringByColumn: '{column} በማጣጣት - {filterType} {filterValue}',
-  goToFirstPage: 'ወደ መመለሻ ገጽ ይሂዱ',
-  goToLastPage: 'ወደ መጨረሻ ገጽ ይሂዱ',
-  goToNextPage: 'ወደ ቀጣይ ገጽ ይሂዱ',
-  goToPreviousPage: 'ወደ ቀጣይ ገጽ ይሂዱ',
-  grab: 'ቆይ',
-  groupByColumn: '{column} ቡና',
-  groupedBy: 'ቡና ቦታ ',
-  hideAll: 'ሁሉንም ደገን',
-  hideColumn: '{column} አካልን ደገን',
-  max: 'ከፍተኛ',
-  min: 'ከሚካሄዱ',
-  move: 'እርምጃ',
-  noRecordsToDisplay: 'ምንም የተለየም አልነበረም',
-  noResultsFound: 'ምንም አልተገኘም',
-  of: 'ከ',
-  or: 'ወይም',
-  pin: 'ቀዝቃኛ',
-  pinToLeft: 'ወደ ግራ ቀዝቃኛ',
-  pinToRight: 'ወደ ቀኝ ቀዝቃኛ',
-  resetColumnSize: 'አካል መልክ ይስጥ',
-  resetOrder: 'ማጣጣት ይስጥ',
-  rowActions: 'ከሚከባቡ ማጠናከሪያዎች',
-  rowNumber: '#',
-  rowNumbers: 'የስም ቁጥሮች',
-  rowsPerPage: 'በገቢ የቁጥር ቁጥሮች',
-  save: 'አስቀምጥ',
-  search: 'ፈልግ',
-  selectedCountOfRowCountRowsSelected:
-    'የ{rowCount} ቁጥሮች ውስጠ የ{selectedCount} ሁኔ አምስቱ ቁጥሮች',
-  select: 'ይምረጡ',
-  showAll: 'ሁሉንም አሳ',
-  showAllColumns: 'ሁሉንም አሳ',
-  showHideColumns: 'ማጋጣሚዎችን አሳ/ሲክም',
-  showHideFilters: 'ማጣጣዎችን አሳ/ሲክም',
-  showHideSearch: 'ፍለጎችን አሳ/ሲክም',
-  sortByColumnAsc: '{column} በለዋሉ ማጣጣት',
-  sortByColumnDesc: '{column} በታዋሉ ማጣጣት',
-  sortedByColumnAsc: '{column} በለዋሉ ነቀላዋሉ',
-  sortedByColumnDesc: '{column} በታዋሉ ነቀላዋሉ',
-  thenBy: 'እና',
-  toggleDensity: 'ባዝላምውን አሳ/ሲክም',
-  toggleFullScreen: 'የሙሉ ማሳያ አሳ/ሲክም',
-  toggleSelectAll: 'ሁሉንም ይምረጡ/ይላል',
-  toggleSelectRow: 'ቁጥሮችን ይምረጡ/ይላል',
-  toggleVisibility: 'አሳ/ሲክም',
-  ungroupByColumn: 'ቡና ማጣጣት ይከፍሉ',
-  unpin: 'ቀዝቃኛን ቀዝቃኛን ይከፍሉ',
-  unpinAll: 'ሁሉንም ቀዝቃኛን ቀዝቃኛን ይከፍሉ',
-};