54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { IconArrowsSort, IconChevronDown, IconChevronUp } from "@tabler/icons-react";
|
|
import { flexRender } from "@tanstack/react-table";
|
|
import type { TableLayoutProps } from "src/components";
|
|
|
|
function TableHeader<T>(props: TableLayoutProps<T>) {
|
|
const { tableInstance } = props;
|
|
const headerGroups = tableInstance.getHeaderGroups();
|
|
|
|
return (
|
|
<thead>
|
|
{headerGroups.map((headerGroup: any) => (
|
|
<tr key={headerGroup.id}>
|
|
{headerGroup.headers.map((header: any) => {
|
|
const { column } = header;
|
|
const { className } = (column.columnDef.meta as any) ?? {};
|
|
const canSort = column.getCanSort();
|
|
const sortDir = column.getIsSorted();
|
|
|
|
const headerContent = header.isPlaceholder
|
|
? null
|
|
: typeof column.columnDef.header === "string"
|
|
? column.columnDef.header
|
|
: flexRender(column.columnDef.header, header.getContext());
|
|
|
|
const sortIcon = canSort ? (
|
|
sortDir === "asc" ? (
|
|
<IconChevronUp size={14} className="ms-1" />
|
|
) : sortDir === "desc" ? (
|
|
<IconChevronDown size={14} className="ms-1" />
|
|
) : (
|
|
<IconArrowsSort size={14} className="ms-1 opacity-50" />
|
|
)
|
|
) : null;
|
|
|
|
return (
|
|
<th
|
|
key={header.id}
|
|
className={className}
|
|
onClick={canSort ? column.getToggleSortingHandler() : undefined}
|
|
style={canSort ? { cursor: "pointer", userSelect: "none" } : undefined}
|
|
>
|
|
{headerContent}
|
|
{sortIcon}
|
|
</th>
|
|
);
|
|
})}
|
|
</tr>
|
|
))}
|
|
</thead>
|
|
);
|
|
}
|
|
|
|
export { TableHeader };
|