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">
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className="border-b border-border-light">
{headerGroup.headers.map((header) => (
<TableHead
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"
style={getColumnStyle(
header.column.columnDef as TableColumn<TData, TValue>,
isSmallScreen,
)}
onClick={
header.column.getCanSort()
? header.column.getToggleSortingHandler()
: undefined
}
scope="col"
>
{header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())}
</TableHead>
))}
{headerGroup.headers.map((header) => {
const sortState = header.column.getIsSorted();
let ariaSort: 'ascending' | 'descending' | undefined;
if (sortState === 'asc') {
ariaSort = 'ascending';
} else if (sortState === 'desc') {
ariaSort = 'descending';
}
return (
<TableHead
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"
style={getColumnStyle(
header.column.columnDef as TableColumn<TData, TValue>,
isSmallScreen,
)}
onClick={
header.column.getCanSort()
? header.column.getToggleSortingHandler()
: undefined
}
scope="col"
aria-sort={ariaSort}
>
{header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>