Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-16 16:30:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix: add aria-sort in table headers for archived chats and shared links datatables

Browse source
This commit is contained in:
Dustin Healy 2025-12-15 13:21:45 -08:00
parent 02fc4647e1
commit 858c41b01d
1 changed files with 31 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

51
packages/client/src/components/DataTable.tsx
View file

@ -438,26 +438,37 @@ export default function DataTable<TData, TValue>({
<TableHeader className="sticky top-0 z-50 bg-surface-secondary"> <TableHeader className="sticky top-0 z-50 bg-surface-secondary">
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className="border-b border-border-light"> <TableRow key={headerGroup.id} className="border-b border-border-light">
{headerGroup.headers.map((header) => ( {headerGroup.headers.map((header) => {
<TableHead const sortState = header.column.getIsSorted();
key={header.id} let ariaSort: 'ascending' | 'descending' | undefined;
className="whitespace-nowrap bg-surface-secondary px-2 py-2 text-left text-sm font-medium text-text-secondary sm:px-4" if (sortState === 'asc') {
style={getColumnStyle( ariaSort = 'ascending';
header.column.columnDef as TableColumn<TData, TValue>, } else if (sortState === 'desc') {
isSmallScreen, ariaSort = 'descending';
)} }
onClick={
header.column.getCanSort() return (
? header.column.getToggleSortingHandler() <TableHead
: undefined key={header.id}
} className="whitespace-nowrap bg-surface-secondary px-2 py-2 text-left text-sm font-medium text-text-secondary sm:px-4"
scope="col" style={getColumnStyle(
> header.column.columnDef as TableColumn<TData, TValue>,
{header.isPlaceholder isSmallScreen,
? null )}
: flexRender(header.column.columnDef.header, header.getContext())} onClick={
</TableHead> header.column.getCanSort()
))} ? header.column.getToggleSortingHandler()
: undefined
}
scope="col"
aria-sort={ariaSort}
>
{header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())}
</TableHead>
);
})}
</TableRow> </TableRow>
))} ))}
</TableHeader> </TableHeader>