mirror of https://github.com/portainer/portainer
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { HeaderGroup, TableHeaderProps } from 'react-table';
|
|
|
|
import { useTableContext } from './TableContainer';
|
|
import { TableHeaderCell } from './TableHeaderCell';
|
|
|
|
interface Props<D extends Record<string, unknown> = Record<string, unknown>> {
|
|
headers: HeaderGroup<D>[];
|
|
onSortChange?(colId: string, desc: boolean): void;
|
|
}
|
|
|
|
export function TableHeaderRow<
|
|
D extends Record<string, unknown> = Record<string, unknown>
|
|
>({
|
|
headers,
|
|
onSortChange,
|
|
className,
|
|
role,
|
|
style,
|
|
}: Props<D> & TableHeaderProps) {
|
|
useTableContext();
|
|
|
|
return (
|
|
<tr className={className} role={role} style={style}>
|
|
{headers.map((column) => (
|
|
<TableHeaderCell
|
|
headerProps={{
|
|
...column.getHeaderProps({
|
|
className: column.className,
|
|
style: {
|
|
width: column.disableResizing ? column.width : '',
|
|
},
|
|
}),
|
|
}}
|
|
key={column.id}
|
|
canSort={column.canSort}
|
|
onSortClick={(desc) => {
|
|
column.toggleSortBy(desc);
|
|
if (onSortChange) {
|
|
onSortChange(column.id, desc);
|
|
}
|
|
}}
|
|
isSorted={column.isSorted}
|
|
isSortedDesc={column.isSortedDesc}
|
|
render={() => column.render('Header')}
|
|
canFilter={!column.disableFilters}
|
|
renderFilter={() => column.render('Filter')}
|
|
/>
|
|
))}
|
|
</tr>
|
|
);
|
|
}
|