@majapisoftwares/ui 5.0.0 → 6.0.0

package/src/patterns/data-table.tsx

@@ -1,15 +1,112 @@
 "use client";
+"use no memo";
 
-import { useState, type ReactNode } from "react";
+// Ported from the Numa app's data table (majapisoftwares/numa); this is now the
+// canonical copy. Effects below intentionally sync restored localStorage
+// preferences and incoming props into table state.
+/* eslint-disable react-hooks/set-state-in-effect */
+
+import * as React from "react";
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import {
-  ArrowDown,
-  ArrowUp,
-  ArrowUpRight,
-  ChevronLeft,
-  ChevronRight,
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  CircleAlertIcon,
+  InboxIcon,
+  LockIcon,
+  RotateCwIcon,
+  TriangleAlertIcon,
+  ArrowDownWideNarrowIcon,
+  ArrowUpDownIcon,
+  ArrowUpNarrowWideIcon,
+  CheckIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+  Columns3Icon,
+  EyeOffIcon,
+  FunnelIcon,
+  FunnelXIcon,
+  GripVerticalIcon,
+  SearchIcon,
+  XIcon,
 } from "lucide-react";
+import {
+  createTable,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type Column,
+  type ColumnDef,
+  type ColumnFiltersState,
+  type ColumnOrderState,
+  type ColumnSizingState,
+  type FilterFn,
+  type Header,
+  type OnChangeFn,
+  type PaginationState,
+  type RowData,
+  type RowSelectionState,
+  type SortingState,
+  type Table as TanstackTable,
+  type TableOptions,
+  type TableOptionsResolved,
+  type VisibilityState,
+} from "@tanstack/react-table";
+
+import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
+import { Checkbox } from "../components/ui/checkbox";
+import { FilterTabs } from "./filter-tabs";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../components/ui/dropdown-menu";
 import { Input } from "../components/ui/input";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "../components/ui/input-group";
+import { Label } from "../components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../components/ui/select";
+import { Separator } from "../components/ui/separator";
+import { Skeleton } from "../components/ui/skeleton";
 import {
   Table,
   TableBody,
@@ -18,208 +115,2372 @@ import {
   TableHeader,
   TableRow,
 } from "../components/ui/table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
+import { cn } from "cn";
+import { defineMessages, useMessages, useUiMessages } from "../lib/i18n";
 import {
   Empty,
+  EmptyContent,
   EmptyDescription,
   EmptyHeader,
+  EmptyMedia,
   EmptyTitle,
 } from "../components/ui/empty";
-import { Skeleton } from "../components/ui/skeleton";
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from "../components/ui/alert";
 
-export interface DataColumn<T> {
-  id: string;
-  header: string;
-  cell: (row: T) => ReactNode;
-  sortValue?: (row: T) => string | number;
-}
-export interface DataTableProps<T> {
-  rows: T[];
-  columns: DataColumn<T>[];
-  getRowId: (row: T) => string;
-  searchValue: (row: T) => string;
-  searchLabel?: string;
-  filters?: ReactNode;
-  loading?: boolean;
-  onOpen?: (row: T) => void;
-  rowLabel?: (row: T) => string;
+export type DataTableColumnAlign = "left" | "center" | "right";
+type DataTableSortDirection = false | "asc" | "desc";
+
+export type DataTableFilterOption = {
+  label: string;
+  value: string;
+};
+
+export type DataTableRangeFilter = {
+  min?: string;
+  max?: string;
+};
+
+export type DataTableDateRangeFilter = {
+  from?: string;
+  to?: string;
+};
+
+// Multi-select filter value: an array keeps the matching rows; the object form
+// hides the selected values instead. Server-filtered tables only receive arrays.
+export type DataTableMultiFilterValue =
+  string[] | { exclude: true; values: string[] };
+
+export type DataTableColumnFilter<TData extends RowData> =
+  | {
+      placeholder?: string;
+      type: "text";
+    }
+  | {
+      options: DataTableFilterOption[];
+      type: "multi";
+    }
+  | {
+      max?: number;
+      maxPlaceholder?: string;
+      min?: number;
+      minPlaceholder?: string;
+      type: "number-range";
+    }
+  | {
+      type: "date-range";
+    }
+  | {
+      render: (column: Column<TData, unknown>) => React.ReactNode;
+      type: "custom";
+    };
+
+export type DataTableColumnMeta<TData extends RowData> = {
+  align?: DataTableColumnAlign;
+  cellClassName?: string;
+  filter?: DataTableColumnFilter<TData>;
+  headerClassName?: string;
+  label?: string;
+};
+
+declare module "@tanstack/react-table" {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    align?: DataTableColumnAlign;
+    cellClassName?: string;
+    filter?: DataTableColumnFilter<TData>;
+    headerClassName?: string;
+    label?: string;
+    valueType?: TValue;
+  }
+
+  interface TableMeta<TData extends RowData> {
+    enableExcludeFilters?: boolean;
+    rowType?: TData;
+  }
+}
+
+/** Window event that clears a table's search and filters (detail: { storageKey? }). */
+export const DATA_TABLE_RESET_FILTERS_EVENT =
+  "majapi-ui:data-table:reset-filters";
+
+/** Clears search and filters of every table, or only the one with `storageKey`. */
+export function resetDataTableFilters(storageKey?: string) {
+  window.dispatchEvent(
+    new CustomEvent(DATA_TABLE_RESET_FILTERS_EVENT, { detail: { storageKey } }),
+  );
+}
+
+const dataTableMessages = defineMessages({
+  en: {
+    search: "Search...",
+    resultCount: (count: number) =>
+      `${count} ${count === 1 ? "result" : "results"}`,
+    rowCount: (count: number) => `${count} ${count === 1 ? "row" : "rows"}`,
+    // English needs no plural form here; pt-BR uses count.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    selected: (rows: string, count: number) => `${rows} selected`,
+    clearSelection: "Clear selection",
+    clearFilters: "Clear filters",
+    open: "Open",
+    resizeColumn: (label: string) => `Resize column ${label}`,
+    filterActive: ", filter active",
+    excludeFilterActive: ", exclusion filter active",
+    sortCriterion: (n: number) => `Sort #${n}`,
+    sortCriterionTitle: (n: number) => `Sort criterion #${n}`,
+    clearAll: "Clear all",
+    hide: "Hide",
+    toggleSort: (label: string) => `Toggle sorting for ${label}`,
+    reorderColumn: (label: string) => `Reorder column ${label}`,
+    sort: "Sort",
+    removeSort: "Remove sort",
+    ascending: "Ascending",
+    descending: "Descending",
+    filter: "Filter",
+    min: "Min.",
+    max: "Max.",
+    filterBy: (label: string) => `Filter by ${label}`,
+    filterMode: "Filter mode",
+    show: "Show",
+    exclude: "Exclude",
+    valuesToExclude: "Values to exclude",
+    valuesToShow: "Values to show",
+    customizeColumns: "Customize columns",
+    columnsTooltip: "Show, hide and reset columns",
+    columns: "Columns",
+    resetColumns: "Reset columns",
+    rowsPerPage: "Rows",
+    page: (page: number, total: number) => `Page ${page} of ${total}`,
+    ofSummary: (part: string, total: string) => `${part} of ${total}.`,
+    firstPage: "First page",
+    previousPage: "Previous page",
+    nextPage: "Next page",
+    lastPage: "Last page",
+  },
+  "pt-BR": {
+    search: "Buscar...",
+    resultCount: (count: number) =>
+      `${count} resultado${count === 1 ? "" : "s"}`,
+    rowCount: (count: number) => `${count} registro${count === 1 ? "" : "s"}`,
+    selected: (rows: string, count: number) =>
+      `${rows} selecionado${count === 1 ? "" : "s"}`,
+    clearSelection: "Limpar seleção",
+    clearFilters: "Limpar filtros",
+    open: "Abrir",
+    resizeColumn: (label: string) => `Redimensionar coluna ${label}`,
+    filterActive: ", filtro ativo",
+    excludeFilterActive: ", filtro de exclusão ativo",
+    sortCriterion: (n: number) => `${n}º critério`,
+    sortCriterionTitle: (n: number) => `${n}º critério de ordenação`,
+    clearAll: "Limpar tudo",
+    hide: "Ocultar",
+    toggleSort: (label: string) => `Alternar ordenação da coluna ${label}`,
+    reorderColumn: (label: string) => `Reordenar coluna ${label}`,
+    sort: "Ordenar",
+    removeSort: "Remover ordem",
+    ascending: "Crescente",
+    descending: "Decrescente",
+    filter: "Filtrar",
+    min: "Mín.",
+    max: "Máx.",
+    filterBy: (label: string) => `Filtrar por ${label}`,
+    filterMode: "Modo do filtro",
+    show: "Mostrar",
+    exclude: "Excluir",
+    valuesToExclude: "Valores a excluir",
+    valuesToShow: "Valores a mostrar",
+    customizeColumns: "Personalizar colunas",
+    columnsTooltip: "Mostrar, ocultar e restaurar colunas",
+    columns: "Colunas",
+    resetColumns: "Restaurar colunas",
+    rowsPerPage: "Linhas",
+    page: (page: number, total: number) => `Página ${page} de ${total}`,
+    ofSummary: (part: string, total: string) => `${part} de ${total}.`,
+    firstPage: "Primeira página",
+    previousPage: "Página anterior",
+    nextPage: "Próxima página",
+    lastPage: "Última página",
+  },
+});
+
+type StoredDataTableSettings = {
+  columnFilters?: ColumnFiltersState;
+  columnOrder?: ColumnOrderState;
+  columnSizing?: ColumnSizingState;
+  columnVisibility?: VisibilityState;
+  globalFilter?: string;
   pageSize?: number;
+  sorting?: SortingState;
+};
+
+export type DataTableProps<TData extends RowData> = {
+  activeRowId?: string | null;
+  columns: ColumnDef<TData, unknown>[];
+  data: TData[];
+  /** Text when there are no rows; defaults to a translated message. */
+  emptyMessage?: string;
+  /** Rich empty state (e.g. with a create action), shown when nothing is filtered. */
+  emptyState?: React.ReactNode;
+  /**
+   * Fills the parent's height and scrolls rows inside the table (sticky
+   * header, toolbar and pagination stay visible). The parent must be a flex
+   * column with a bounded height, e.g. `AppShell fillHeight`.
+   */
+  fillHeight?: boolean;
+  /** Shows skeleton rows instead of data. */
+  loading?: boolean;
+  /** Load failure. With rows it shows as stale data; without, replaces the table. */
+  error?: string;
+  onRetry?: () => void;
+  /** Non-blocking notice, e.g. partial coverage. */
+  warning?: string;
+  /** Data can't be shown at all, e.g. missing permission. */
+  unavailable?: string;
+  enablePersistence?: boolean;
+  enableRowSelection?: boolean;
+  // Offers "Excluir" in multi-select column filters. Defaults to off for
+  // server-backed tables (onStateChange), whose APIs only read include arrays.
+  enableExcludeFilters?: boolean;
+  filterFns?: Record<string, FilterFn<TData>>;
+  formatResultCount?: (count: number) => string;
+  formatRowCount?: (count: number) => string;
+  formatSelectedRowCount?: (count: number) => string;
+  getRowId: (row: TData) => string;
+  globalFilterFn?: FilterFn<TData>;
+  initialColumnFilters?: ColumnFiltersState;
+  /** Initial search text. */
+  initialGlobalFilter?: string;
+  /** Makes rows clickable (and Enter/Space activatable), e.g. to open details. */
+  onRowClick?: (row: TData) => void;
+  /** Accessible name for a clickable row; defaults to its id. */
+  getRowLabel?: (row: TData) => string;
+  initialColumnOrder?: ColumnOrderState;
+  initialColumnVisibility?: VisibilityState;
+  initialPageSize?: number;
+  initialSorting?: SortingState;
+  lockedEndColumnIds?: string[];
+  lockedStartColumnIds?: string[];
+  manualFiltering?: boolean;
+  manualPagination?: boolean;
+  manualSorting?: boolean;
+  onStateChange?: (state: DataTableStateSnapshot) => void;
+  pageCount?: number;
+  pageSizeOptions?: number[];
+  rowCount?: number;
+  rowSelectionActions?: (table: TanstackTable<TData>) => React.ReactNode;
+  searchPlaceholder?: string;
+  /** Persists sorting, filters, columns and page size in localStorage under this key. */
+  storageKey?: string;
+  toolbarBelow?: (table: TanstackTable<TData>) => React.ReactNode;
+  toolbarEnd?: (table: TanstackTable<TData>) => React.ReactNode;
+  toolbarStart?: (table: TanstackTable<TData>) => React.ReactNode;
+};
+
+export type DataTableStateSnapshot = {
+  columnFilters: ColumnFiltersState;
+  globalFilter: string;
+  pagination: PaginationState;
+  sorting: SortingState;
+};
+
+export type DataTableFilterTab = {
+  count?: number;
+  label: string;
+  value: string;
+};
+
+type DataTableObjectFilter = DataTableRangeFilter & DataTableDateRangeFilter;
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function readStringProperty(value: unknown, key: string) {
+  if (!isRecord(value)) {
+    return undefined;
+  }
+
+  const property = value[key];
+  return typeof property === "string" ? property : undefined;
+}
+
+function readStringArrayFilter(value: unknown) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+
+  return value.filter((item): item is string => typeof item === "string");
+}
+
+export function readMultiFilterValue(value: unknown): {
+  exclude: boolean;
+  values: string[];
+} {
+  if (isRecord(value) && value.exclude === true) {
+    return { exclude: true, values: readStringArrayFilter(value.values) };
+  }
+
+  return { exclude: false, values: readStringArrayFilter(value) };
+}
+
+function toMultiFilterValue(
+  exclude: boolean,
+  values: string[],
+): DataTableMultiFilterValue | undefined {
+  if (values.length === 0) {
+    return undefined;
+  }
+
+  return exclude ? { exclude: true, values } : values;
+}
+
+function isString(value: unknown): value is string {
+  return typeof value === "string";
+}
+
+function readRangeFilterValue(value: unknown): DataTableRangeFilter {
+  return {
+    max: readStringProperty(value, "max"),
+    min: readStringProperty(value, "min"),
+  };
+}
+
+function readDateRangeFilterValue(value: unknown): DataTableDateRangeFilter {
+  return {
+    from: readStringProperty(value, "from"),
+    to: readStringProperty(value, "to"),
+  };
+}
+
+function readObjectFilterValue(value: unknown): Partial<DataTableObjectFilter> {
+  return {
+    ...readRangeFilterValue(value),
+    ...readDateRangeFilterValue(value),
+  };
+}
+
+export function createArrayIncludesSomeFilter<
+  TData extends RowData,
+>(): FilterFn<TData> {
+  return (row, columnId, filterValue) => {
+    const { exclude, values } = readMultiFilterValue(filterValue);
+
+    if (values.length === 0) {
+      return true;
+    }
+
+    return values.includes(row.getValue(columnId)) !== exclude;
+  };
+}
+
+export function createNumberInRangeFilter<
+  TData extends RowData,
+>(): FilterFn<TData> {
+  return (row, columnId, filterValue) => {
+    const range = readRangeFilterValue(filterValue);
+    const min = range?.min ? Number(range.min) : null;
+    const max = range?.max ? Number(range.max) : null;
+    const value = Number(row.getValue(columnId));
+
+    if (min !== null && Number.isFinite(min) && value < min) {
+      return false;
+    }
+
+    if (max !== null && Number.isFinite(max) && value > max) {
+      return false;
+    }
+
+    return true;
+  };
+}
+
+export function createDateInRangeFilter<
+  TData extends RowData,
+>(): FilterFn<TData> {
+  return (row, columnId, filterValue) => {
+    const range = readDateRangeFilterValue(filterValue);
+    const value = new Date(row.getValue<string>(columnId)).getTime();
+    const from = range?.from
+      ? new Date(`${range.from}T00:00:00`).getTime()
+      : null;
+    const to = range?.to ? new Date(`${range.to}T23:59:59`).getTime() : null;
+
+    if (from !== null && Number.isFinite(from) && value < from) {
+      return false;
+    }
+
+    if (to !== null && Number.isFinite(to) && value > to) {
+      return false;
+    }
+
+    return true;
+  };
+}
+
+export function getSingleArrayFilterValue(
+  filterValue: unknown,
+): "all" | "custom" | string {
+  const { exclude, values } = readMultiFilterValue(filterValue);
+
+  if (exclude && values.length > 0) {
+    return "custom";
+  }
+
+  if (values.length === 0) {
+    return "all";
+  }
+
+  if (values.length === 1) {
+    return values[0] ?? "all";
+  }
+
+  return "custom";
+}
+
+export function DataTableColumnFilterTabs<TData extends RowData>({
+  className,
+  columnId,
+  options,
+  table,
+}: {
+  className?: string;
+  columnId: string;
+  options: DataTableFilterTab[];
+  table: TanstackTable<TData>;
+}) {
+  const column = table.getColumn(columnId);
+  const value = getSingleArrayFilterValue(column?.getFilterValue());
+
+  const handleValueChange = (nextValue: string) => {
+    column?.setFilterValue(nextValue === "all" ? undefined : [nextValue]);
+  };
+
+  return (
+    <FilterTabs
+      className={className}
+      onValueChange={handleValueChange}
+      options={options}
+      value={value}
+    />
+  );
+}
+
+export function createDataTableFilterTabOptions<TItem>(
+  items: TItem[],
+  filters: Array<Pick<DataTableFilterTab, "label" | "value">>,
+  getItemValue: (item: TItem) => string,
+) {
+  return filters.map((filter) => ({
+    ...filter,
+    count:
+      filter.value === "all"
+        ? undefined
+        : items.filter((item) => getItemValue(item) === filter.value).length,
+  }));
+}
+
+function getColumnId<TData extends RowData>(
+  column: ColumnDef<TData, unknown>,
+): string | null {
+  if ("id" in column && column.id) {
+    return column.id;
+  }
+
+  if ("accessorKey" in column && typeof column.accessorKey === "string") {
+    return column.accessorKey;
+  }
+
+  return null;
+}
+
+function normalizeColumnOrder(
+  columnOrder: ColumnOrderState | undefined,
+  defaultColumnOrder: ColumnOrderState,
+  lockedStartColumnIds: string[],
+  lockedEndColumnIds: string[],
+) {
+  const validColumns = new Set(defaultColumnOrder);
+  const lockedStart = lockedStartColumnIds.filter((columnId) =>
+    validColumns.has(columnId),
+  );
+  const lockedEnd = lockedEndColumnIds.filter((columnId) =>
+    validColumns.has(columnId),
+  );
+  const lockedColumns = new Set([...lockedStart, ...lockedEnd]);
+  const movableColumns = (columnOrder ?? []).filter(
+    (columnId) => validColumns.has(columnId) && !lockedColumns.has(columnId),
+  );
+
+  for (const columnId of defaultColumnOrder) {
+    if (!lockedColumns.has(columnId) && !movableColumns.includes(columnId)) {
+      movableColumns.push(columnId);
+    }
+  }
+
+  return [...lockedStart, ...movableColumns, ...lockedEnd];
+}
+
+function areColumnOrdersEqual(left: ColumnOrderState, right: ColumnOrderState) {
+  return (
+    left.length === right.length &&
+    left.every((columnId, index) => columnId === right[index])
+  );
 }
-export function DataTable<T>({
-  rows,
-  columns,
-  getRowId,
-  searchValue,
-  searchLabel = "Buscar registros",
-  filters,
-  loading = false,
-  onOpen,
-  rowLabel,
-  pageSize = 10,
-}: DataTableProps<T>) {
-  const [query, setQuery] = useState("");
-  const [sort, setSort] = useState<{ id: string; desc: boolean } | null>(null);
-  const [page, setPage] = useState(0);
-  const selected = rows.filter((row) =>
-    searchValue(row).toLocaleLowerCase().includes(query.toLocaleLowerCase()),
-  );
-  const sortedColumn = columns.find((column) => column.id === sort?.id);
-  if (sortedColumn?.sortValue)
-    selected.sort((a, b) => {
-      const x = sortedColumn.sortValue!(a),
-        y = sortedColumn.sortValue!(b);
-      return (
-        (typeof x === "number" && typeof y === "number"
-          ? x - y
-          : String(x).localeCompare(String(y), "pt-BR")) * (sort?.desc ? -1 : 1)
+
+function getColumnMeta<TData extends RowData>(column: Column<TData, unknown>) {
+  return column.columnDef.meta;
+}
+
+function getColumnLabel<TData extends RowData>(column: Column<TData, unknown>) {
+  const header = column.columnDef.header;
+
+  return (
+    getColumnMeta(column)?.label ??
+    (typeof header === "string" ? header : column.id)
+  );
+}
+
+function getColumnAlign<TData extends RowData>(column: Column<TData, unknown>) {
+  return getColumnMeta(column)?.align ?? "left";
+}
+
+function getColumnAlignClass<TData extends RowData>(
+  column: Column<TData, unknown>,
+) {
+  const align = getColumnAlign(column);
+
+  return cn(
+    align === "center" && "text-center",
+    align === "right" && "text-right",
+  );
+}
+
+function getColumnAriaSort(
+  isSorted: DataTableSortDirection,
+): "ascending" | "descending" | undefined {
+  if (!isSorted) {
+    return undefined;
+  }
+
+  return isSorted === "asc" ? "ascending" : "descending";
+}
+
+function getHeaderControlVisibilityClass(isVisible: boolean) {
+  if (isVisible) {
+    return "pointer-events-auto opacity-100";
+  }
+
+  return "pointer-events-none opacity-0 group-focus-within/header:pointer-events-auto group-focus-within/header:opacity-100 group-hover/header:pointer-events-auto group-hover/header:opacity-100";
+}
+
+function hasRangeFilter(value: unknown) {
+  const range = readObjectFilterValue(value);
+  return Boolean(range.min || range.max || range.from || range.to);
+}
+
+function isFilterValueActive(value: unknown) {
+  if (Array.isArray(value)) {
+    return value.length > 0;
+  }
+
+  if (isRecord(value) && value.exclude === true) {
+    return readMultiFilterValue(value).values.length > 0;
+  }
+
+  if (typeof value === "object") {
+    return hasRangeFilter(value);
+  }
+
+  return Boolean(value);
+}
+
+function setObjectFilterValue<TData extends RowData>(
+  column: Column<TData, unknown>,
+  key: keyof DataTableObjectFilter,
+  value: string,
+) {
+  const next = {
+    ...readObjectFilterValue(column.getFilterValue()),
+    [key]: value,
+  };
+
+  if (!hasRangeFilter(next)) {
+    column.setFilterValue(undefined);
+    return;
+  }
+
+  column.setFilterValue(next);
+}
+
+function setColumnSorting<TData extends RowData>(
+  table: TanstackTable<TData>,
+  columnId: string,
+  desc: boolean,
+) {
+  table.setSorting((current) => {
+    const next = [
+      ...current.filter((sort) => sort.id !== columnId),
+      { id: columnId, desc },
+    ];
+
+    return next.slice(-5);
+  });
+}
+
+function clearColumnSorting<TData extends RowData>(
+  table: TanstackTable<TData>,
+  columnId: string,
+) {
+  table.setSorting((current) => current.filter((sort) => sort.id !== columnId));
+}
+
+function toggleColumnSorting<TData extends RowData>(
+  table: TanstackTable<TData>,
+  columnId: string,
+) {
+  table.setSorting((current) => {
+    const currentSort = current.find((sort) => sort.id === columnId);
+    const next = current.filter((sort) => sort.id !== columnId);
+
+    if (!currentSort) {
+      return [...next, { id: columnId, desc: false }].slice(-5);
+    }
+
+    if (!currentSort.desc) {
+      return [...next, { id: columnId, desc: true }].slice(-5);
+    }
+
+    return next;
+  });
+}
+
+function isColumnOrderState(value: unknown): value is ColumnOrderState {
+  return (
+    Array.isArray(value) &&
+    value.every((columnId) => typeof columnId === "string")
+  );
+}
+
+function isColumnFiltersState(value: unknown): value is ColumnFiltersState {
+  return (
+    Array.isArray(value) &&
+    value.every((filter) => isRecord(filter) && typeof filter.id === "string")
+  );
+}
+
+function isVisibilityState(value: unknown): value is VisibilityState {
+  return (
+    isRecord(value) &&
+    Object.values(value).every((visible) => typeof visible === "boolean")
+  );
+}
+
+function isSortingState(value: unknown): value is SortingState {
+  return (
+    Array.isArray(value) &&
+    value.every(
+      (sort) =>
+        isRecord(sort) &&
+        typeof sort.id === "string" &&
+        typeof sort.desc === "boolean",
+    )
+  );
+}
+
+function parseStoredDataTableSettings(
+  value: string,
+): StoredDataTableSettings | null {
+  const parsed = JSON.parse(value);
+
+  if (!isRecord(parsed)) {
+    return null;
+  }
+
+  const settings: StoredDataTableSettings = {};
+
+  if (isColumnFiltersState(parsed.columnFilters)) {
+    settings.columnFilters = parsed.columnFilters;
+  }
+
+  if (isColumnOrderState(parsed.columnOrder)) {
+    settings.columnOrder = parsed.columnOrder;
+  }
+
+  if (isVisibilityState(parsed.columnVisibility)) {
+    settings.columnVisibility = parsed.columnVisibility;
+  }
+
+  if (typeof parsed.globalFilter === "string") {
+    settings.globalFilter = parsed.globalFilter;
+  }
+
+  if (typeof parsed.pageSize === "number" && Number.isFinite(parsed.pageSize)) {
+    settings.pageSize = parsed.pageSize;
+  }
+
+  if (isSortingState(parsed.sorting)) {
+    settings.sorting = parsed.sorting;
+  }
+
+  return settings;
+}
+
+function getStoredDataTableSettings(storageKey: string) {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  try {
+    const value = window.localStorage.getItem(storageKey);
+    return value ? parseStoredDataTableSettings(value) : null;
+  } catch {
+    return null;
+  }
+}
+
+function pickKnownColumnEntries<TValue>(
+  record: Record<string, TValue> | undefined,
+  columnIds: string[],
+) {
+  if (!record) {
+    return undefined;
+  }
+
+  return Object.fromEntries(
+    Object.entries(record).filter(([columnId]) => columnIds.includes(columnId)),
+  );
+}
+
+function retainKnownColumnSettings(
+  settings: StoredDataTableSettings | null,
+  columnIds: string[],
+): StoredDataTableSettings | null {
+  if (!settings) {
+    return null;
+  }
+
+  const sorting = settings.sorting?.filter((sort) =>
+    columnIds.includes(sort.id),
+  );
+
+  return {
+    ...settings,
+    columnFilters: settings.columnFilters?.filter((filter) =>
+      columnIds.includes(filter.id),
+    ),
+    columnSizing: pickKnownColumnEntries(settings.columnSizing, columnIds),
+    columnVisibility: pickKnownColumnEntries(
+      settings.columnVisibility,
+      columnIds,
+    ),
+    sorting: sorting?.length ? sorting : undefined,
+  };
+}
+
+function getResetFiltersStorageKey(event: Event) {
+  if (!(event instanceof CustomEvent)) {
+    return null;
+  }
+
+  const detail = event.detail;
+  if (!isRecord(detail)) {
+    return null;
+  }
+
+  const storageKey = detail.storageKey;
+  return typeof storageKey === "string" ? storageKey : null;
+}
+
+function isLockedColumn(
+  columnId: string,
+  lockedStartColumnIds: string[],
+  lockedEndColumnIds: string[],
+) {
+  return (
+    lockedStartColumnIds.includes(columnId) ||
+    lockedEndColumnIds.includes(columnId)
+  );
+}
+
+function getStorageSafeId(storageKey: string) {
+  return storageKey.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+
+function getOptionalColumnOrderKey(columnOrder?: ColumnOrderState) {
+  return columnOrder?.join("|") ?? "";
+}
+
+function getColumnFiltersKey(columnFilters: ColumnFiltersState) {
+  return JSON.stringify(columnFilters);
+}
+
+function getVisibilityStateKey(visibility: VisibilityState) {
+  const entries = Object.entries(visibility).sort(([left], [right]) =>
+    left.localeCompare(right),
+  );
+
+  return JSON.stringify(entries);
+}
+
+function getSortingKey(sorting: SortingState) {
+  return JSON.stringify(sorting);
+}
+
+function useStableValueByKey<TValue>(value: TValue, key: string) {
+  const [stored, setStored] = React.useState({ key, value });
+
+  React.useEffect(() => {
+    setStored((current) => (current.key === key ? current : { key, value }));
+  }, [key, value]);
+
+  return stored.value;
+}
+
+function useDataTableInstance<TData extends RowData>(
+  options: TableOptions<TData>,
+) {
+  const resolvedOptions: TableOptionsResolved<TData> = {
+    onStateChange: () => undefined,
+    renderFallbackValue: null,
+    state: {},
+    ...options,
+  };
+
+  const [table] = React.useState(() => createTable<TData>(resolvedOptions));
+  const [state, setState] = React.useState(() => table.initialState);
+
+  table.setOptions((previous) => ({
+    ...previous,
+    ...options,
+    onStateChange: (updater) => {
+      setState(updater);
+      options.onStateChange?.(updater);
+    },
+    state: {
+      ...state,
+      ...options.state,
+    },
+  }));
+
+  return table;
+}
+
+const emptyColumnFilters: ColumnFiltersState = [];
+const emptyColumnSizing: ColumnSizingState = {};
+const emptyColumnVisibility: VisibilityState = {};
+const emptySorting: SortingState = [];
+const emptyLockedColumnIds: string[] = [];
+const defaultPageSizeOptions = [10, 20, 30, 50, 100];
+
+function resolvePageSize(
+  pageSize: number | undefined,
+  fallbackPageSize: number,
+  pageSizeOptions: number[],
+) {
+  if (typeof pageSize === "number" && pageSizeOptions.includes(pageSize)) {
+    return pageSize;
+  }
+
+  if (pageSizeOptions.includes(fallbackPageSize)) {
+    return fallbackPageSize;
+  }
+
+  return pageSizeOptions[0] ?? fallbackPageSize;
+}
+
+export function DataTable<TData extends RowData>(props: DataTableProps<TData>) {
+  const {
+    activeRowId,
+    columns,
+    data,
+    emptyMessage,
+    emptyState,
+    fillHeight = false,
+    loading = false,
+    error,
+    onRetry,
+    warning,
+    unavailable,
+    enablePersistence: enablePersistenceProp,
+    enableRowSelection = false,
+    filterFns,
+    formatResultCount: formatResultCountProp,
+    formatRowCount: formatRowCountProp,
+    formatSelectedRowCount,
+    getRowId,
+    globalFilterFn,
+    initialColumnFilters = emptyColumnFilters,
+    initialGlobalFilter = "",
+    onRowClick,
+    getRowLabel,
+    initialColumnOrder,
+    initialColumnVisibility = emptyColumnVisibility,
+    initialPageSize = 10,
+    initialSorting = emptySorting,
+    lockedEndColumnIds = emptyLockedColumnIds,
+    lockedStartColumnIds = emptyLockedColumnIds,
+    manualFiltering = false,
+    enableExcludeFilters,
+    manualPagination = false,
+    manualSorting = false,
+    onStateChange,
+    pageCount,
+    pageSizeOptions = defaultPageSizeOptions,
+    rowCount,
+    rowSelectionActions,
+    searchPlaceholder,
+    storageKey: storageKeyProp,
+    toolbarBelow,
+    toolbarEnd,
+    toolbarStart,
+  } = props;
+  const t = useMessages(dataTableMessages);
+  const ui = useUiMessages();
+  // Persistence needs a key; without one the table keeps state in memory only.
+  const storageKey = storageKeyProp ?? "";
+  const enablePersistence =
+    Boolean(storageKeyProp) && enablePersistenceProp !== false;
+  const formatResultCount = formatResultCountProp ?? t.resultCount;
+  const formatRowCount = formatRowCountProp ?? t.rowCount;
+
+  const defaultColumnOrder = React.useMemo(
+    () => columns.map(getColumnId).filter(isString),
+    [columns],
+  );
+  const defaultColumnOrderKey = defaultColumnOrder.join("|");
+  const pageSizeOptionsKey = pageSizeOptions.join("|");
+  const lockedStartColumnKey = lockedStartColumnIds.join("|");
+  const lockedEndColumnKey = lockedEndColumnIds.join("|");
+  const stablePageSizeOptions = useStableValueByKey(
+    pageSizeOptions,
+    pageSizeOptionsKey,
+  );
+  const stableDefaultColumnOrder = useStableValueByKey(
+    defaultColumnOrder,
+    defaultColumnOrderKey,
+  );
+  const stableInitialColumnFilters = useStableValueByKey(
+    initialColumnFilters,
+    getColumnFiltersKey(initialColumnFilters),
+  );
+  const stableInitialColumnOrder = useStableValueByKey(
+    initialColumnOrder,
+    getOptionalColumnOrderKey(initialColumnOrder),
+  );
+  const stableInitialColumnVisibility = useStableValueByKey(
+    initialColumnVisibility,
+    getVisibilityStateKey(initialColumnVisibility),
+  );
+  const stableInitialSorting = useStableValueByKey(
+    initialSorting,
+    getSortingKey(initialSorting),
+  );
+  const stableLockedStartColumnIds = useStableValueByKey(
+    lockedStartColumnIds,
+    lockedStartColumnKey,
+  );
+  const stableLockedEndColumnIds = useStableValueByKey(
+    lockedEndColumnIds,
+    lockedEndColumnKey,
+  );
+  const [preferencesReady, setPreferencesReady] =
+    React.useState(!enablePersistence);
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>(stableInitialColumnVisibility);
+  const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>(() =>
+    normalizeColumnOrder(
+      stableInitialColumnOrder ?? stableDefaultColumnOrder,
+      stableDefaultColumnOrder,
+      stableLockedStartColumnIds,
+      stableLockedEndColumnIds,
+    ),
+  );
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    stableInitialColumnFilters,
+  );
+  const [columnSizing, setColumnSizing] =
+    React.useState<ColumnSizingState>(emptyColumnSizing);
+  const [sorting, setSorting] =
+    React.useState<SortingState>(stableInitialSorting);
+  const [globalFilter, setGlobalFilter] = React.useState(initialGlobalFilter);
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: resolvePageSize(
+      initialPageSize,
+      initialPageSize,
+      stablePageSizeOptions,
+    ),
+  });
+  const resetPaginationPage = React.useCallback(() => {
+    setPagination((current) =>
+      current.pageIndex === 0 ? current : { ...current, pageIndex: 0 },
+    );
+  }, []);
+  const handleColumnFiltersChange = React.useCallback<
+    OnChangeFn<ColumnFiltersState>
+  >(
+    (updater) => {
+      setColumnFilters(updater);
+      resetPaginationPage();
+    },
+    [resetPaginationPage],
+  );
+  const handleGlobalFilterChange = React.useCallback<OnChangeFn<string>>(
+    (updater) => {
+      setGlobalFilter(updater);
+      resetPaginationPage();
+    },
+    [resetPaginationPage],
+  );
+  const handleSortingChange = React.useCallback<OnChangeFn<SortingState>>(
+    (updater) => {
+      setSorting(updater);
+      resetPaginationPage();
+    },
+    [resetPaginationPage],
+  );
+
+  const dndContextId = React.useId();
+  const sensors = useSensors(
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 6,
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 150,
+        tolerance: 6,
+      },
+    }),
+    useSensor(KeyboardSensor),
+  );
+
+  React.useEffect(() => {
+    if (!enablePersistence) {
+      return;
+    }
+
+    const settings = retainKnownColumnSettings(
+      getStoredDataTableSettings(storageKey),
+      stableDefaultColumnOrder,
+    );
+
+    setColumnVisibility(
+      settings?.columnVisibility ?? stableInitialColumnVisibility,
+    );
+    setColumnOrder(
+      normalizeColumnOrder(
+        settings?.columnOrder ??
+          stableInitialColumnOrder ??
+          stableDefaultColumnOrder,
+        stableDefaultColumnOrder,
+        stableLockedStartColumnIds,
+        stableLockedEndColumnIds,
+      ),
+    );
+    setColumnFilters(settings?.columnFilters ?? stableInitialColumnFilters);
+    setColumnSizing(settings?.columnSizing ?? emptyColumnSizing);
+    setSorting(settings?.sorting ?? stableInitialSorting);
+    setGlobalFilter(settings?.globalFilter ?? "");
+    setPagination({
+      pageIndex: 0,
+      pageSize: resolvePageSize(
+        settings?.pageSize,
+        initialPageSize,
+        stablePageSizeOptions,
+      ),
+    });
+    setPreferencesReady(true);
+  }, [
+    enablePersistence,
+    initialPageSize,
+    stableDefaultColumnOrder,
+    stableInitialColumnFilters,
+    stableInitialColumnOrder,
+    stableInitialColumnVisibility,
+    stableInitialSorting,
+    stableLockedEndColumnIds,
+    stableLockedStartColumnIds,
+    stablePageSizeOptions,
+    storageKey,
+  ]);
+
+  React.useEffect(() => {
+    if (!preferencesReady) {
+      return;
+    }
+
+    setColumnOrder((currentOrder) =>
+      normalizeColumnOrder(
+        currentOrder,
+        stableDefaultColumnOrder,
+        stableLockedStartColumnIds,
+        stableLockedEndColumnIds,
+      ),
+    );
+  }, [
+    preferencesReady,
+    stableDefaultColumnOrder,
+    stableLockedEndColumnIds,
+    stableLockedStartColumnIds,
+  ]);
+
+  React.useEffect(() => {
+    if (!enablePersistence || !preferencesReady) {
+      return;
+    }
+
+    window.localStorage.setItem(
+      storageKey,
+      JSON.stringify({
+        columnFilters,
+        columnOrder,
+        columnSizing,
+        columnVisibility,
+        globalFilter,
+        pageSize: pagination.pageSize,
+        sorting,
+      } satisfies StoredDataTableSettings),
+    );
+  }, [
+    columnFilters,
+    columnOrder,
+    columnSizing,
+    columnVisibility,
+    enablePersistence,
+    globalFilter,
+    pagination.pageSize,
+    preferencesReady,
+    sorting,
+    storageKey,
+  ]);
+
+  React.useEffect(() => {
+    if (!preferencesReady) {
+      return;
+    }
+
+    onStateChange?.({
+      columnFilters,
+      globalFilter,
+      pagination,
+      sorting,
+    });
+  }, [
+    columnFilters,
+    globalFilter,
+    onStateChange,
+    pagination,
+    preferencesReady,
+    sorting,
+  ]);
+
+  const table = useDataTableInstance<TData>({
+    autoResetPageIndex: !manualPagination,
+    columnResizeMode: "onChange",
+    columns,
+    data,
+    enableColumnResizing: true,
+    enableMultiSort: true,
+    enableRowSelection,
+    filterFns,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getRowId,
+    getSortedRowModel: getSortedRowModel(),
+    // An explicit undefined would replace TanStack's default and disable search.
+    globalFilterFn: globalFilterFn ?? "includesString",
+    isMultiSortEvent: () => true,
+    manualFiltering,
+    manualPagination,
+    manualSorting,
+    maxMultiSortColCount: 5,
+    meta: {
+      enableExcludeFilters:
+        enableExcludeFilters ?? (!manualFiltering && !onStateChange),
+    },
+    onColumnFiltersChange: handleColumnFiltersChange,
+    onColumnOrderChange: setColumnOrder,
+    onColumnSizingChange: setColumnSizing,
+    onColumnVisibilityChange: setColumnVisibility,
+    onGlobalFilterChange: handleGlobalFilterChange,
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: handleSortingChange,
+    pageCount,
+    rowCount,
+    state: {
+      columnFilters,
+      columnOrder,
+      columnSizing,
+      columnVisibility,
+      globalFilter,
+      pagination,
+      rowSelection,
+      sorting,
+    },
+  });
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (!over || active.id === over.id) {
+      return;
+    }
+
+    if (
+      isLockedColumn(
+        String(active.id),
+        stableLockedStartColumnIds,
+        stableLockedEndColumnIds,
+      )
+    ) {
+      return;
+    }
+
+    setColumnOrder((currentOrder) => {
+      const oldIndex = currentOrder.indexOf(String(active.id));
+      const newIndex = currentOrder.indexOf(String(over.id));
+
+      if (oldIndex === -1 || newIndex === -1) {
+        return currentOrder;
+      }
+
+      return normalizeColumnOrder(
+        arrayMove(currentOrder, oldIndex, newIndex),
+        stableDefaultColumnOrder,
+        stableLockedStartColumnIds,
+        stableLockedEndColumnIds,
       );
     });
-  const safeSize = Math.max(1, pageSize),
-    lastPage = Math.max(0, Math.ceil(selected.length / safeSize) - 1),
-    currentPage = Math.min(page, lastPage);
-  const visible = selected.slice(
-    currentPage * safeSize,
-    (currentPage + 1) * safeSize,
-  );
-  return (
-    <section aria-label="Tabela de dados" aria-busy={loading}>
-      <div className="wb-table-toolbar">
-        <Input
-          className="basis-full md:basis-0"
-          aria-label={searchLabel}
-          placeholder={searchLabel}
-          value={query}
-          onChange={(event) => {
-            setQuery(event.target.value);
-            setPage(0);
-          }}
-        />
-        {filters}
+  };
+
+  const resetColumns = () => {
+    setColumnVisibility(stableInitialColumnVisibility);
+    setColumnOrder(
+      normalizeColumnOrder(
+        stableInitialColumnOrder ?? stableDefaultColumnOrder,
+        stableDefaultColumnOrder,
+        stableLockedStartColumnIds,
+        stableLockedEndColumnIds,
+      ),
+    );
+    setColumnSizing(emptyColumnSizing);
+  };
+
+  const resetFilters = React.useCallback(() => {
+    setColumnFilters(stableInitialColumnFilters);
+    setGlobalFilter("");
+    setPagination((current) => ({ ...current, pageIndex: 0 }));
+  }, [stableInitialColumnFilters]);
+
+  React.useEffect(() => {
+    const handleResetFilters = (event: Event) => {
+      const resetStorageKey = getResetFiltersStorageKey(event);
+
+      if (resetStorageKey && resetStorageKey !== storageKey) {
+        return;
+      }
+
+      resetFilters();
+    };
+
+    window.addEventListener(DATA_TABLE_RESET_FILTERS_EVENT, handleResetFilters);
+
+    return () => {
+      window.removeEventListener(
+        DATA_TABLE_RESET_FILTERS_EVENT,
+        handleResetFilters,
+      );
+    };
+  }, [resetFilters, storageKey]);
+
+  if (!preferencesReady) {
+    return <DataTableSkeleton />;
+  }
+
+  const retry = onRetry ? (
+    <Button variant="outline" size="sm" onClick={onRetry}>
+      <RotateCwIcon data-icon="inline-start" />
+      {ui.retry}
+    </Button>
+  ) : null;
+
+  if (unavailable) {
+    return (
+      <Empty className="rounded-3xl border border-dashed">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <LockIcon />
+          </EmptyMedia>
+          <EmptyTitle>{unavailable}</EmptyTitle>
+        </EmptyHeader>
+      </Empty>
+    );
+  }
+
+  if (error && !data.length && !loading) {
+    return (
+      <Empty className="rounded-3xl border border-dashed">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <CircleAlertIcon />
+          </EmptyMedia>
+          <EmptyTitle>{ui.loadFailed}</EmptyTitle>
+          <EmptyDescription>{error}</EmptyDescription>
+        </EmptyHeader>
+        {retry ? <EmptyContent>{retry}</EmptyContent> : null}
+      </Empty>
+    );
+  }
+
+  const isFiltered = Boolean(globalFilter) || columnFilters.length > 0;
+
+  const filteredRowCount = rowCount ?? table.getFilteredRowModel().rows.length;
+  const selectedRowCount = table.getFilteredSelectedRowModel().rows.length;
+  const selectedRowsLabel =
+    formatSelectedRowCount ??
+    ((count: number) => t.selected(formatRowCount(count), count));
+  const toolbarStartContent = toolbarStart?.(table);
+  const toolbarEndContent = toolbarEnd?.(table);
+  const toolbarBelowContent = toolbarBelow?.(table);
+  const rowSelectionActionsContent = rowSelectionActions?.(table);
+
+  return (
+    <div
+      className={cn(
+        "flex w-full min-w-0 flex-col gap-4",
+        fillHeight && "min-h-0 flex-1",
+      )}
+    >
+      <div className="flex min-w-0 flex-wrap items-center gap-2">
+        {toolbarStartContent}
+        <div className="flex min-w-0 flex-1 basis-80 items-center gap-2">
+          <InputGroup className="flex-1">
+            <InputGroupInput
+              value={globalFilter}
+              onChange={(event) => handleGlobalFilterChange(event.target.value)}
+              placeholder={searchPlaceholder ?? t.search}
+            />
+            <InputGroupAddon className="pl-2">
+              <SearchIcon />
+            </InputGroupAddon>
+            <InputGroupAddon align="inline-end" className="pr-2">
+              {formatResultCount(filteredRowCount)}
+            </InputGroupAddon>
+          </InputGroup>
+          {toolbarEndContent}
+          <ColumnSettings
+            defaultColumnOrder={defaultColumnOrder}
+            lockedEndColumnIds={lockedEndColumnIds}
+            lockedStartColumnIds={lockedStartColumnIds}
+            onResetColumns={resetColumns}
+            table={table}
+          />
+        </div>
       </div>
-      <Table>
-        <TableHeader>
-          <TableRow>
-            {columns.map((column) => (
-              <TableHead
-                key={column.id}
-                aria-sort={
-                  sort?.id === column.id
-                    ? sort.desc
-                      ? "descending"
-                      : "ascending"
-                    : undefined
-                }
-              >
-                {column.sortValue ? (
+
+      {toolbarBelowContent}
+
+      {error ? (
+        <Alert variant="destructive">
+          <CircleAlertIcon />
+          <AlertTitle>{ui.staleData}</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+          {retry ? <AlertAction>{retry}</AlertAction> : null}
+        </Alert>
+      ) : null}
+      {warning ? (
+        <Alert>
+          <TriangleAlertIcon />
+          <AlertTitle>{warning}</AlertTitle>
+        </Alert>
+      ) : null}
+
+      {enableRowSelection && selectedRowCount > 0 && (
+        <div className="bg-muted/40 flex flex-col gap-2 rounded-2xl border p-2 sm:flex-row sm:items-center sm:justify-between">
+          <p className="text-foreground px-1 text-sm font-medium">
+            {selectedRowsLabel(selectedRowCount)}
+          </p>
+          <div className="flex flex-wrap items-center gap-2">
+            {rowSelectionActionsContent}
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => table.resetRowSelection()}
+            >
+              <XIcon data-icon="inline-start" />
+              {t.clearSelection}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      <DndContext
+        // Stable id: dnd-kit's global counter differs between server and client.
+        id={dndContextId}
+        collisionDetection={closestCenter}
+        modifiers={[restrictToHorizontalAxis]}
+        onDragEnd={handleDragEnd}
+        sensors={sensors}
+      >
+        <div
+          className={cn(
+            "bg-card overflow-hidden rounded-2xl border",
+            fillHeight && "flex min-h-0 flex-1 flex-col",
+          )}
+        >
+          <Table
+            containerClassName={
+              // Bottom-only fade: a top fade would dissolve the sticky header.
+              fillHeight
+                ? "min-h-0 flex-1 overflow-auto scroll-fade-b"
+                : undefined
+            }
+            style={{ minWidth: "100%", width: table.getTotalSize() }}
+          >
+            {/* Solid background: rows scroll underneath the sticky header. */}
+            <TableHeader className="bg-muted sticky top-0 z-10">
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  <SortableContext
+                    items={columnOrder}
+                    strategy={horizontalListSortingStrategy}
+                  >
+                    {headerGroup.headers.map((header) => (
+                      <DataTableHead
+                        key={header.id}
+                        header={header}
+                        lockedEndColumnIds={lockedEndColumnIds}
+                        lockedStartColumnIds={lockedStartColumnIds}
+                      />
+                    ))}
+                  </SortableContext>
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                Array.from({ length: 3 }, (_, index) => (
+                  <TableRow key={index}>
+                    {table.getVisibleLeafColumns().map((column) => (
+                      <TableCell key={column.id}>
+                        <Skeleton className="h-5 w-full" />
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-active={row.id === activeRowId || undefined}
+                    aria-current={row.id === activeRowId ? "true" : undefined}
+                    data-state={row.getIsSelected() && "selected"}
+                    className={onRowClick ? "cursor-pointer" : undefined}
+                    tabIndex={onRowClick ? 0 : undefined}
+                    aria-label={
+                      onRowClick
+                        ? `${t.open}: ${getRowLabel?.(row.original) ?? row.id}`
+                        : undefined
+                    }
+                    onClick={
+                      onRowClick ? () => onRowClick(row.original) : undefined
+                    }
+                    onKeyDown={
+                      onRowClick
+                        ? (event) => {
+                            if (event.key === "Enter" || event.key === " ") {
+                              event.preventDefault();
+                              onRowClick(row.original);
+                            }
+                          }
+                        : undefined
+                    }
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell
+                        key={cell.id}
+                        className={cn(
+                          "whitespace-nowrap",
+                          getColumnAlignClass(cell.column),
+                          getColumnMeta(cell.column)?.cellClassName,
+                        )}
+                        style={{ width: cell.column.getSize() }}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={table.getVisibleLeafColumns().length}
+                    className="text-muted-foreground h-24 text-center"
+                  >
+                    {isFiltered ? (
+                      <Empty>
+                        <EmptyHeader>
+                          <EmptyTitle>
+                            {emptyMessage ?? ui.noResults}
+                          </EmptyTitle>
+                        </EmptyHeader>
+                        <EmptyContent>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={resetFilters}
+                          >
+                            {t.clearFilters}
+                          </Button>
+                        </EmptyContent>
+                      </Empty>
+                    ) : (
+                      (emptyState ?? (
+                        <Empty>
+                          <EmptyHeader>
+                            <EmptyMedia variant="icon">
+                              <InboxIcon />
+                            </EmptyMedia>
+                            <EmptyTitle>{emptyMessage ?? ui.noData}</EmptyTitle>
+                          </EmptyHeader>
+                        </Empty>
+                      ))
+                    )}
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </DndContext>
+
+      <DataTablePagination
+        formatRowCount={formatRowCount}
+        formatSelectedRowCount={formatSelectedRowCount}
+        pageSizeOptions={stablePageSizeOptions}
+        rowCount={rowCount}
+        storageKey={storageKey}
+        table={table}
+      />
+    </div>
+  );
+}
+
+function DataTableHead<TData extends RowData>({
+  header,
+  lockedEndColumnIds,
+  lockedStartColumnIds,
+}: {
+  header: Header<TData, unknown>;
+  lockedEndColumnIds: string[];
+  lockedStartColumnIds: string[];
+}) {
+  const t = useMessages(dataTableMessages);
+  const column = header.column;
+  const table = header.getContext().table;
+  const align = getColumnAlign(column);
+  const isSorted = column.getIsSorted();
+  const sortIndex = table
+    .getState()
+    .sorting.findIndex((sort) => sort.id === column.id);
+  const isLocked = isLockedColumn(
+    column.id,
+    lockedStartColumnIds,
+    lockedEndColumnIds,
+  );
+  const canOpenColumnMenu = !header.isPlaceholder && !isLocked;
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    id: column.id,
+    disabled: isLocked,
+  });
+  const [menuOpen, setMenuOpen] = React.useState(false);
+
+  const columnControls =
+    column.getCanSort() || !isLocked ? (
+      <div
+        className={cn(
+          "flex shrink-0 items-center gap-1",
+          align === "right" ? "order-first mr-1" : "ml-1",
+        )}
+      >
+        {column.getCanSort() && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-xs"
+            className={cn(
+              "transition-opacity",
+              isSorted ? "text-foreground bg-accent" : "text-muted-foreground",
+              getHeaderControlVisibilityClass(Boolean(isSorted)),
+            )}
+            onClick={() => toggleColumnSorting(table, column.id)}
+            aria-label={t.toggleSort(getColumnLabel(column))}
+          >
+            <ColumnSortIcon isSorted={isSorted} />
+          </Button>
+        )}
+        {sortIndex >= 0 && table.getState().sorting.length > 1 && (
+          <Badge
+            variant="secondary"
+            className="px-1"
+            title={t.sortCriterionTitle(sortIndex + 1)}
+          >
+            {sortIndex + 1}
+          </Badge>
+        )}
+        {!isLocked && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-xs"
+            className={cn(
+              "text-muted-foreground cursor-grab transition-opacity active:cursor-grabbing",
+              getHeaderControlVisibilityClass(isDragging),
+            )}
+            aria-label={t.reorderColumn(getColumnLabel(column))}
+            {...attributes}
+            {...listeners}
+          >
+            <GripVerticalIcon />
+          </Button>
+        )}
+      </div>
+    ) : null;
+
+  return (
+    <TableHead
+      ref={setNodeRef}
+      colSpan={header.colSpan}
+      aria-sort={getColumnAriaSort(isSorted)}
+      className={cn(
+        "relative whitespace-nowrap",
+        getColumnAlignClass(column),
+        getColumnMeta(column)?.headerClassName,
+        isDragging && "bg-muted relative z-20 opacity-80",
+      )}
+      style={{
+        transform: CSS.Translate.toString(transform),
+        transition,
+        width: header.getSize(),
+      }}
+    >
+      {header.isPlaceholder ? null : (
+        <div
+          className={cn(
+            "group/header flex w-full items-center",
+            align === "center" && "justify-center",
+            align === "right" && "justify-end",
+          )}
+        >
+          <div className="flex min-w-0 flex-1 items-center">
+            {canOpenColumnMenu ? (
+              <ColumnHeaderMenu
+                header={header}
+                open={menuOpen}
+                onOpenChange={setMenuOpen}
+              />
+            ) : (
+              <div className="flex h-8 items-center px-0">
+                {flexRender(column.columnDef.header, header.getContext())}
+              </div>
+            )}
+          </div>
+          {columnControls}
+        </div>
+      )}
+      {column.getCanResize() && !isLocked ? (
+        <div
+          role="separator"
+          aria-orientation="vertical"
+          aria-label={t.resizeColumn(getColumnLabel(column))}
+          className={cn(
+            "hover:bg-primary/50 absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize touch-none bg-transparent select-none",
+            column.getIsResizing() && "bg-primary",
+          )}
+          onDoubleClick={() => column.resetSize()}
+          onMouseDown={header.getResizeHandler()}
+          onTouchStart={header.getResizeHandler()}
+        />
+      ) : null}
+    </TableHead>
+  );
+}
+
+function ColumnHeaderMenuTrigger<TData extends RowData>({
+  className,
+  header,
+}: {
+  className?: string;
+  header: Header<TData, unknown>;
+}) {
+  const t = useMessages(dataTableMessages);
+  const column = header.column;
+  const align = getColumnAlign(column);
+  const isFiltered = isFilterValueActive(column.getFilterValue());
+  const isExcluding =
+    isFiltered && readMultiFilterValue(column.getFilterValue()).exclude;
+  const ActiveFilterIcon = isExcluding ? FunnelXIcon : FunnelIcon;
+
+  return (
+    <PopoverTrigger
+      render={
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className={cn(
+            "relative -mx-2.5 h-8 w-[calc(100%+1.25rem)] min-w-0 justify-start px-2.5",
+            align === "center" && "justify-center",
+            align === "right" && "justify-end",
+            className,
+          )}
+        />
+      }
+    >
+      <span className="truncate">{getColumnLabel(column)}</span>
+      {isFiltered && (
+        <>
+          <ActiveFilterIcon data-icon="inline-end" aria-hidden />
+          <span className="sr-only">
+            {isExcluding ? t.excludeFilterActive : t.filterActive}
+          </span>
+        </>
+      )}
+    </PopoverTrigger>
+  );
+}
+
+function ColumnSortIcon({ isSorted }: { isSorted: DataTableSortDirection }) {
+  if (isSorted === "asc") {
+    return <ArrowUpNarrowWideIcon data-icon="inline-end" />;
+  }
+
+  if (isSorted === "desc") {
+    return <ArrowDownWideNarrowIcon data-icon="inline-end" />;
+  }
+
+  return <ArrowUpDownIcon data-icon="inline-end" />;
+}
+
+function ColumnHeaderMenu<TData extends RowData>({
+  header,
+  onOpenChange,
+  open,
+}: {
+  header: Header<TData, unknown>;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+}) {
+  const t = useMessages(dataTableMessages);
+  const column = header.column;
+  const table = header.getContext().table;
+  const isSorted = column.getIsSorted();
+  const isFiltered = isFilterValueActive(column.getFilterValue());
+  const sorting = table.getState().sorting;
+  const sortIndex = sorting.findIndex((sort) => sort.id === column.id);
+  const sortCount = sorting.length;
+  const hasColumnState = Boolean(isSorted) || isFiltered;
+
+  const clearColumnState = () => {
+    column.setFilterValue(undefined);
+    clearColumnSorting(table, column.id);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <ColumnHeaderMenuTrigger header={header} />
+      <PopoverContent align="start" className="w-72 p-0">
+        <div className="flex flex-col gap-3 p-3">
+          <div className="flex min-w-0 items-start justify-between gap-2">
+            <div className="min-w-0">
+              <div className="truncate text-sm font-medium">
+                {getColumnLabel(column)}
+              </div>
+            </div>
+            {sortIndex >= 0 && sortCount > 1 && (
+              <Badge variant="outline" className="shrink-0">
+                {t.sortCriterion(sortIndex + 1)}
+              </Badge>
+            )}
+          </div>
+
+          {column.getCanSort() && (
+            <ColumnSortControls
+              column={column}
+              isSorted={isSorted}
+              table={table}
+            />
+          )}
+
+          <ColumnFilterControls
+            allowExclude={Boolean(table.options.meta?.enableExcludeFilters)}
+            column={column}
+          />
+
+          {(hasColumnState || column.getCanHide()) && (
+            <>
+              <Separator />
+              <div className="flex gap-2">
+                {hasColumnState && (
                   <Button
                     variant="ghost"
-                    onClick={() =>
-                      setSort({
-                        id: column.id,
-                        desc: sort?.id === column.id ? !sort.desc : false,
-                      })
-                    }
+                    size="sm"
+                    className="flex-1"
+                    onClick={clearColumnState}
                   >
-                    {column.header}
-                    {sort?.id === column.id ? (
-                      sort.desc ? (
-                        <ArrowDown data-icon="inline-end" />
-                      ) : (
-                        <ArrowUp data-icon="inline-end" />
-                      )
-                    ) : null}
+                    <XIcon data-icon="inline-start" />
+                    {t.clearAll}
                   </Button>
-                ) : (
-                  column.header
                 )}
-              </TableHead>
-            ))}
-            {onOpen ? (
-              <TableHead>
-                <span className="sr-only">Detalhes</span>
-              </TableHead>
-            ) : null}
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {loading ? (
-            [0, 1, 2].map((index) => (
-              <TableRow key={index}>
-                {columns.map((column) => (
-                  <TableCell key={column.id}>
-                    <Skeleton className="h-5 w-full" />
-                  </TableCell>
-                ))}
-                {onOpen ? (
-                  <TableCell>
-                    <Skeleton className="size-5" />
-                  </TableCell>
-                ) : null}
-              </TableRow>
-            ))
-          ) : visible.length ? (
-            visible.map((row) => (
-              <TableRow key={getRowId(row)}>
-                {columns.map((column) => (
-                  <TableCell key={column.id}>{column.cell(row)}</TableCell>
+                {column.getCanHide() && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="flex-1"
+                    onClick={() => column.toggleVisibility(false)}
+                  >
+                    <EyeOffIcon data-icon="inline-start" />
+                    {t.hide}
+                  </Button>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// Pressed option inside the column menu; the selected state uses the primary
+// fill plus a check so it stays distinguishable in both themes.
+function ColumnMenuOption({
+  buttonRef,
+  children,
+  onClick,
+  selected,
+}: {
+  buttonRef?: React.Ref<HTMLButtonElement>;
+  children: React.ReactNode;
+  onClick: () => void;
+  selected: boolean;
+}) {
+  return (
+    <Button
+      ref={buttonRef}
+      variant={selected ? "default" : "outline"}
+      size="sm"
+      className="justify-start"
+      aria-pressed={selected}
+      onClick={onClick}
+    >
+      {children}
+      {selected && <CheckIcon data-icon="inline-end" className="ml-auto" />}
+    </Button>
+  );
+}
+
+function ColumnSortControls<TData extends RowData>({
+  column,
+  isSorted,
+  table,
+}: {
+  column: Column<TData, unknown>;
+  isSorted: false | "asc" | "desc";
+  table: TanstackTable<TData>;
+}) {
+  const t = useMessages(dataTableMessages);
+  const ascendingRef = React.useRef<HTMLButtonElement>(null);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex min-h-6 items-center justify-between gap-2">
+        <Label className="text-muted-foreground text-xs">{t.sort}</Label>
+        {isSorted && (
+          <Button
+            variant="ghost"
+            size="xs"
+            onClick={() => {
+              clearColumnSorting(table, column.id);
+              ascendingRef.current?.focus();
+            }}
+          >
+            <XIcon data-icon="inline-start" />
+            {t.removeSort}
+          </Button>
+        )}
+      </div>
+      <div className="grid grid-cols-2 gap-2" role="group" aria-label={t.sort}>
+        <ColumnMenuOption
+          buttonRef={ascendingRef}
+          selected={isSorted === "asc"}
+          onClick={() => setColumnSorting(table, column.id, false)}
+        >
+          <ArrowUpNarrowWideIcon data-icon="inline-start" />
+          {t.ascending}
+        </ColumnMenuOption>
+        <ColumnMenuOption
+          selected={isSorted === "desc"}
+          onClick={() => setColumnSorting(table, column.id, true)}
+        >
+          <ArrowDownWideNarrowIcon data-icon="inline-start" />
+          {t.descending}
+        </ColumnMenuOption>
+      </div>
+    </div>
+  );
+}
+
+function ColumnFilterControls<TData extends RowData>({
+  allowExclude,
+  column,
+}: {
+  allowExclude: boolean;
+  column: Column<TData, unknown>;
+}) {
+  const t = useMessages(dataTableMessages);
+  const filter = getColumnMeta(column)?.filter;
+
+  if (!filter) {
+    return null;
+  }
+
+  if (filter.type === "custom") {
+    return filter.render(column);
+  }
+
+  if (filter.type === "multi") {
+    return (
+      <ColumnMultiFilter
+        allowExclude={allowExclude}
+        column={column}
+        options={filter.options}
+      />
+    );
+  }
+
+  if (filter.type === "number-range") {
+    const range = readRangeFilterValue(column.getFilterValue());
+
+    return (
+      <div className="flex flex-col gap-2">
+        <Label className="text-muted-foreground text-xs">{t.filter}</Label>
+        <div className="grid grid-cols-2 gap-2">
+          <Input
+            type="number"
+            min={filter.min}
+            max={filter.max}
+            value={range.min ?? ""}
+            onChange={(event) =>
+              setObjectFilterValue(column, "min", event.target.value)
+            }
+            placeholder={filter.minPlaceholder ?? t.min}
+          />
+          <Input
+            type="number"
+            min={filter.min}
+            max={filter.max}
+            value={range.max ?? ""}
+            onChange={(event) =>
+              setObjectFilterValue(column, "max", event.target.value)
+            }
+            placeholder={filter.maxPlaceholder ?? t.max}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  if (filter.type === "date-range") {
+    const range = readDateRangeFilterValue(column.getFilterValue());
+
+    return (
+      <div className="flex flex-col gap-2">
+        <Label className="text-muted-foreground text-xs">{t.filter}</Label>
+        <div className="grid grid-cols-2 gap-2">
+          <Input
+            type="date"
+            value={range.from ?? ""}
+            onChange={(event) =>
+              setObjectFilterValue(column, "from", event.target.value)
+            }
+          />
+          <Input
+            type="date"
+            value={range.to ?? ""}
+            onChange={(event) =>
+              setObjectFilterValue(column, "to", event.target.value)
+            }
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return <ColumnTextFilter column={column} placeholder={filter.placeholder} />;
+}
+
+function ColumnTextFilter<TData extends RowData>({
+  column,
+  placeholder,
+}: {
+  column: Column<TData, unknown>;
+  placeholder?: string;
+}) {
+  const t = useMessages(dataTableMessages);
+  const label = getColumnLabel(column).toLocaleLowerCase();
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Label className="text-muted-foreground text-xs">{t.filter}</Label>
+      <Input
+        value={
+          readStringProperty({ value: column.getFilterValue() }, "value") ?? ""
+        }
+        onChange={(event) =>
+          column.setFilterValue(event.target.value || undefined)
+        }
+        placeholder={placeholder ?? t.filterBy(label)}
+      />
+    </div>
+  );
+}
+
+function ColumnMultiFilter<TData extends RowData>({
+  allowExclude,
+  column,
+  options,
+}: {
+  allowExclude: boolean;
+  column: Column<TData, unknown>;
+  options: DataTableFilterOption[];
+}) {
+  const t = useMessages(dataTableMessages);
+  const stored = readMultiFilterValue(column.getFilterValue());
+  const [pendingExclude, setPendingExclude] = React.useState(stored.exclude);
+  const selected = stored.values;
+  const exclude =
+    allowExclude && (selected.length ? stored.exclude : pendingExclude);
+
+  const toggleValue = (value: string, checked: boolean) => {
+    const next = checked
+      ? [...selected, value]
+      : selected.filter((item) => item !== value);
+
+    column.setFilterValue(toMultiFilterValue(exclude, next));
+  };
+
+  const setMode = (nextExclude: boolean) => {
+    setPendingExclude(nextExclude);
+    column.setFilterValue(toMultiFilterValue(nextExclude, selected));
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Label className="text-muted-foreground text-xs">{t.filter}</Label>
+      {allowExclude && (
+        <div
+          className="grid grid-cols-2 gap-2"
+          role="group"
+          aria-label={t.filterMode}
+        >
+          <ColumnMenuOption selected={!exclude} onClick={() => setMode(false)}>
+            <FunnelIcon data-icon="inline-start" />
+            {t.show}
+          </ColumnMenuOption>
+          <ColumnMenuOption selected={exclude} onClick={() => setMode(true)}>
+            <FunnelXIcon data-icon="inline-start" />
+            {t.exclude}
+          </ColumnMenuOption>
+        </div>
+      )}
+      <div
+        className="flex max-h-56 scroll-fade flex-col gap-1 overflow-auto rounded-2xl border p-1"
+        role="group"
+        aria-label={exclude ? t.valuesToExclude : t.valuesToShow}
+      >
+        {options.map((option) => (
+          <label
+            key={option.value}
+            className="hover:bg-accent flex items-center gap-2 rounded-xl px-2 py-1.5 text-sm font-normal"
+          >
+            <Checkbox
+              checked={selected.includes(option.value)}
+              onCheckedChange={(checked) =>
+                toggleValue(option.value, Boolean(checked))
+              }
+            />
+            <span
+              className={cn(
+                "min-w-0 flex-1 truncate",
+                exclude &&
+                  selected.includes(option.value) &&
+                  "text-muted-foreground line-through",
+              )}
+            >
+              {option.label}
+            </span>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ColumnSettings<TData extends RowData>({
+  defaultColumnOrder,
+  lockedEndColumnIds,
+  lockedStartColumnIds,
+  onResetColumns,
+  table,
+}: {
+  defaultColumnOrder: ColumnOrderState;
+  lockedEndColumnIds: string[];
+  lockedStartColumnIds: string[];
+  onResetColumns: () => void;
+  table: TanstackTable<TData>;
+}) {
+  const t = useMessages(dataTableMessages);
+  const hiddenColumnCount = table
+    .getAllLeafColumns()
+    .filter((column) => column.getCanHide())
+    .filter((column) => !column.getIsVisible()).length;
+  const visibleColumnsCustomized = hiddenColumnCount > 0;
+  const columnOrderCustomized = !areColumnOrdersEqual(
+    normalizeColumnOrder(
+      table.getState().columnOrder,
+      defaultColumnOrder,
+      lockedStartColumnIds,
+      lockedEndColumnIds,
+    ),
+    normalizeColumnOrder(
+      defaultColumnOrder,
+      defaultColumnOrder,
+      lockedStartColumnIds,
+      lockedEndColumnIds,
+    ),
+  );
+  const columnsCustomized = visibleColumnsCustomized || columnOrderCustomized;
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <DropdownMenu>
+          <TooltipTrigger
+            render={
+              <DropdownMenuTrigger
+                render={
+                  <Button
+                    variant="outline"
+                    size="icon-sm"
+                    className="relative"
+                    aria-label={t.customizeColumns}
+                  />
+                }
+              />
+            }
+          >
+            <Columns3Icon />
+            {hiddenColumnCount > 0 && (
+              <span className="bg-primary absolute -top-0.5 -right-0.5 size-2 rounded-full" />
+            )}
+          </TooltipTrigger>
+          <TooltipContent side="bottom" align="end">
+            {t.columnsTooltip}
+          </TooltipContent>
+          <DropdownMenuContent align="end" className="w-64">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>{t.columns}</DropdownMenuLabel>
+              {table
+                .getAllLeafColumns()
+                .filter((column) => column.getCanHide())
+                .map((column) => (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                    closeOnClick={false}
+                  >
+                    {getColumnLabel(column)}
+                  </DropdownMenuCheckboxItem>
                 ))}
-                {onOpen ? (
-                  <TableCell>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      aria-label={`Ver detalhes de ${rowLabel?.(row) ?? getRowId(row)}`}
-                      onClick={() => onOpen(row)}
-                    >
-                      <ArrowUpRight />
-                    </Button>
-                  </TableCell>
-                ) : null}
-              </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell colSpan={columns.length + (onOpen ? 1 : 0)}>
-                <Empty>
-                  <EmptyHeader>
-                    <EmptyTitle>Nenhum resultado</EmptyTitle>
-                    <EmptyDescription>
-                      Ajuste a busca ou os filtros para encontrar registros.
-                    </EmptyDescription>
-                  </EmptyHeader>
-                </Empty>
-              </TableCell>
-            </TableRow>
+            </DropdownMenuGroup>
+            {columnsCustomized && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={onResetColumns}>
+                  <XIcon />
+                  {t.resetColumns}
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+function DataTablePagination<TData extends RowData>({
+  formatRowCount,
+  formatSelectedRowCount,
+  pageSizeOptions,
+  rowCount,
+  storageKey,
+  table,
+}: {
+  formatRowCount: (count: number) => string;
+  formatSelectedRowCount?: (count: number) => string;
+  pageSizeOptions: number[];
+  rowCount?: number;
+  storageKey: string;
+  table: TanstackTable<TData>;
+}) {
+  const t = useMessages(dataTableMessages);
+  const selectedRows = table.getFilteredSelectedRowModel().rows.length;
+  const filteredRows = rowCount ?? table.getFilteredRowModel().rows.length;
+  const totalRows = rowCount ?? table.getCoreRowModel().rows.length;
+  const selectedRowsLabel =
+    formatSelectedRowCount ??
+    ((count: number) => t.selected(formatRowCount(count), count));
+  const fallbackId = React.useId();
+  const inputId = storageKey
+    ? `${getStorageSafeId(storageKey)}-rows-per-page`
+    : fallbackId;
+  let paginationSummary = t.ofSummary(
+    formatRowCount(filteredRows),
+    formatRowCount(totalRows),
+  );
+
+  if (selectedRows > 0) {
+    paginationSummary = t.ofSummary(
+      selectedRowsLabel(selectedRows),
+      formatRowCount(filteredRows),
+    );
+  } else if (filteredRows === totalRows) {
+    paginationSummary = `${formatRowCount(totalRows)}.`;
+  }
+
+  return (
+    <div className="flex flex-col gap-3 px-1 sm:flex-row sm:items-center sm:justify-between">
+      <div className="text-muted-foreground text-sm">{paginationSummary}</div>
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="flex items-center gap-2">
+          <Label htmlFor={inputId} className="text-sm">
+            {t.rowsPerPage}
+          </Label>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => table.setPageSize(Number(value))}
+          >
+            <SelectTrigger id={inputId} size="sm" className="w-20">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {pageSizeOptions.map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="text-sm font-medium">
+          {t.page(
+            table.getState().pagination.pageIndex + 1,
+            Math.max(table.getPageCount(), 1),
           )}
-        </TableBody>
-      </Table>
-      <div className="wb-table-footer">
-        <span>
-          {selected.length} registros · página {currentPage + 1} de{" "}
-          {lastPage + 1}
-        </span>
-        <div className="flex gap-2">
+        </div>
+        <div className="flex items-center gap-2">
           <Button
             variant="outline"
-            size="sm"
-            aria-label="Página anterior"
-            disabled={currentPage === 0 || loading}
-            onClick={() => setPage(currentPage - 1)}
+            className="hidden sm:flex"
+            size="icon"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
           >
-            <ChevronLeft />
-            Anterior
+            <span className="sr-only">{t.firstPage}</span>
+            <ChevronsLeftIcon />
           </Button>
           <Button
             variant="outline"
-            size="sm"
-            aria-label="Próxima página"
-            disabled={currentPage === lastPage || loading}
-            onClick={() => setPage(currentPage + 1)}
+            size="icon"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
           >
-            Próxima
-            <ChevronRight />
+            <span className="sr-only">{t.previousPage}</span>
+            <ChevronLeftIcon />
           </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">{t.nextPage}</span>
+            <ChevronRightIcon />
+          </Button>
+          <Button
+            variant="outline"
+            className="hidden sm:flex"
+            size="icon"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">{t.lastPage}</span>
+            <ChevronsRightIcon />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function DataTableSkeleton() {
+  return (
+    <div className="flex w-full flex-col gap-4" aria-hidden="true">
+      <div className="flex items-center gap-2">
+        <Skeleton className="h-9 flex-1 rounded-3xl" />
+        <Skeleton className="size-8 rounded-full" />
+      </div>
+      <div className="bg-card overflow-hidden rounded-2xl border">
+        <Skeleton className="h-10 rounded-none" />
+        <div className="flex flex-col">
+          {Array.from({ length: 8 }).map((_, index) => (
+            <Skeleton
+              key={index}
+              className="bg-muted/40 h-14 rounded-none border-t"
+            />
+          ))}
         </div>
       </div>
-    </section>
+    </div>
   );
 }