diff --git a/packages/client/src/components/DataTable.tsx b/packages/client/src/components/DataTable.tsx index 6a26e31d76..2527aeead1 100644 --- a/packages/client/src/components/DataTable.tsx +++ b/packages/client/src/components/DataTable.tsx @@ -438,26 +438,37 @@ export default function DataTable({ {table.getHeaderGroups().map((headerGroup) => ( - {headerGroup.headers.map((header) => ( - , - isSmallScreen, - )} - onClick={ - header.column.getCanSort() - ? header.column.getToggleSortingHandler() - : undefined - } - scope="col" - > - {header.isPlaceholder - ? null - : flexRender(header.column.columnDef.header, header.getContext())} - - ))} + {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 ( + , + isSmallScreen, + )} + onClick={ + header.column.getCanSort() + ? header.column.getToggleSortingHandler() + : undefined + } + scope="col" + aria-sort={ariaSort} + > + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + ); + })} ))}