implementation of datatable
This commit is contained in:
Amirhossein Mahmoodi
63
src/core/components/DataTable/head/TableHead.js
Normal file
63
src/core/components/DataTable/head/TableHead.js
Normal file
@@ -0,0 +1,63 @@
|
||||
import { parseFromValuesOrFunc } from "@/core/utils/utils";
|
||||
import { TableHead } from "@mui/material";
|
||||
import DataTable_TableHeadRow from "./TableHeadRow";
|
||||
|
||||
const DataTable_TableHead = ({
|
||||
columnVirtualizer,
|
||||
table,
|
||||
...rest
|
||||
}) => {
|
||||
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) => {
|
||||
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)),
|
||||
})}
|
||||
>
|
||||
{table
|
||||
.getHeaderGroups()
|
||||
.map((headerGroup) => (
|
||||
<DataTable_TableHeadRow
|
||||
columnVirtualizer={columnVirtualizer}
|
||||
headerGroup={headerGroup}
|
||||
key={headerGroup.id}
|
||||
table={table}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</TableHead>
|
||||
);
|
||||
|
||||
}
|
||||
export default DataTable_TableHead
|
||||
284
src/core/components/DataTable/head/TableHeadCell.js
Normal file
284
src/core/components/DataTable/head/TableHeadCell.js
Normal file
@@ -0,0 +1,284 @@
|
||||
import { getCommonMRTCellStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { Box, TableCell } from "@mui/material";
|
||||
import { MRT_TableHeadCellSortLabel } from "material-react-table";
|
||||
import { useMemo } from "react";
|
||||
|
||||
const DataTable_TableHeadCell = ({
|
||||
columnVirtualizer,
|
||||
header,
|
||||
staticColumnIndex,
|
||||
table,
|
||||
...rest
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const {
|
||||
getState,
|
||||
options: {
|
||||
columnResizeDirection,
|
||||
columnResizeMode,
|
||||
enableColumnActions,
|
||||
enableColumnDragging,
|
||||
enableColumnOrdering,
|
||||
enableColumnPinning,
|
||||
enableGrouping,
|
||||
enableMultiSort,
|
||||
layoutMode,
|
||||
mrtTheme: { draggingBorderColor },
|
||||
muiTableHeadCellProps,
|
||||
},
|
||||
refs: { tableHeadCellRefs },
|
||||
setHoveredColumn,
|
||||
} = table;
|
||||
const {
|
||||
columnSizingInfo,
|
||||
density,
|
||||
draggingColumn,
|
||||
grouping,
|
||||
hoveredColumn,
|
||||
showColumnFilters,
|
||||
} = getState();
|
||||
const { column } = header;
|
||||
const { columnDef } = column;
|
||||
const { columnDefType } = columnDef;
|
||||
|
||||
const tableCellProps = {
|
||||
...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }),
|
||||
...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
|
||||
column,
|
||||
table,
|
||||
}),
|
||||
...rest,
|
||||
};
|
||||
|
||||
const isColumnPinned =
|
||||
enableColumnPinning &&
|
||||
columnDef.columnDefType !== 'group' &&
|
||||
column.getIsPinned();
|
||||
|
||||
const showColumnActions =
|
||||
(enableColumnActions || columnDef.enableColumnActions) &&
|
||||
columnDef.enableColumnActions !== false;
|
||||
|
||||
const showDragHandle =
|
||||
enableColumnDragging !== false &&
|
||||
columnDef.enableColumnDragging !== false &&
|
||||
(enableColumnDragging ||
|
||||
(enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
|
||||
(enableGrouping &&
|
||||
columnDef.enableGrouping !== false &&
|
||||
!grouping.includes(column.id)));
|
||||
|
||||
const headerPL = useMemo(() => {
|
||||
let pl = 0;
|
||||
if (column.getCanSort()) pl += 1;
|
||||
if (showColumnActions) pl += 1.75;
|
||||
if (showDragHandle) pl += 1.5;
|
||||
return pl;
|
||||
}, [showColumnActions, showDragHandle]);
|
||||
|
||||
const draggingBorders = useMemo(() => {
|
||||
const showResizeBorder =
|
||||
columnSizingInfo.isResizingColumn === column.id &&
|
||||
columnResizeMode === 'onChange' &&
|
||||
!header.subHeaders.length;
|
||||
|
||||
const borderStyle = showResizeBorder
|
||||
? `2px solid ${draggingBorderColor} !important`
|
||||
: draggingColumn?.id === column.id
|
||||
? `1px dashed ${theme.palette.grey[500]}`
|
||||
: hoveredColumn?.id === column.id
|
||||
? `2px dashed ${draggingBorderColor}`
|
||||
: undefined;
|
||||
|
||||
if (showResizeBorder) {
|
||||
return columnResizeDirection === 'ltr'
|
||||
? { borderRight: borderStyle }
|
||||
: { borderLeft: borderStyle };
|
||||
}
|
||||
const draggingBorders = borderStyle
|
||||
? {
|
||||
borderLeft: borderStyle,
|
||||
borderRight: borderStyle,
|
||||
borderTop: borderStyle,
|
||||
}
|
||||
: undefined;
|
||||
|
||||
return draggingBorders;
|
||||
}, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
|
||||
|
||||
const handleDragEnter = (_e) => {
|
||||
if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
|
||||
setHoveredColumn(null);
|
||||
}
|
||||
if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
|
||||
setHoveredColumn(
|
||||
columnDef.enableColumnOrdering !== false ? column : null,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragOver = (e) => {
|
||||
if (columnDef.enableColumnOrdering !== false) {
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const HeaderElement =
|
||||
parseFromValuesOrFunc(columnDef.Header, {
|
||||
column,
|
||||
header,
|
||||
table,
|
||||
}) ?? columnDef.header;
|
||||
|
||||
|
||||
const columnRelativeDepth = header.depth - column.depth;
|
||||
|
||||
if (
|
||||
columnRelativeDepth > 1
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let rowSpan = 1;
|
||||
if (header.isPlaceholder) {
|
||||
const leafs = header.getLeafHeaders();
|
||||
rowSpan = leafs[leafs.length - 1].depth - header.depth;
|
||||
}
|
||||
|
||||
return (
|
||||
<TableCell
|
||||
align={
|
||||
columnDefType === 'group'
|
||||
? 'center'
|
||||
: theme.direction === 'rtl'
|
||||
? 'right'
|
||||
: 'left'
|
||||
}
|
||||
colSpan={header.colSpan}
|
||||
rowSpan={rowSpan}
|
||||
data-index={staticColumnIndex}
|
||||
data-pinned={!!isColumnPinned || undefined}
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragOver={handleDragOver}
|
||||
ref={(node) => {
|
||||
if (node) {
|
||||
tableHeadCellRefs.current[column.id] = node;
|
||||
if (columnDefType !== 'group') {
|
||||
columnVirtualizer?.measureElement?.(node);
|
||||
}
|
||||
}
|
||||
}}
|
||||
{...tableCellProps}
|
||||
sx={(theme) => ({
|
||||
'& :hover': {
|
||||
'.MuiButtonBase-root': {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
border: 1,
|
||||
flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined,
|
||||
fontWeight: 'bold',
|
||||
overflow: 'visible',
|
||||
p:
|
||||
density === 'compact'
|
||||
? '0.5rem'
|
||||
: density === 'comfortable'
|
||||
? columnDefType === 'display'
|
||||
? '0.75rem'
|
||||
: '1rem'
|
||||
: columnDefType === 'display'
|
||||
? '1rem 1.25rem'
|
||||
: '1.5rem',
|
||||
pb:
|
||||
columnDefType === 'display'
|
||||
? 0
|
||||
: showColumnFilters || density === 'compact'
|
||||
? '0.4rem'
|
||||
: '0.6rem',
|
||||
pt:
|
||||
columnDefType === 'group' || density === 'compact'
|
||||
? '0.25rem'
|
||||
: density === 'comfortable'
|
||||
? '.75rem'
|
||||
: '1.25rem',
|
||||
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
|
||||
verticalAlign: 'top',
|
||||
...getCommonMRTCellStyles({
|
||||
column,
|
||||
header,
|
||||
table,
|
||||
tableCellProps,
|
||||
theme,
|
||||
}),
|
||||
...draggingBorders,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{tableCellProps.children ?? (
|
||||
<Box
|
||||
className="Mui-TableHeadCell-Content"
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection:
|
||||
tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
|
||||
justifyContent:
|
||||
columnDefType === 'group' ||
|
||||
tableCellProps?.align === 'center'
|
||||
? 'center'
|
||||
: column.getCanResize()
|
||||
? 'space-between'
|
||||
: 'flex-start',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
className="Mui-TableHeadCell-Content-Labels"
|
||||
onClick={column.getToggleSortingHandler()}
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
cursor:
|
||||
column.getCanSort() && columnDefType !== 'group'
|
||||
? 'pointer'
|
||||
: undefined,
|
||||
display: 'flex',
|
||||
flexDirection:
|
||||
tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
|
||||
overflow: columnDefType === 'data' ? 'hidden' : undefined,
|
||||
pl:
|
||||
tableCellProps?.align === 'center'
|
||||
? `${headerPL}rem`
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
className="Mui-TableHeadCell-Content-Wrapper"
|
||||
sx={{
|
||||
'&:hover': {
|
||||
textOverflow: 'clip',
|
||||
},
|
||||
minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
|
||||
overflow: columnDefType === 'data' ? 'hidden' : undefined,
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace:
|
||||
(columnDef.header?.length ?? 0) < 20
|
||||
? 'nowrap'
|
||||
: 'normal',
|
||||
}}
|
||||
>
|
||||
{HeaderElement}
|
||||
</Box>
|
||||
{(column.getCanSort() && columnDefType !== 'group') && (
|
||||
<MRT_TableHeadCellSortLabel sx={{ width: 20 }} header={header} table={table} />
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</TableCell>
|
||||
);
|
||||
|
||||
}
|
||||
export default DataTable_TableHeadCell;
|
||||
76
src/core/components/DataTable/head/TableHeadRow.js
Normal file
76
src/core/components/DataTable/head/TableHeadRow.js
Normal file
@@ -0,0 +1,76 @@
|
||||
import { parseFromValuesOrFunc } from "@/core/utils/utils";
|
||||
import { TableRow } from "@mui/material";
|
||||
import DataTable_TableHeadCell from "./TableHeadCell";
|
||||
|
||||
const DataTable_TableHeadRow = ({
|
||||
columnVirtualizer,
|
||||
headerGroup,
|
||||
table,
|
||||
...rest
|
||||
}) => {
|
||||
const {
|
||||
options: {
|
||||
enableStickyHeader,
|
||||
layoutMode,
|
||||
mrtTheme: { baseBackgroundColor },
|
||||
muiTableHeadRowProps,
|
||||
},
|
||||
} = table;
|
||||
|
||||
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
|
||||
columnVirtualizer ?? {};
|
||||
|
||||
const tableRowProps = {
|
||||
...parseFromValuesOrFunc(muiTableHeadRowProps, {
|
||||
headerGroup,
|
||||
table,
|
||||
}),
|
||||
...rest,
|
||||
};
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
{...tableRowProps}
|
||||
sx={(theme) => ({
|
||||
backgroundColor: baseBackgroundColor,
|
||||
display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
|
||||
position:
|
||||
enableStickyHeader && layoutMode === 'semantic'
|
||||
? 'sticky'
|
||||
: 'relative',
|
||||
top: 0,
|
||||
...(parseFromValuesOrFunc(tableRowProps?.sx, theme)),
|
||||
})}
|
||||
>
|
||||
{virtualPaddingLeft ? (
|
||||
<th style={{ display: 'flex', width: virtualPaddingLeft }} />
|
||||
) : null}
|
||||
{(virtualColumns ?? headerGroup.headers).map(
|
||||
(headerOrVirtualHeader, staticColumnIndex) => {
|
||||
let header = headerOrVirtualHeader;
|
||||
|
||||
if (columnVirtualizer) {
|
||||
staticColumnIndex = (headerOrVirtualHeader)
|
||||
.index;
|
||||
header = headerGroup.headers[staticColumnIndex];
|
||||
}
|
||||
|
||||
return header ? (
|
||||
<DataTable_TableHeadCell
|
||||
columnVirtualizer={columnVirtualizer}
|
||||
header={header}
|
||||
key={header.id}
|
||||
staticColumnIndex={staticColumnIndex}
|
||||
table={table}
|
||||
/>
|
||||
) : null;
|
||||
},
|
||||
)}
|
||||
{virtualPaddingRight ? (
|
||||
<th style={{ display: 'flex', width: virtualPaddingRight }} />
|
||||
) : null}
|
||||
</TableRow>
|
||||
);
|
||||
|
||||
}
|
||||
export default DataTable_TableHeadRow
|
||||
Reference in New Issue
Block a user