RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

solve header table colorize

Browse Source
This commit is contained in:
Mohammad Jalali
2024-05-04 13:44:26 +03:30
parent 0606463eda
commit b40c19fb34
3 changed files with 111 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/core/components/DataTable/head/TableHead.js
View File

@@ -1,12 +1,12 @@
import { parseFromValuesOrFunc } from "@/core/utils/utils"; import {parseFromValuesOrFunc} from "@/core/utils/utils";
import { TableHead } from "@mui/material"; import {TableHead} from "@mui/material";
import DataTable_TableHeadRow from "./TableHeadRow"; import DataTable_TableHeadRow from "./TableHeadRow";
const DataTable_TableHead = ({ const DataTable_TableHead = ({
columnVirtualizer, columnVirtualizer,
table, table,
...rest ...rest
}) => { }) => {
const { const {
getState, getState,
options: { options: {
@@ -15,12 +15,12 @@ const DataTable_TableHead = ({
muiTableHeadProps, muiTableHeadProps,
positionToolbarAlertBanner, positionToolbarAlertBanner,
}, },
refs: { tableHeadRef }, refs: {tableHeadRef},
} = table; } = table;
const { isFullScreen, showAlertBanner } = getState(); const {isFullScreen, showAlertBanner} = getState();
const tableHeadProps = { const tableHeadProps = {
...parseFromValuesOrFunc(muiTableHeadProps, { table }), ...parseFromValuesOrFunc(muiTableHeadProps, {table}),
...rest, ...rest,
}; };
@@ -47,12 +47,13 @@ const DataTable_TableHead = ({
> >
{table {table
.getHeaderGroups() .getHeaderGroups()
.map((headerGroup) => ( .map((headerGroup, index) => (
<DataTable_TableHeadRow <DataTable_TableHeadRow
columnVirtualizer={columnVirtualizer} columnVirtualizer={columnVirtualizer}
headerGroup={headerGroup} headerGroup={headerGroup}
key={headerGroup.id} key={headerGroup.id}
table={table} table={table}
index={index}
/> />
)) ))
} }

126
src/core/components/DataTable/head/TableHeadCell.js
View File

@@ -1,16 +1,16 @@
import { getCommonMRTCellStyles, parseFromValuesOrFunc } from "@/core/utils/utils"; import {getCommonMRTCellStyles, parseFromValuesOrFunc} from "@/core/utils/utils";
import { useTheme } from "@emotion/react"; import {useTheme} from "@emotion/react";
import { Box, TableCell } from "@mui/material"; import {Box, TableCell} from "@mui/material";
import { MRT_TableHeadCellSortLabel } from "material-react-table"; import {MRT_TableHeadCellSortLabel} from "material-react-table";
import { useMemo } from "react"; import {useMemo} from "react";
const DataTable_TableHeadCell = ({ const DataTable_TableHeadCell = ({
columnVirtualizer, columnVirtualizer,
header, header,
staticColumnIndex, staticColumnIndex,
table, table,
...rest ...rest
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const { const {
getState, getState,
@@ -24,10 +24,10 @@ const DataTable_TableHeadCell = ({
enableGrouping, enableGrouping,
enableMultiSort, enableMultiSort,
layoutMode, layoutMode,
mrtTheme: { draggingBorderColor }, mrtTheme: {draggingBorderColor},
muiTableHeadCellProps, muiTableHeadCellProps,
}, },
refs: { tableHeadCellRefs }, refs: {tableHeadCellRefs},
setHoveredColumn, setHoveredColumn,
} = table; } = table;
const { const {
@@ -38,12 +38,12 @@ const DataTable_TableHeadCell = ({
hoveredColumn, hoveredColumn,
showColumnFilters, showColumnFilters,
} = getState(); } = getState();
const { column } = header; const {column} = header;
const { columnDef } = column; const {columnDef} = column;
const { columnDefType } = columnDef; const {columnDefType} = columnDef;
const tableCellProps = { const tableCellProps = {
...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }), ...parseFromValuesOrFunc(muiTableHeadCellProps, {column, table}),
...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, { ...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
column, column,
table, table,
@@ -93,8 +93,8 @@ const DataTable_TableHeadCell = ({
if (showResizeBorder) { if (showResizeBorder) {
return columnResizeDirection === 'ltr' return columnResizeDirection === 'ltr'
? { borderRight: borderStyle } ? {borderRight: borderStyle}
: { borderLeft: borderStyle }; : {borderLeft: borderStyle};
} }
const draggingBorders = borderStyle const draggingBorders = borderStyle
? { ? {
@@ -172,47 +172,47 @@ const DataTable_TableHeadCell = ({
}} }}
{...tableCellProps} {...tableCellProps}
sx={(theme) => ({ sx={(theme) => ({
'& :hover': { '& :hover': {
'.MuiButtonBase-root': { '.MuiButtonBase-root': {
opacity: 1, opacity: 1,
},
}, },
}, flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined,
flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined, fontWeight: 'bold',
fontWeight: 'bold', overflow: 'visible',
overflow: 'visible', p:
p: density === 'compact'
density === 'compact' ? '0.5rem'
? '0.5rem' : density === 'comfortable'
: density === 'comfortable' ? columnDefType === 'display'
? columnDefType === 'display' ? '0.75rem'
? '0.75rem' : '1rem'
: '1rem' : columnDefType === 'display'
: columnDefType === 'display' ? '1rem 1.25rem'
? '1rem 1.25rem' : '1.5rem',
: '1.5rem', pb:
pb: columnDefType === 'display'
columnDefType === 'display' ? 0
? 0 : showColumnFilters || density === 'compact'
: showColumnFilters || density === 'compact' ? '0.4rem'
? '0.4rem' : '0.6rem',
: '0.6rem', pt:
pt: columnDefType === 'group' || density === 'compact'
columnDefType === 'group' || density === 'compact' ? '0.25rem'
? '0.25rem' : density === 'comfortable'
: density === 'comfortable' ? '.75rem'
? '.75rem' : '1.25rem',
: '1.25rem', userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'middle',
verticalAlign: 'middle', ...getCommonMRTCellStyles({
...getCommonMRTCellStyles({ column,
column, header,
header, table,
table, tableCellProps,
tableCellProps, theme,
theme, }),
}), ...draggingBorders,
...draggingBorders, }
}
)} )}
> >
{tableCellProps.children ?? ( {tableCellProps.children ?? (
@@ -225,7 +225,7 @@ const DataTable_TableHeadCell = ({
tableCellProps?.align === 'right' ? 'row-reverse' : 'row', tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
justifyContent: justifyContent:
columnDefType === 'group' || columnDefType === 'group' ||
tableCellProps?.align === 'center' tableCellProps?.align === 'center'
? 'center' ? 'center'
: column.getCanResize() : column.getCanResize()
? 'space-between' ? 'space-between'
@@ -262,6 +262,9 @@ const DataTable_TableHeadCell = ({
minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`, minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
overflow: columnDefType === 'data' ? 'hidden' : undefined, overflow: columnDefType === 'data' ? 'hidden' : undefined,
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
color: "#fff",
fontSize: "14px",
fontWeight: "500",
whiteSpace: whiteSpace:
(columnDef.header?.length ?? 0) < 20 (columnDef.header?.length ?? 0) < 20
? 'nowrap' ? 'nowrap'
@@ -271,7 +274,8 @@ const DataTable_TableHeadCell = ({
{HeaderElement} {HeaderElement}
</Box> </Box>
{(column.getCanSort() && columnDefType !== 'group') && ( {(column.getCanSort() && columnDefType !== 'group') && (
<MRT_TableHeadCellSortLabel sx={{ width: 20 }} header={header} table={table} /> <MRT_TableHeadCellSortLabel sx={{width: 20, color: "#fff"}} header={header}
table={table}/>
)} )}
</Box> </Box>
</Box> </Box>

86
src/core/components/DataTable/head/TableHeadRow.js
View File

@@ -1,24 +1,25 @@
import { parseFromValuesOrFunc } from "@/core/utils/utils"; import {parseFromValuesOrFunc} from "@/core/utils/utils";
import { TableRow } from "@mui/material"; import {TableRow} from "@mui/material";
import DataTable_TableHeadCell from "./TableHeadCell"; import DataTable_TableHeadCell from "./TableHeadCell";
const DataTable_TableHeadRow = ({ const DataTable_TableHeadRow = ({
columnVirtualizer, columnVirtualizer,
headerGroup, headerGroup,
table, table,
...rest index, // Add index prop
}) => { ...rest
}) => {
const { const {
options: { options: {
enableStickyHeader, enableStickyHeader,
layoutMode, layoutMode,
mrtTheme: { baseBackgroundColor },
muiTableHeadRowProps, muiTableHeadRowProps,
}, },
} = table; } = table;
const {virtualColumns, virtualPaddingLeft, virtualPaddingRight} =
columnVirtualizer ?? {};
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = const backgroundColor = index % 2 === 0 ? '#2070af' : '#ff5c0f';
columnVirtualizer ?? {};
const tableRowProps = { const tableRowProps = {
...parseFromValuesOrFunc(muiTableHeadRowProps, { ...parseFromValuesOrFunc(muiTableHeadRowProps, {
@@ -26,51 +27,34 @@ const DataTable_TableHeadRow = ({
table, table,
}), }),
...rest, ...rest,
sx: (theme) => ({ // Access theme from the sx function
...(parseFromValuesOrFunc(muiTableHeadRowProps?.sx, theme) || {}),
backgroundColor, // Apply background color
display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
position: enableStickyHeader && layoutMode === 'semantic' ? 'sticky' : 'relative',
top: 0,
}),
}; };
return ( return (
<TableRow <TableRow {...tableRowProps}>
{...tableRowProps} {virtualPaddingLeft && <th style={{display: 'flex', width: virtualPaddingLeft}}/>}
sx={(theme) => ({ {(virtualColumns ?? headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
backgroundColor: baseBackgroundColor, const header = columnVirtualizer ? headerGroup.headers[headerOrVirtualHeader.index] : headerOrVirtualHeader;
display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
position: return header ? (
enableStickyHeader && layoutMode === 'semantic' <DataTable_TableHeadCell
? 'sticky' columnVirtualizer={columnVirtualizer}
: 'relative', header={header}
top: 0, key={header.id}
...(parseFromValuesOrFunc(tableRowProps?.sx, theme)), staticColumnIndex={staticColumnIndex}
table={table}
/>
) : null;
})} })}
> {virtualPaddingRight && <th style={{display: 'flex', width: virtualPaddingRight}}/>}
{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> </TableRow>
); );
};
} export default DataTable_TableHeadRow;
export default DataTable_TableHeadRow