columns and data to useDataTable, then the table it returns to DataTable, which sorts and pages in the browser.filter.chip in a column's meta for a toolbar chip: a list with counts for select and multi-select, a slider with its unit for range.date column's chip opens a calendar for one day, and a date-range column's chip picks a start and an end and keeps the stays that overlap them.variant and the Filters button opens a drawer with an operator and a value per column, here from the start with placement.initialState shows in each.meta.tooltip adds a hint beside the label.meta.panelLocked keeps Name visible and in place.getSelectColumn() and pass actionBar for the selected rows' actions, and set actionBarProps.container to "window" to fix the bar to the bottom of the window.getSelectColumn({ mode: "single" }) and set enableMultiRowSelection to false for a radio per row, like picking one rate.getActionsColumn() with the menu items for each row, where Edit opens the guest in a drawer and Delete removes the row.columnPinning in initialState to keep Booking at the start and Total at the end while the rest scrolls, and drag a header edge to resize.size to small, medium or large for the row height, the same three as Table.mode to server with a rowCount, fetch each page from the controlled paging, sorting, filters and search, and show loading while it arrives.onFiltersChange to the toolbar to get the applied filters with their labels, here shown as closable tags above the table.exportCsv with a scope to download all matching rows, the current page or the selected rows as a CSV file.loading puts a spinner over the rows, and DataTableSkeleton stands in for the first load.