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

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

@@ -1,16 +1,16 @@
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";
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
}) => {
columnVirtualizer,
header,
staticColumnIndex,
table,
...rest
}) => {
const theme = useTheme();
const {
getState,
@@ -24,10 +24,10 @@ const DataTable_TableHeadCell = ({
enableGrouping,
enableMultiSort,
layoutMode,
mrtTheme: { draggingBorderColor },
mrtTheme: {draggingBorderColor},
muiTableHeadCellProps,
},
refs: { tableHeadCellRefs },
refs: {tableHeadCellRefs},
setHoveredColumn,
} = table;
const {
@@ -38,12 +38,12 @@ const DataTable_TableHeadCell = ({
hoveredColumn,
showColumnFilters,
} = getState();
const { column } = header;
const { columnDef } = column;
const { columnDefType } = columnDef;
const {column} = header;
const {columnDef} = column;
const {columnDefType} = columnDef;
const tableCellProps = {
...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }),
...parseFromValuesOrFunc(muiTableHeadCellProps, {column, table}),
...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
column,
table,
@@ -93,8 +93,8 @@ const DataTable_TableHeadCell = ({
if (showResizeBorder) {
return columnResizeDirection === 'ltr'
? { borderRight: borderStyle }
: { borderLeft: borderStyle };
? {borderRight: borderStyle}
: {borderLeft: borderStyle};
}
const draggingBorders = borderStyle
? {
@@ -172,47 +172,47 @@ const DataTable_TableHeadCell = ({
}}
{...tableCellProps}
sx={(theme) => ({
'& :hover': {
'.MuiButtonBase-root': {
opacity: 1,
'& :hover': {
'.MuiButtonBase-root': {
opacity: 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: 'middle',
...getCommonMRTCellStyles({
column,
header,
table,
tableCellProps,
theme,
}),
...draggingBorders,
}
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: 'middle',
...getCommonMRTCellStyles({
column,
header,
table,
tableCellProps,
theme,
}),
...draggingBorders,
}
)}
>
{tableCellProps.children ?? (
@@ -225,7 +225,7 @@ const DataTable_TableHeadCell = ({
tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
justifyContent:
columnDefType === 'group' ||
tableCellProps?.align === 'center'
tableCellProps?.align === 'center'
? 'center'
: column.getCanResize()
? 'space-between'
@@ -262,6 +262,9 @@ const DataTable_TableHeadCell = ({
minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
overflow: columnDefType === 'data' ? 'hidden' : undefined,
textOverflow: 'ellipsis',
color: "#fff",
fontSize: "14px",
fontWeight: "500",
whiteSpace:
(columnDef.header?.length ?? 0) < 20
? 'nowrap'
@@ -271,7 +274,8 @@ const DataTable_TableHeadCell = ({
{HeaderElement}
</Box>
{(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>