mirror of https://github.com/portainer/portainer
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
|
import { HeaderGroup, TableHeaderProps } from 'react-table';
|
||
|
|
||
|
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) {
|
||
|
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>
|
||
|
);
|
||
|
}
|