63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import { Header, flexRender, TableMeta } from '@tanstack/react-table';
|
|
|
|
import { filterHOC } from './Filter';
|
|
import { TableHeaderCell } from './TableHeaderCell';
|
|
import { DefaultType } from './types';
|
|
|
|
interface Props<D extends DefaultType = DefaultType> {
|
|
headers: Header<D, unknown>[];
|
|
onSortChange?(colId: string, desc: boolean): void;
|
|
tableMeta: TableMeta<D> | undefined;
|
|
}
|
|
|
|
export function TableHeaderRow<D extends DefaultType = DefaultType>({
|
|
headers,
|
|
onSortChange,
|
|
tableMeta,
|
|
}: Props<D>) {
|
|
return (
|
|
<tr>
|
|
{headers.map((header) => {
|
|
const sortDirection = header.column.getIsSorted();
|
|
const {
|
|
meta: { className, width, filter = filterHOC('Filter') } = {
|
|
className: '',
|
|
width: undefined,
|
|
},
|
|
} = header.column.columnDef;
|
|
|
|
return (
|
|
<TableHeaderCell
|
|
className={className}
|
|
style={{
|
|
width,
|
|
}}
|
|
key={header.id}
|
|
canSort={header.column.getCanSort()}
|
|
onSortClick={(desc) => {
|
|
header.column.toggleSorting(desc);
|
|
if (onSortChange) {
|
|
onSortChange(header.id, desc);
|
|
}
|
|
}}
|
|
isSorted={!!sortDirection}
|
|
isSortedDesc={sortDirection ? sortDirection === 'desc' : false}
|
|
render={() =>
|
|
flexRender(header.column.columnDef.header, header.getContext())
|
|
}
|
|
renderFilter={
|
|
header.column.getCanFilter()
|
|
? () =>
|
|
flexRender(filter, {
|
|
column: header.column,
|
|
tableMeta,
|
|
})
|
|
: undefined
|
|
}
|
|
/>
|
|
);
|
|
})}
|
|
</tr>
|
|
);
|
|
}
|