-
-
Notifications
You must be signed in to change notification settings - Fork 421
/
MRT_TableHead.tsx
91 lines (86 loc) · 2.58 KB
/
MRT_TableHead.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
import TableHead, { type TableHeadProps } from '@mui/material/TableHead';
import { MRT_TableHeadRow } from './MRT_TableHeadRow';
import {
type MRT_ColumnVirtualizer,
type MRT_RowData,
type MRT_TableInstance,
} from '../../types';
import { parseFromValuesOrFunc } from '../../utils/utils';
import { MRT_ToolbarAlertBanner } from '../toolbar/MRT_ToolbarAlertBanner';
export interface MRT_TableHeadProps<TData extends MRT_RowData>
extends TableHeadProps {
columnVirtualizer?: MRT_ColumnVirtualizer;
table: MRT_TableInstance<TData>;
}
export const MRT_TableHead = <TData extends MRT_RowData>({
columnVirtualizer,
table,
...rest
}: MRT_TableHeadProps<TData>) => {
const {
getState,
options: {
enableStickyHeader,
layoutMode,
muiTableHeadProps,
positionToolbarAlertBanner,
},
refs: { tableHeadRef },
} = table;
const { isFullScreen, showAlertBanner } = getState();
const tableHeadProps = {
...parseFromValuesOrFunc(muiTableHeadProps, { table }),
...rest,
};
const stickyHeader = enableStickyHeader || isFullScreen;
return (
<TableHead
{...tableHeadProps}
ref={(ref: HTMLTableSectionElement) => {
tableHeadRef.current = ref;
if (tableHeadProps?.ref) {
// @ts-ignore
tableHeadProps.ref.current = ref;
}
}}
sx={(theme) => ({
display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
opacity: 0.97,
position: stickyHeader ? 'sticky' : 'relative',
top: stickyHeader && layoutMode?.startsWith('grid') ? 0 : undefined,
zIndex: stickyHeader ? 2 : undefined,
...(parseFromValuesOrFunc(tableHeadProps?.sx, theme) as any),
})}
>
{positionToolbarAlertBanner === 'head-overlay' &&
(showAlertBanner || table.getSelectedRowModel().rows.length > 0) ? (
<tr
style={{
display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
}}
>
<th
colSpan={table.getVisibleLeafColumns().length}
style={{
display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
padding: 0,
}}
>
<MRT_ToolbarAlertBanner table={table} />
</th>
</tr>
) : (
table
.getHeaderGroups()
.map((headerGroup) => (
<MRT_TableHeadRow
columnVirtualizer={columnVirtualizer}
headerGroup={headerGroup as any}
key={headerGroup.id}
table={table}
/>
))
)}
</TableHead>
);
};