DataTable renders an array of your own rows through a list of column definitions. Where Table takes cells that are already rendered, DataTable keeps the rows as data, so it can sort by the values rather than by the text on screen, select rows by id, and page through them. It draws the same table as Table.
DataTable is generic over the row type, so cell and sort receive your rows typed. A column without cell shows row[key]. Name the table with aria-label, or point aria-labelledby at a heading above it.
A sortable column's header is a button. Each press cycles ascending, descending and back to the rows' own order, and the sorted header carries aria-sort. Without a sort function the column compares row[key]: numbers as numbers, dates by time, text in natural order ("Item 2" before "Item 10"), with empty values last in both directions. Give the column a sort comparator, written ascending, when the key is not a field of the row or its values need their own order:
DataTable keeps the sort itself, starting from defaultSort, or follows sort and onSortChange when the host owns it. null is unsorted. A new sort returns to the first page.
selectable adds a checkbox column. The header checkbox selects or clears the rows on screen, and shows a mixed state when only some of them are selected; selection is kept across pages. getRowId gives each row the id that selection reports; without it a row's id field is used, or its index. getRowLabel names each row's checkbox for screen readers.
paginated shows the rows a page at a time with Pagination below; perPageOptions adds a page-size select.
When the server sorts and pages, pass the current page's rows with count, the number of rows on the server (or total, the number of pages). DataTable then neither sorts nor slices the rows: it reports onPageChange, onPerPageChange and onSortChange, and shows loading while you fetch. Give rows a getRowId here, since an index repeats from page to page.
With no rows DataTable shows an empty state; pass your own as emptyState. While loading, skeleton rows stand in for the page (as many as perPage), the table is marked aria-busy, and sorting, selection and pagination are disabled.
stickyHeader keeps the header row in view while the rows scroll; pair it with maxHeight, which on DataTable caps the scroll area. striped, hoverable and compact work as on Table.
