Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | import React from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { DragHandle } from '@mui/icons-material';
import { Box, TableCell, TableSortLabel, useTheme } from '@mui/material';
import { SortOrder } from './sort';
import IconTooltip from '../IconTooltip';
import { HeadCell } from '.';
type Props = {
headCell: HeadCell;
order: SortOrder;
orderBy?: string;
onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
i: number;
};
export default function TableHeaderItem(props: Props): JSX.Element {
const { headCell, order, orderBy, onRequestSort, i } = props;
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: headCell.id,
});
const theme = useTheme();
const style = {
transform: CSS.Transform.toString(transform),
transition,
opacity: isDragging ? 0.5 : 1,
};
const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
onRequestSort(event, property);
};
return headCell.alignment === 'right' ? (
<TableCell
ref={setNodeRef}
id={`table-header-${headCell.id}`}
key={headCell.id}
align={'right'}
padding={headCell.disablePadding ? 'none' : 'normal'}
sortDirection={orderBy === headCell.id ? order : false}
style={style}
className={headCell.className || ''}
sx={headCell.sx}
>
<Box display='flex' alignItems='center' flexDirection='row-reverse'>
{headCell.label && (
<TableSortLabel
sx={{ flexDirection: 'row-reverse' }}
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : 'asc'}
onClick={createSortHandler(headCell.id)}
>
{headCell.tooltipTitle && <IconTooltip title={headCell.tooltipTitle} disableRightMargin={true} />}
{headCell.label}
</TableSortLabel>
)}
{i > 0 && (
<DragHandle
{...attributes}
{...listeners}
sx={{
verticalAlign: 'middle',
display: 'inline-flex',
marginLeft: headCell.alignment === 'right' ? '0px' : '-20px',
color: theme.palette.common.white,
'&:hover': {
color: theme.palette.neutral[600],
},
}}
/>
)}
</Box>
</TableCell>
) : (
<TableCell
ref={setNodeRef}
id={`table-header-${headCell.id}`}
key={headCell.id}
align={'left'}
padding={headCell.disablePadding ? 'none' : 'normal'}
sortDirection={orderBy === headCell.id ? order : false}
style={style}
className={headCell.className || ''}
sx={headCell.sx}
>
{headCell.label && (
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : 'asc'}
onClick={createSortHandler(headCell.id)}
>
{i > 0 && (
<DragHandle
{...attributes}
{...listeners}
sx={{
marginLeft: '-20px',
color: theme.palette.common.white,
'&:hover': {
color: theme.palette.neutral[600],
},
}}
/>
)}
{headCell.label}
{headCell.tooltipTitle && <IconTooltip title={headCell.tooltipTitle} />}
</TableSortLabel>
)}
</TableCell>
);
}
|