/
MRT_TableBodyCellValue.tsx
125 lines (116 loc) · 3.49 KB
/
MRT_TableBodyCellValue.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import { type ReactNode, type RefObject } from 'react';
import Box from '@mui/material/Box';
import {
type MRT_Cell,
type MRT_RowData,
type MRT_TableInstance,
} from '../../types';
import { getMRTTheme } from '../../utils/style.utils';
import highlightWords from 'highlight-words';
const allowedTypes = ['string', 'number'];
export interface MRT_TableBodyCellValueProps<TData extends MRT_RowData> {
cell: MRT_Cell<TData>;
rowRef?: RefObject<HTMLTableRowElement>;
staticColumnIndex?: number;
staticRowIndex?: number;
table: MRT_TableInstance<TData>;
}
export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
cell,
rowRef,
staticColumnIndex,
staticRowIndex,
table,
}: MRT_TableBodyCellValueProps<TData>) => {
const {
getState,
options: { enableFilterMatchHighlighting },
} = table;
const { column, row } = cell;
const { columnDef } = column;
const { globalFilter, globalFilterFn } = getState();
const filterValue = column.getFilterValue();
let renderedCellValue =
cell.getIsAggregated() && columnDef.AggregatedCell
? columnDef.AggregatedCell({
cell,
column,
row,
table,
})
: row.getIsGrouped() && !cell.getIsGrouped()
? null
: cell.getIsGrouped() && columnDef.GroupedCell
? columnDef.GroupedCell({
cell,
column,
row,
table,
})
: undefined;
const isGroupedValue = renderedCellValue !== undefined;
if (!isGroupedValue) {
renderedCellValue = cell.renderValue() as ReactNode | number | string;
}
if (
enableFilterMatchHighlighting &&
columnDef.enableFilterMatchHighlighting !== false &&
String(renderedCellValue) &&
allowedTypes.includes(typeof renderedCellValue) &&
((filterValue &&
allowedTypes.includes(typeof filterValue) &&
['autocomplete', 'text'].includes(columnDef.filterVariant!)) ||
(globalFilter &&
allowedTypes.includes(typeof globalFilter) &&
column.getCanGlobalFilter()))
) {
const chunks = highlightWords?.({
matchExactly:
(filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
query: (filterValue ?? globalFilter ?? '').toString(),
text: renderedCellValue?.toString() as string,
});
if (chunks?.length > 1 || chunks?.[0]?.match) {
renderedCellValue = (
<span aria-label={renderedCellValue as string} role="note">
{chunks?.map(({ key, match, text }) => (
<Box
aria-hidden="true"
component="span"
key={key}
sx={
match
? {
backgroundColor: (theme) =>
getMRTTheme(table, theme).matchHighlightColor,
borderRadius: '2px',
color: (theme) =>
theme.palette.mode === 'dark'
? theme.palette.common.white
: theme.palette.common.black,
padding: '2px 1px',
}
: undefined
}
>
{text}
</Box>
)) ?? renderedCellValue}
</span>
);
}
}
if (columnDef.Cell && !isGroupedValue) {
renderedCellValue = columnDef.Cell({
cell,
column,
renderedCellValue,
row,
rowRef,
staticColumnIndex,
staticRowIndex,
table,
});
}
return renderedCellValue;
};