material-react-table 2.9.1 → 2.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +162 -111
- package/dist/index.esm.js +739 -639
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +741 -639
- package/dist/index.js.map +1 -1
- package/locales/ar/index.esm.js +1 -0
- package/locales/ar/index.js +1 -0
- package/locales/az/index.esm.js +1 -0
- package/locales/az/index.js +1 -0
- package/locales/bg/index.esm.js +1 -0
- package/locales/bg/index.js +1 -0
- package/locales/cs/index.esm.js +1 -0
- package/locales/cs/index.js +1 -0
- package/locales/da/index.esm.js +1 -0
- package/locales/da/index.js +1 -0
- package/locales/de/index.esm.js +1 -0
- package/locales/de/index.js +1 -0
- package/locales/en/index.esm.js +1 -0
- package/locales/en/index.js +1 -0
- package/locales/es/index.esm.js +1 -0
- package/locales/es/index.js +1 -0
- package/locales/et/index.esm.js +1 -0
- package/locales/et/index.js +1 -0
- package/locales/fa/index.esm.js +1 -0
- package/locales/fa/index.js +1 -0
- package/locales/fi/index.esm.js +1 -0
- package/locales/fi/index.js +1 -0
- package/locales/fr/index.esm.js +1 -0
- package/locales/fr/index.js +1 -0
- package/locales/he/index.esm.js +1 -0
- package/locales/he/index.js +1 -0
- package/locales/hu/index.esm.js +1 -0
- package/locales/hu/index.js +1 -0
- package/locales/hy/index.esm.js +1 -0
- package/locales/hy/index.js +1 -0
- package/locales/id/index.esm.js +1 -0
- package/locales/id/index.js +1 -0
- package/locales/it/index.esm.js +1 -0
- package/locales/it/index.js +1 -0
- package/locales/ja/index.esm.js +1 -0
- package/locales/ja/index.js +1 -0
- package/locales/ko/index.esm.js +1 -0
- package/locales/ko/index.js +1 -0
- package/locales/nl/index.esm.js +1 -0
- package/locales/nl/index.js +1 -0
- package/locales/no/index.esm.js +1 -0
- package/locales/no/index.js +1 -0
- package/locales/np/index.esm.js +1 -0
- package/locales/np/index.js +1 -0
- package/locales/pl/index.esm.js +1 -0
- package/locales/pl/index.js +1 -0
- package/locales/pt/index.esm.js +1 -0
- package/locales/pt/index.js +1 -0
- package/locales/pt-BR/index.esm.js +1 -0
- package/locales/pt-BR/index.js +1 -0
- package/locales/ro/index.esm.js +1 -0
- package/locales/ro/index.js +1 -0
- package/locales/ru/index.esm.js +1 -0
- package/locales/ru/index.js +1 -0
- package/locales/sk/index.esm.js +1 -0
- package/locales/sk/index.js +1 -0
- package/locales/sr-Cyrl-RS/index.esm.js +1 -0
- package/locales/sr-Cyrl-RS/index.js +1 -0
- package/locales/sr-Latn-RS/index.esm.js +1 -0
- package/locales/sr-Latn-RS/index.js +1 -0
- package/locales/sv/index.esm.js +1 -0
- package/locales/sv/index.js +1 -0
- package/locales/tr/index.esm.js +1 -0
- package/locales/tr/index.js +1 -0
- package/locales/uk/index.esm.js +1 -0
- package/locales/uk/index.js +1 -0
- package/locales/vi/index.esm.js +1 -0
- package/locales/vi/index.js +1 -0
- package/locales/zh-Hans/index.esm.js +1 -0
- package/locales/zh-Hans/index.js +1 -0
- package/locales/zh-Hant/index.esm.js +1 -0
- package/locales/zh-Hant/index.js +1 -0
- package/package.json +11 -11
- package/src/components/body/MRT_TableBodyCell.tsx +41 -37
- package/src/components/body/MRT_TableBodyRow.tsx +15 -21
- package/src/components/buttons/MRT_CopyButton.tsx +1 -0
- package/src/components/footer/MRT_TableFooter.tsx +1 -1
- package/src/components/footer/MRT_TableFooterCell.tsx +2 -4
- package/src/components/footer/MRT_TableFooterRow.tsx +1 -0
- package/src/components/head/MRT_TableHeadCell.tsx +6 -6
- package/src/components/head/MRT_TableHeadCellFilterLabel.tsx +1 -0
- package/src/components/head/MRT_TableHeadRow.tsx +6 -1
- package/src/components/inputs/MRT_EditCellTextField.tsx +4 -1
- package/src/components/inputs/MRT_FilterTextField.tsx +1 -0
- package/src/components/menus/MRT_ActionMenuItem.tsx +60 -0
- package/src/components/menus/MRT_CellActionMenu.tsx +108 -0
- package/src/components/menus/MRT_ColumnActionMenu.tsx +90 -170
- package/src/components/menus/MRT_FilterOptionMenu.tsx +7 -14
- package/src/components/menus/MRT_RowActionMenu.tsx +8 -15
- package/src/components/menus/MRT_ShowHideColumnsMenu.tsx +4 -1
- package/src/components/table/MRT_Table.tsx +1 -0
- package/src/components/table/MRT_TableContainer.tsx +4 -0
- package/src/components/toolbar/MRT_TablePagination.tsx +14 -5
- package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx +1 -8
- package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx +1 -8
- package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx +1 -8
- package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx +1 -8
- package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx +1 -8
- package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx +1 -8
- package/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx +1 -8
- package/src/hooks/useMRT_Effects.ts +10 -0
- package/src/hooks/useMRT_TableInstance.ts +112 -59
- package/src/icons.ts +2 -0
- package/src/index.ts +2 -0
- package/src/locales/ar.ts +1 -0
- package/src/locales/az.ts +1 -0
- package/src/locales/bg.ts +1 -0
- package/src/locales/cs.ts +1 -0
- package/src/locales/da.ts +1 -0
- package/src/locales/de.ts +1 -0
- package/src/locales/en.ts +1 -0
- package/src/locales/es.ts +1 -0
- package/src/locales/et.ts +1 -0
- package/src/locales/fa.ts +1 -0
- package/src/locales/fi.ts +1 -0
- package/src/locales/fr.ts +1 -0
- package/src/locales/he.ts +1 -0
- package/src/locales/hu.ts +1 -0
- package/src/locales/hy.ts +1 -0
- package/src/locales/id.ts +1 -0
- package/src/locales/it.ts +1 -0
- package/src/locales/ja.ts +1 -0
- package/src/locales/ko.ts +1 -0
- package/src/locales/nl.ts +1 -0
- package/src/locales/no.ts +1 -0
- package/src/locales/np.ts +1 -0
- package/src/locales/pl.ts +1 -0
- package/src/locales/pt-BR.ts +1 -0
- package/src/locales/pt.ts +1 -0
- package/src/locales/ro.ts +1 -0
- package/src/locales/ru.ts +1 -0
- package/src/locales/sk.ts +1 -0
- package/src/locales/sr-Cyrl-RS.ts +1 -0
- package/src/locales/sr-Latn-RS.ts +1 -0
- package/src/locales/sv.ts +1 -0
- package/src/locales/tr.ts +1 -0
- package/src/locales/uk.ts +1 -0
- package/src/locales/vi.ts +1 -0
- package/src/locales/zh-Hans.ts +1 -0
- package/src/locales/zh-Hant.ts +1 -0
- package/src/types.ts +41 -9
- package/src/utils/cell.utils.ts +50 -0
- package/src/utils/displayColumn.utils.ts +38 -20
- package/src/utils/style.utils.ts +17 -4
- package/src/hooks/display-columns/getMRT_DisplayColumns.tsx +0 -26
- package/src/locales/am.ts +0 -94
package/src/locales/pt.ts
CHANGED
|
@@ -10,6 +10,7 @@ export const MRT_Localization_PT: MRT_Localization = {
|
|
|
10
10
|
clearSearch: 'Limpar pesquisa',
|
|
11
11
|
clearSort: 'Limpar classificações',
|
|
12
12
|
clickToCopy: 'Clique para copiar',
|
|
13
|
+
copy: 'Copiar',
|
|
13
14
|
collapse: 'Recolher',
|
|
14
15
|
collapseAll: 'Recolher tudo',
|
|
15
16
|
columnActions: 'Ações das colunas',
|
package/src/locales/ro.ts
CHANGED
|
@@ -10,6 +10,7 @@ export const MRT_Localization_RO: MRT_Localization = {
|
|
|
10
10
|
clearSearch: 'Curăță căutarea',
|
|
11
11
|
clearSort: 'Curăță sortarea',
|
|
12
12
|
clickToCopy: 'Apasă pentru a copia',
|
|
13
|
+
copy: 'Copiază',
|
|
13
14
|
collapse: 'Restrânge',
|
|
14
15
|
collapseAll: 'Restrânge tot',
|
|
15
16
|
columnActions: 'Acțiuni Coloană',
|
package/src/locales/ru.ts
CHANGED
|
@@ -10,6 +10,7 @@ export const MRT_Localization_RU: MRT_Localization = {
|
|
|
10
10
|
clearSearch: 'Очистить поиск',
|
|
11
11
|
clearSort: 'Очистить сортировку',
|
|
12
12
|
clickToCopy: 'Нажмите, чтобы скопировать',
|
|
13
|
+
copy: 'Копировать',
|
|
13
14
|
columnActions: 'Действие колонки',
|
|
14
15
|
copiedToClipboard: 'Скопировано в буфер обмена',
|
|
15
16
|
collapse: 'Свернуть',
|
package/src/locales/sk.ts
CHANGED
|
@@ -10,6 +10,7 @@ export const MRT_Localization_SK: MRT_Localization = {
|
|
|
10
10
|
clearSearch: 'Vyčistiť hľadanie',
|
|
11
11
|
clearSort: 'Vyčistiť zoradenie',
|
|
12
12
|
clickToCopy: 'Kliknutím skopírovať',
|
|
13
|
+
copy: 'Kopírovať',
|
|
13
14
|
collapse: 'Zbaliť',
|
|
14
15
|
collapseAll: 'Zbaliť všetko',
|
|
15
16
|
columnActions: 'Akcie stĺpca',
|
|
@@ -10,6 +10,7 @@ export const MRT_Localization_SR_CYRL_RS: MRT_Localization = {
|
|
|
10
10
|
clearSearch: 'Поништи претрагу',
|
|
11
11
|
clearSort: 'Поништи сортирање',
|
|
12
12
|
clickToCopy: 'Кликни да копираш',
|
|
13
|
+
copy: 'Копирај',
|
|
13
14
|
collapse: 'Рашири',
|
|
14
15
|
collapseAll: 'Рашири све',
|
|
15
16
|
columnActions: 'Акције над колонама',
|
|
@@ -10,6 +10,7 @@ export const MRT_Localization_SR_LATN_RS: MRT_Localization = {
|
|
|
10
10
|
clearSearch: 'Poništi pretragu',
|
|
11
11
|
clearSort: 'Poništi sortiranje',
|
|
12
12
|
clickToCopy: 'Klikni da kopiraš',
|
|
13
|
+
copy: 'Kopiraj',
|
|
13
14
|
collapse: 'Raširi',
|
|
14
15
|
collapseAll: 'Raširi sve',
|
|
15
16
|
columnActions: 'Akcije nad kolonama',
|
package/src/locales/sv.ts
CHANGED
|
@@ -10,6 +10,7 @@ export const MRT_Localization_SV: MRT_Localization = {
|
|
|
10
10
|
clearSearch: 'Rensa sök',
|
|
11
11
|
clearSort: 'Rensa sortering',
|
|
12
12
|
clickToCopy: 'Klicka för att kopiera',
|
|
13
|
+
copy: 'Kopiera',
|
|
13
14
|
collapse: 'Stäng',
|
|
14
15
|
collapseAll: 'Stäng alla',
|
|
15
16
|
columnActions: 'Kolumnåtgärd',
|
package/src/locales/tr.ts
CHANGED
|
@@ -10,6 +10,7 @@ export const MRT_Localization_TR: MRT_Localization = {
|
|
|
10
10
|
clearSearch: 'Aramayı Temizle',
|
|
11
11
|
clearSort: 'Sıralamayı Sıfırla',
|
|
12
12
|
clickToCopy: 'Kopyala',
|
|
13
|
+
copy: 'Kopyala',
|
|
13
14
|
columnActions: 'Sütun İşlemleri',
|
|
14
15
|
copiedToClipboard: 'Panoya Kopyalandı',
|
|
15
16
|
collapse: 'Daralt',
|
package/src/locales/uk.ts
CHANGED
|
@@ -10,6 +10,7 @@ export const MRT_Localization_UK: MRT_Localization = {
|
|
|
10
10
|
clearSearch: 'Очистити пошук',
|
|
11
11
|
clearSort: 'Очистити сортування',
|
|
12
12
|
clickToCopy: 'Натисніть, щоб скопіювати',
|
|
13
|
+
copy: 'Копіювати',
|
|
13
14
|
collapse: 'Згорнути',
|
|
14
15
|
collapseAll: 'Згорнути все',
|
|
15
16
|
columnActions: 'Дії стовпця',
|
package/src/locales/vi.ts
CHANGED
|
@@ -10,6 +10,7 @@ export const MRT_Localization_VI: MRT_Localization = {
|
|
|
10
10
|
clearSearch: 'Xoá ô tìm kiếm',
|
|
11
11
|
clearSort: 'Huỷ sắp xếp',
|
|
12
12
|
clickToCopy: 'Nhấn vào để sao chép',
|
|
13
|
+
copy: 'Sao chép',
|
|
13
14
|
columnActions: 'Lựa chọn',
|
|
14
15
|
copiedToClipboard: 'Sao chép vào bảng tạm',
|
|
15
16
|
collapse: 'Thu gọn',
|
package/src/locales/zh-Hans.ts
CHANGED
package/src/locales/zh-Hant.ts
CHANGED
package/src/types.ts
CHANGED
|
@@ -176,6 +176,7 @@ export interface MRT_Localization {
|
|
|
176
176
|
collapseAll: string;
|
|
177
177
|
columnActions: string;
|
|
178
178
|
copiedToClipboard: string;
|
|
179
|
+
copy: string;
|
|
179
180
|
dropToGroupBy: string;
|
|
180
181
|
edit: string;
|
|
181
182
|
expand: string;
|
|
@@ -315,17 +316,19 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
|
|
|
315
316
|
getTopRows: () => MRT_Row<TData>[];
|
|
316
317
|
options: MRT_StatefulTableOptions<TData>;
|
|
317
318
|
refs: {
|
|
318
|
-
|
|
319
|
+
actionCellRef: MutableRefObject<HTMLTableCellElement | null>;
|
|
320
|
+
bottomToolbarRef: MutableRefObject<HTMLDivElement | null>;
|
|
319
321
|
editInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
|
|
320
322
|
filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
|
|
321
|
-
searchInputRef: MutableRefObject<HTMLInputElement>;
|
|
322
|
-
tableContainerRef: MutableRefObject<HTMLDivElement>;
|
|
323
|
-
tableFooterRef: MutableRefObject<HTMLTableSectionElement>;
|
|
323
|
+
searchInputRef: MutableRefObject<HTMLInputElement | null>;
|
|
324
|
+
tableContainerRef: MutableRefObject<HTMLDivElement | null>;
|
|
325
|
+
tableFooterRef: MutableRefObject<HTMLTableSectionElement | null>;
|
|
324
326
|
tableHeadCellRefs: MutableRefObject<Record<string, HTMLTableCellElement>>;
|
|
325
|
-
tableHeadRef: MutableRefObject<HTMLTableSectionElement>;
|
|
326
|
-
tablePaperRef: MutableRefObject<HTMLDivElement>;
|
|
327
|
-
topToolbarRef: MutableRefObject<HTMLDivElement>;
|
|
327
|
+
tableHeadRef: MutableRefObject<HTMLTableSectionElement | null>;
|
|
328
|
+
tablePaperRef: MutableRefObject<HTMLDivElement | null>;
|
|
329
|
+
topToolbarRef: MutableRefObject<HTMLDivElement | null>;
|
|
328
330
|
};
|
|
331
|
+
setActionCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
|
|
329
332
|
setColumnFilterFns: Dispatch<SetStateAction<MRT_ColumnFilterFnsState>>;
|
|
330
333
|
setCreatingRow: Dispatch<SetStateAction<MRT_Row<TData> | null | true>>;
|
|
331
334
|
setDensity: Dispatch<SetStateAction<MRT_DensityState>>;
|
|
@@ -376,6 +379,7 @@ export type MRT_StatefulTableOptions<TData extends MRT_RowData> =
|
|
|
376
379
|
};
|
|
377
380
|
|
|
378
381
|
export type MRT_TableState<TData extends MRT_RowData> = TableState & {
|
|
382
|
+
actionCell?: MRT_Cell<TData> | null;
|
|
379
383
|
columnFilterFns: MRT_ColumnFilterFnsState;
|
|
380
384
|
creatingRow: MRT_Row<TData> | null;
|
|
381
385
|
density: MRT_DensityState;
|
|
@@ -503,7 +507,10 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
|
|
|
503
507
|
}) => DropdownOption[])
|
|
504
508
|
| DropdownOption[];
|
|
505
509
|
editVariant?: 'select' | 'text';
|
|
506
|
-
enableClickToCopy?:
|
|
510
|
+
enableClickToCopy?:
|
|
511
|
+
| 'context-menu'
|
|
512
|
+
| ((cell: MRT_Cell<TData>) => 'context-menu' | boolean)
|
|
513
|
+
| boolean;
|
|
507
514
|
enableColumnActions?: boolean;
|
|
508
515
|
enableColumnDragging?: boolean;
|
|
509
516
|
enableColumnFilterModes?: boolean;
|
|
@@ -642,6 +649,16 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
|
|
|
642
649
|
table: MRT_TableInstance<TData>;
|
|
643
650
|
}) => TableCellProps)
|
|
644
651
|
| TableCellProps;
|
|
652
|
+
renderCellActionMenuItems?: (props: {
|
|
653
|
+
cell: MRT_Cell<TData>;
|
|
654
|
+
closeMenu: () => void;
|
|
655
|
+
column: MRT_Column<TData>;
|
|
656
|
+
internalMenuItems: ReactNode[];
|
|
657
|
+
row: MRT_Row<TData>;
|
|
658
|
+
staticColumnIndex?: number;
|
|
659
|
+
staticRowIndex?: number;
|
|
660
|
+
table: MRT_TableInstance<TData>;
|
|
661
|
+
}) => ReactNode[];
|
|
645
662
|
renderColumnActionsMenuItems?: (props: {
|
|
646
663
|
closeMenu: () => void;
|
|
647
664
|
column: MRT_Column<TData>;
|
|
@@ -833,7 +850,11 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
|
|
|
833
850
|
}>;
|
|
834
851
|
editDisplayMode?: 'cell' | 'custom' | 'modal' | 'row' | 'table';
|
|
835
852
|
enableBottomToolbar?: boolean;
|
|
836
|
-
|
|
853
|
+
enableCellActions?: ((cell: MRT_Cell<TData>) => boolean) | boolean;
|
|
854
|
+
enableClickToCopy?:
|
|
855
|
+
| 'context-menu'
|
|
856
|
+
| ((cell: MRT_Cell<TData>) => 'context-menu' | boolean)
|
|
857
|
+
| boolean;
|
|
837
858
|
enableColumnActions?: boolean;
|
|
838
859
|
enableColumnDragging?: boolean;
|
|
839
860
|
enableColumnFilterModes?: boolean;
|
|
@@ -1115,6 +1136,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
|
|
|
1115
1136
|
muiTopToolbarProps?:
|
|
1116
1137
|
| ((props: { table: MRT_TableInstance<TData> }) => BoxProps)
|
|
1117
1138
|
| BoxProps;
|
|
1139
|
+
onActionCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
|
|
1118
1140
|
onColumnFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
|
|
1119
1141
|
onCreatingRowCancel?: (props: {
|
|
1120
1142
|
row: MRT_Row<TData>;
|
|
@@ -1167,6 +1189,16 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
|
|
|
1167
1189
|
renderCaption?:
|
|
1168
1190
|
| ((props: { table: MRT_TableInstance<TData> }) => ReactNode)
|
|
1169
1191
|
| ReactNode;
|
|
1192
|
+
renderCellActionMenuItems?: (props: {
|
|
1193
|
+
cell: MRT_Cell<TData>;
|
|
1194
|
+
closeMenu: () => void;
|
|
1195
|
+
column: MRT_Column<TData>;
|
|
1196
|
+
internalMenuItems: ReactNode[];
|
|
1197
|
+
row: MRT_Row<TData>;
|
|
1198
|
+
staticColumnIndex?: number;
|
|
1199
|
+
staticRowIndex?: number;
|
|
1200
|
+
table: MRT_TableInstance<TData>;
|
|
1201
|
+
}) => ReactNode[];
|
|
1170
1202
|
renderColumnActionsMenuItems?: (props: {
|
|
1171
1203
|
closeMenu: () => void;
|
|
1172
1204
|
column: MRT_Column<TData>;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import {
|
|
2
|
+
type MRT_Cell,
|
|
3
|
+
type MRT_RowData,
|
|
4
|
+
type MRT_TableInstance,
|
|
5
|
+
} from '../types';
|
|
6
|
+
import { parseFromValuesOrFunc } from './utils';
|
|
7
|
+
|
|
8
|
+
export const isCellEditable = <TData extends MRT_RowData>({
|
|
9
|
+
cell,
|
|
10
|
+
table,
|
|
11
|
+
}: {
|
|
12
|
+
cell: MRT_Cell<TData>;
|
|
13
|
+
table: MRT_TableInstance<TData>;
|
|
14
|
+
}) => {
|
|
15
|
+
const { enableEditing } = table.options;
|
|
16
|
+
const {
|
|
17
|
+
column: { columnDef },
|
|
18
|
+
row,
|
|
19
|
+
} = cell;
|
|
20
|
+
return (
|
|
21
|
+
!cell.getIsPlaceholder() &&
|
|
22
|
+
parseFromValuesOrFunc(enableEditing, row) &&
|
|
23
|
+
parseFromValuesOrFunc(columnDef.enableEditing, row) !== false
|
|
24
|
+
);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export const openEditingCell = <TData extends MRT_RowData>({
|
|
28
|
+
cell,
|
|
29
|
+
table,
|
|
30
|
+
}: {
|
|
31
|
+
cell: MRT_Cell<TData>;
|
|
32
|
+
table: MRT_TableInstance<TData>;
|
|
33
|
+
}) => {
|
|
34
|
+
const {
|
|
35
|
+
options: { editDisplayMode },
|
|
36
|
+
refs: { editInputRefs },
|
|
37
|
+
} = table;
|
|
38
|
+
const { column } = cell;
|
|
39
|
+
|
|
40
|
+
if (isCellEditable({ cell, table }) && editDisplayMode === 'cell') {
|
|
41
|
+
table.setEditingCell(cell);
|
|
42
|
+
queueMicrotask(() => {
|
|
43
|
+
const textField = editInputRefs.current[column.id];
|
|
44
|
+
if (textField) {
|
|
45
|
+
textField.focus();
|
|
46
|
+
textField.select?.();
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
};
|
|
@@ -31,21 +31,21 @@ export function defaultDisplayColumnProps<TData extends MRT_RowData>({
|
|
|
31
31
|
|
|
32
32
|
export const showRowPinningColumn = <TData extends MRT_RowData>(
|
|
33
33
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
|
34
|
-
) => {
|
|
34
|
+
): boolean => {
|
|
35
35
|
const { enableRowPinning, rowPinningDisplayMode } = tableOptions;
|
|
36
|
-
return enableRowPinning && !rowPinningDisplayMode?.startsWith('select');
|
|
36
|
+
return !!(enableRowPinning && !rowPinningDisplayMode?.startsWith('select'));
|
|
37
37
|
};
|
|
38
38
|
|
|
39
39
|
export const showRowDragColumn = <TData extends MRT_RowData>(
|
|
40
40
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
|
41
|
-
) => {
|
|
41
|
+
): boolean => {
|
|
42
42
|
const { enableRowDragging, enableRowOrdering } = tableOptions;
|
|
43
|
-
return enableRowDragging || enableRowOrdering;
|
|
43
|
+
return !!(enableRowDragging || enableRowOrdering);
|
|
44
44
|
};
|
|
45
45
|
|
|
46
46
|
export const showRowExpandColumn = <TData extends MRT_RowData>(
|
|
47
47
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
|
48
|
-
) => {
|
|
48
|
+
): boolean => {
|
|
49
49
|
const {
|
|
50
50
|
enableExpanding,
|
|
51
51
|
enableGrouping,
|
|
@@ -61,7 +61,7 @@ export const showRowExpandColumn = <TData extends MRT_RowData>(
|
|
|
61
61
|
|
|
62
62
|
export const showRowActionsColumn = <TData extends MRT_RowData>(
|
|
63
63
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
|
64
|
-
) => {
|
|
64
|
+
): boolean => {
|
|
65
65
|
const {
|
|
66
66
|
createDisplayMode,
|
|
67
67
|
editDisplayMode,
|
|
@@ -69,7 +69,7 @@ export const showRowActionsColumn = <TData extends MRT_RowData>(
|
|
|
69
69
|
enableRowActions,
|
|
70
70
|
state: { creatingRow },
|
|
71
71
|
} = tableOptions;
|
|
72
|
-
return (
|
|
72
|
+
return !!(
|
|
73
73
|
enableRowActions ||
|
|
74
74
|
(creatingRow && createDisplayMode === 'row') ||
|
|
75
75
|
(enableEditing && ['modal', 'row'].includes(editDisplayMode ?? ''))
|
|
@@ -78,15 +78,15 @@ export const showRowActionsColumn = <TData extends MRT_RowData>(
|
|
|
78
78
|
|
|
79
79
|
export const showRowSelectionColumn = <TData extends MRT_RowData>(
|
|
80
80
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
|
81
|
-
) => tableOptions.enableRowSelection;
|
|
81
|
+
): boolean => !!tableOptions.enableRowSelection;
|
|
82
82
|
|
|
83
83
|
export const showRowNumbersColumn = <TData extends MRT_RowData>(
|
|
84
84
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
|
85
|
-
) => tableOptions.enableRowNumbers;
|
|
85
|
+
): boolean => !!tableOptions.enableRowNumbers;
|
|
86
86
|
|
|
87
87
|
export const showRowSpacerColumn = <TData extends MRT_RowData>(
|
|
88
88
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
|
89
|
-
) => tableOptions.layoutMode === 'grid-no-grow';
|
|
89
|
+
): boolean => tableOptions.layoutMode === 'grid-no-grow';
|
|
90
90
|
|
|
91
91
|
export const getLeadingDisplayColumnIds = <TData extends MRT_RowData>(
|
|
92
92
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
|
@@ -119,16 +119,34 @@ export const getTrailingDisplayColumnIds = <TData extends MRT_RowData>(
|
|
|
119
119
|
|
|
120
120
|
export const getDefaultColumnOrderIds = <TData extends MRT_RowData>(
|
|
121
121
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
|
122
|
+
reset = false,
|
|
122
123
|
) => {
|
|
123
|
-
const
|
|
124
|
-
|
|
124
|
+
const {
|
|
125
|
+
state: { columnOrder: currentColumnOrderIds = [] },
|
|
126
|
+
} = tableOptions;
|
|
127
|
+
|
|
128
|
+
const leadingDisplayColIds: string[] =
|
|
129
|
+
getLeadingDisplayColumnIds(tableOptions);
|
|
130
|
+
const trailingDisplayColIds: string[] =
|
|
125
131
|
getTrailingDisplayColumnIds(tableOptions);
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
132
|
+
|
|
133
|
+
const defaultColumnDefIds = getAllLeafColumnDefs(tableOptions.columns).map(
|
|
134
|
+
(columnDef) => getColumnId(columnDef),
|
|
135
|
+
);
|
|
136
|
+
|
|
137
|
+
let allLeafColumnDefIds = reset
|
|
138
|
+
? defaultColumnDefIds
|
|
139
|
+
: Array.from(new Set([...currentColumnOrderIds, ...defaultColumnDefIds]));
|
|
140
|
+
|
|
141
|
+
allLeafColumnDefIds = allLeafColumnDefIds.filter(
|
|
142
|
+
(colId) =>
|
|
143
|
+
!leadingDisplayColIds.includes(colId) &&
|
|
144
|
+
!trailingDisplayColIds.includes(colId),
|
|
145
|
+
);
|
|
146
|
+
|
|
147
|
+
return [
|
|
148
|
+
...leadingDisplayColIds,
|
|
149
|
+
...allLeafColumnDefIds,
|
|
150
|
+
...trailingDisplayColIds,
|
|
151
|
+
];
|
|
134
152
|
};
|
package/src/utils/style.utils.ts
CHANGED
|
@@ -42,7 +42,7 @@ export const getMRTTheme = <TData extends MRT_RowData>(
|
|
|
42
42
|
};
|
|
43
43
|
};
|
|
44
44
|
|
|
45
|
-
export const
|
|
45
|
+
export const commonCellBeforeAfterStyles = {
|
|
46
46
|
content: '""',
|
|
47
47
|
height: '100%',
|
|
48
48
|
left: 0,
|
|
@@ -79,7 +79,7 @@ export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
|
|
|
79
79
|
? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
|
|
80
80
|
: undefined
|
|
81
81
|
: undefined,
|
|
82
|
-
...
|
|
82
|
+
...commonCellBeforeAfterStyles,
|
|
83
83
|
},
|
|
84
84
|
},
|
|
85
85
|
};
|
|
@@ -99,9 +99,12 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
|
|
|
99
99
|
theme: Theme;
|
|
100
100
|
}) => {
|
|
101
101
|
const {
|
|
102
|
+
getState,
|
|
102
103
|
options: { enableColumnVirtualization, layoutMode },
|
|
103
104
|
} = table;
|
|
105
|
+
const { draggingColumn } = getState();
|
|
104
106
|
const { columnDef } = column;
|
|
107
|
+
const { columnDefType } = columnDef;
|
|
105
108
|
|
|
106
109
|
const isColumnPinned =
|
|
107
110
|
columnDef.columnDefType !== 'group' && column.getIsPinned();
|
|
@@ -140,7 +143,6 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
|
|
|
140
143
|
isColumnPinned === 'right'
|
|
141
144
|
? `${getTotalRight(table, column)}px`
|
|
142
145
|
: undefined,
|
|
143
|
-
zIndex: 1,
|
|
144
146
|
}
|
|
145
147
|
: {};
|
|
146
148
|
|
|
@@ -148,6 +150,12 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
|
|
|
148
150
|
backgroundColor: 'inherit',
|
|
149
151
|
backgroundImage: 'inherit',
|
|
150
152
|
display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
|
|
153
|
+
justifyContent:
|
|
154
|
+
columnDefType === 'group'
|
|
155
|
+
? 'center'
|
|
156
|
+
: layoutMode?.startsWith('grid')
|
|
157
|
+
? tableCellProps.align
|
|
158
|
+
: undefined,
|
|
151
159
|
opacity:
|
|
152
160
|
table.getState().draggingColumn?.id === column.id ||
|
|
153
161
|
table.getState().hoveredColumn?.id === column.id
|
|
@@ -157,7 +165,12 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
|
|
|
157
165
|
transition: enableColumnVirtualization
|
|
158
166
|
? 'none'
|
|
159
167
|
: `padding 150ms ease-in-out`,
|
|
160
|
-
zIndex:
|
|
168
|
+
zIndex:
|
|
169
|
+
column.getIsResizing() || draggingColumn?.id === column.id
|
|
170
|
+
? 2
|
|
171
|
+
: columnDefType !== 'group' && isColumnPinned
|
|
172
|
+
? 1
|
|
173
|
+
: 0,
|
|
161
174
|
...pinnedStyles,
|
|
162
175
|
...widthStyles,
|
|
163
176
|
...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
type MRT_ColumnDef,
|
|
3
|
-
type MRT_RowData,
|
|
4
|
-
type MRT_StatefulTableOptions,
|
|
5
|
-
} from '../../types';
|
|
6
|
-
import { getMRT_RowActionsColumnDef } from './getMRT_RowActionsColumnDef';
|
|
7
|
-
import { getMRT_RowDragColumnDef } from './getMRT_RowDragColumnDef';
|
|
8
|
-
import { getMRT_RowExpandColumnDef } from './getMRT_RowExpandColumnDef';
|
|
9
|
-
import { getMRT_RowNumbersColumnDef } from './getMRT_RowNumbersColumnDef';
|
|
10
|
-
import { getMRT_RowPinningColumnDef } from './getMRT_RowPinningColumnDef';
|
|
11
|
-
import { getMRT_RowSelectColumnDef } from './getMRT_RowSelectColumnDef';
|
|
12
|
-
import { getMRT_RowSpacerColumnDef } from './getMRT_RowSpacerColumnDef';
|
|
13
|
-
|
|
14
|
-
export const getMRT_DisplayColumns = <TData extends MRT_RowData>(
|
|
15
|
-
tableOptions: MRT_StatefulTableOptions<TData>,
|
|
16
|
-
): MRT_ColumnDef<TData>[] => {
|
|
17
|
-
return [
|
|
18
|
-
getMRT_RowNumbersColumnDef(tableOptions),
|
|
19
|
-
getMRT_RowSelectColumnDef(tableOptions),
|
|
20
|
-
getMRT_RowExpandColumnDef(tableOptions),
|
|
21
|
-
getMRT_RowActionsColumnDef(tableOptions),
|
|
22
|
-
getMRT_RowDragColumnDef(tableOptions),
|
|
23
|
-
getMRT_RowPinningColumnDef(tableOptions),
|
|
24
|
-
getMRT_RowSpacerColumnDef(tableOptions),
|
|
25
|
-
].filter(Boolean) as MRT_ColumnDef<TData>[];
|
|
26
|
-
};
|
package/src/locales/am.ts
DELETED
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import { type MRT_Localization } from '..';
|
|
2
|
-
|
|
3
|
-
export const MRT_Localization_AM: MRT_Localization = {
|
|
4
|
-
actions: 'እግር',
|
|
5
|
-
and: 'እና',
|
|
6
|
-
cancel: 'ሰርዝ',
|
|
7
|
-
changeFilterMode: 'በማጣጣት የተቋቋኸውን ይቀይር',
|
|
8
|
-
changeSearchMode: 'በደጋገሚ የተጠቀሰከውን ይቀይር',
|
|
9
|
-
clearFilter: 'ተጠናቀቁ',
|
|
10
|
-
clearSearch: 'የይላላ ግባብውን ይሰርዝ',
|
|
11
|
-
clearSort: 'የማጣጣትውን ይሰረዝ',
|
|
12
|
-
clickToCopy: 'ከሁሉም ተዘጋጅላቸው ይከፍሉ',
|
|
13
|
-
collapse: 'ርክበ',
|
|
14
|
-
collapseAll: 'ሁሉንም ርክበ',
|
|
15
|
-
columnActions: 'ሁሉንም ማጠናከሪያዎች',
|
|
16
|
-
copiedToClipboard: 'የተቀደሰውን ብለን ይከፈሉ',
|
|
17
|
-
dropToGroupBy: 'ለ{column} የቡና ቦታ ወደጥዋት ይዘገቡ',
|
|
18
|
-
edit: 'አስተካክ',
|
|
19
|
-
expand: 'ጠቀሱ',
|
|
20
|
-
expandAll: 'ሁሉንም ጠቀሱ',
|
|
21
|
-
filterArrIncludes: 'አካሉን አስፈልጎ',
|
|
22
|
-
filterArrIncludesAll: 'አካሉን ሁሉንም አስፈልጎ',
|
|
23
|
-
filterArrIncludesSome: 'አካሉን ያለሁሉን አስፈልጎ',
|
|
24
|
-
filterBetween: 'እና',
|
|
25
|
-
filterBetweenInclusive: 'እና',
|
|
26
|
-
filterByColumn: '{column} በአካል ማጣጣት',
|
|
27
|
-
filterContains: 'የነሀበቱ አካል',
|
|
28
|
-
filterEmpty: 'ትናት የለው',
|
|
29
|
-
filterEndsWith: 'የመጨረሻው እብዎች',
|
|
30
|
-
filterEquals: 'ከተማ',
|
|
31
|
-
filterEqualsString: 'ከተማ',
|
|
32
|
-
filterFuzzy: 'አስተናገር',
|
|
33
|
-
filterGreaterThan: 'ድጋሜ',
|
|
34
|
-
filterGreaterThanOrEqualTo: 'ድጋሜ ወይስ ትናት',
|
|
35
|
-
filterInNumberRange: 'እና',
|
|
36
|
-
filterIncludesString: 'አካሉን አስፈልጎ',
|
|
37
|
-
filterIncludesStringSensitive: 'አካሉን አስፈልጎ',
|
|
38
|
-
filterLessThan: 'ትናት',
|
|
39
|
-
filterLessThanOrEqualTo: 'ትናት ወይስ ድጋሜ',
|
|
40
|
-
filterMode: 'የቡና አካል: {filterType}',
|
|
41
|
-
filterNotEmpty: 'ከለዎ',
|
|
42
|
-
filterNotEquals: 'ከተማ የለው',
|
|
43
|
-
filterStartsWith: 'የመጀሳው እብዎች',
|
|
44
|
-
filterWeakEquals: 'ከተማ',
|
|
45
|
-
filteringByColumn: '{column} በማጣጣት - {filterType} {filterValue}',
|
|
46
|
-
goToFirstPage: 'ወደ መመለሻ ገጽ ይሂዱ',
|
|
47
|
-
goToLastPage: 'ወደ መጨረሻ ገጽ ይሂዱ',
|
|
48
|
-
goToNextPage: 'ወደ ቀጣይ ገጽ ይሂዱ',
|
|
49
|
-
goToPreviousPage: 'ወደ ቀጣይ ገጽ ይሂዱ',
|
|
50
|
-
grab: 'ቆይ',
|
|
51
|
-
groupByColumn: '{column} ቡና',
|
|
52
|
-
groupedBy: 'ቡና ቦታ ',
|
|
53
|
-
hideAll: 'ሁሉንም ደገን',
|
|
54
|
-
hideColumn: '{column} አካልን ደገን',
|
|
55
|
-
max: 'ከፍተኛ',
|
|
56
|
-
min: 'ከሚካሄዱ',
|
|
57
|
-
move: 'እርምጃ',
|
|
58
|
-
noRecordsToDisplay: 'ምንም የተለየም አልነበረም',
|
|
59
|
-
noResultsFound: 'ምንም አልተገኘም',
|
|
60
|
-
of: 'ከ',
|
|
61
|
-
or: 'ወይም',
|
|
62
|
-
pin: 'ቀዝቃኛ',
|
|
63
|
-
pinToLeft: 'ወደ ግራ ቀዝቃኛ',
|
|
64
|
-
pinToRight: 'ወደ ቀኝ ቀዝቃኛ',
|
|
65
|
-
resetColumnSize: 'አካል መልክ ይስጥ',
|
|
66
|
-
resetOrder: 'ማጣጣት ይስጥ',
|
|
67
|
-
rowActions: 'ከሚከባቡ ማጠናከሪያዎች',
|
|
68
|
-
rowNumber: '#',
|
|
69
|
-
rowNumbers: 'የስም ቁጥሮች',
|
|
70
|
-
rowsPerPage: 'በገቢ የቁጥር ቁጥሮች',
|
|
71
|
-
save: 'አስቀምጥ',
|
|
72
|
-
search: 'ፈልግ',
|
|
73
|
-
selectedCountOfRowCountRowsSelected:
|
|
74
|
-
'የ{rowCount} ቁጥሮች ውስጠ የ{selectedCount} ሁኔ አምስቱ ቁጥሮች',
|
|
75
|
-
select: 'ይምረጡ',
|
|
76
|
-
showAll: 'ሁሉንም አሳ',
|
|
77
|
-
showAllColumns: 'ሁሉንም አሳ',
|
|
78
|
-
showHideColumns: 'ማጋጣሚዎችን አሳ/ሲክም',
|
|
79
|
-
showHideFilters: 'ማጣጣዎችን አሳ/ሲክም',
|
|
80
|
-
showHideSearch: 'ፍለጎችን አሳ/ሲክም',
|
|
81
|
-
sortByColumnAsc: '{column} በለዋሉ ማጣጣት',
|
|
82
|
-
sortByColumnDesc: '{column} በታዋሉ ማጣጣት',
|
|
83
|
-
sortedByColumnAsc: '{column} በለዋሉ ነቀላዋሉ',
|
|
84
|
-
sortedByColumnDesc: '{column} በታዋሉ ነቀላዋሉ',
|
|
85
|
-
thenBy: 'እና',
|
|
86
|
-
toggleDensity: 'ባዝላምውን አሳ/ሲክም',
|
|
87
|
-
toggleFullScreen: 'የሙሉ ማሳያ አሳ/ሲክም',
|
|
88
|
-
toggleSelectAll: 'ሁሉንም ይምረጡ/ይላል',
|
|
89
|
-
toggleSelectRow: 'ቁጥሮችን ይምረጡ/ይላል',
|
|
90
|
-
toggleVisibility: 'አሳ/ሲክም',
|
|
91
|
-
ungroupByColumn: 'ቡና ማጣጣት ይከፍሉ',
|
|
92
|
-
unpin: 'ቀዝቃኛን ቀዝቃኛን ይከፍሉ',
|
|
93
|
-
unpinAll: 'ሁሉንም ቀዝቃኛን ቀዝቃኛን ይከፍሉ',
|
|
94
|
-
};
|