@squadbase/vantage 0.0.1 → 0.1.0

package/registry/ui/data-table.tsx

@@ -1,115 +1,715 @@
 // Copied by `vantage add ui data-table`. This file is yours to edit.
-import { useMemo, useState, type ReactNode } from "react"
-
-export interface Column<T> {
-  key: string
-  header: string
-  render?: (row: T) => ReactNode
-  sortable?: boolean
-  align?: "left" | "right" | "center"
-}
+/**
+ * DataTable — a compound table over TanStack Table. `<DataTable>` owns the
+ * table instance and publishes it on context; the toolbar, body, pagination and
+ * column-visibility parts read from that context, so a page composes only the
+ * pieces it wants. `DataTablePreset` assembles the usual arrangement.
+ *
+ * Every piece of state (sorting, filters, pagination, selection, visibility) is
+ * optionally controlled: pass the value plus its `on…Change` to drive it from
+ * outside, or omit both and the table keeps it internally.
+ */
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+  type SetStateAction,
+} from "react"
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnDef,
+  type ColumnFiltersState,
+  type OnChangeFn,
+  type PaginationState,
+  type RowSelectionState,
+  type SortingState,
+  type Table as TanstackTable,
+  type TableMeta,
+  type VisibilityState,
+} from "@tanstack/react-table"
+import { ArrowDown, ArrowUp, ArrowUpDown, Columns3, Search } from "lucide-react"
 
-export interface DataTableProps<T> {
-  columns: Column<T>[]
-  data: T[]
-  pageSize?: number
-}
+import {
+  Button,
+  Checkbox,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  cn,
+} from "@squadbase/vantage/ui"
 
-type Sort = { key: string; dir: "asc" | "desc" } | null
+
+/* ------------------------------------------------------------------- types */
+
+interface DataTableContextValue<TData> {
+  table: TanstackTable<TData>
+  selectedRows: TData[]
+  hasSelection: boolean
+  globalFilter: string
+  setGlobalFilter: OnChangeFn<string>
+  enableFiltering: boolean
+  enablePagination: boolean
+  enableRowSelection: boolean
+  visibleColumnCount: number
+}
 
 /**
- * A fully-customizable data table. Unlike `DataTable` from
- * `@squadbase/vantage/ui`, this copy lives in your project so you can change
- * markup, styling and behavior freely.
+ * @template TData 行データ型
+ * @template TValue セル値の型 (省略時は任意)
  */
-export function DataTable<T extends Record<string, unknown>>({ columns, data, pageSize = 10 }: DataTableProps<T>) {
-  const [sort, setSort] = useState<Sort>(null)
-  const [page, setPage] = useState(0)
-
-  const sorted = useMemo(() => {
-    if (!sort) return data
-    const copy = [...data]
-    copy.sort((a, b) => {
-      const av = a[sort.key]
-      const bv = b[sort.key]
-      const cmp =
-        typeof av === "number" && typeof bv === "number"
-          ? av - bv
-          : String(av ?? "").localeCompare(String(bv ?? ""))
-      return sort.dir === "asc" ? cmp : -cmp
-    })
-    return copy
-  }, [data, sort])
-
-  const pageCount = Math.max(1, Math.ceil(sorted.length / pageSize))
-  const rows = sorted.slice(page * pageSize, page * pageSize + pageSize)
+export interface DataTableProps<TData, TValue> {
+  /**
+   * TanStack Table の列定義配列。
+   *
+   * `ColumnDef<TData, TValue>[]` を annotation するか配列リテラルに
+   * `satisfies ColumnDef<TData>[]` を付けないと、`accessorKey` などの
+   * literal が `string` に拡張され型エラーになる。
+   *
+   * @example
+   * import type { ColumnDef } from "@squadbase/vantage/components"
+   *
+   * const columns: ColumnDef<User>[] = [
+   *   { accessorKey: "id", header: "ID" },
+   *   { accessorKey: "name", header: "名前" },
+   * ]
+   * <DataTable columns={columns} data={users}>...</DataTable>
+   */
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+
+  // Sorting
+  enableSorting?: boolean
+  sorting?: SortingState
+  onSortingChange?: OnChangeFn<SortingState>
+
+  // Filtering
+  enableFiltering?: boolean
+  columnFilters?: ColumnFiltersState
+  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>
+  globalFilter?: string
+  onGlobalFilterChange?: OnChangeFn<string>
+
+  // Pagination
+  enablePagination?: boolean
+  pagination?: PaginationState
+  onPaginationChange?: OnChangeFn<PaginationState>
+  pageCount?: number
+
+  // Row selection
+  enableRowSelection?: boolean
+  rowSelection?: RowSelectionState
+  onRowSelectionChange?: OnChangeFn<RowSelectionState>
+
+  // Column visibility
+  columnVisibility?: VisibilityState
+  onColumnVisibilityChange?: OnChangeFn<VisibilityState>
+
+  meta?: TableMeta<TData>
+  className?: string
+
+  /** Required — the parts to render (toolbar, content, pagination). */
+  children: ReactNode
+}
+
+export interface DataTableToolbarProps extends HTMLAttributes<HTMLDivElement> {
+  showSearch?: boolean
+  toolbar?: ReactNode
+  bulkActions?: (selectedRows: unknown[]) => ReactNode
+}
+
+export interface DataTableContentProps extends HTMLAttributes<HTMLDivElement> {}
+
+export interface DataTablePaginationProps extends HTMLAttributes<HTMLDivElement> {
+  pageSizeOptions?: number[]
+}
+
+export interface DataTableColumnVisibilityProps {
+  /** 列 ID をキーとしたラベルマップ。ヘッダーが文字列でない列のラベルを指定する */
+  columnLabels?: Record<string, string>
+  className?: string
+}
+
+export interface DataTablePresetProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+
+  enableSorting?: boolean
+  sorting?: SortingState
+  onSortingChange?: OnChangeFn<SortingState>
+
+  enableFiltering?: boolean
+  columnFilters?: ColumnFiltersState
+  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>
+  globalFilter?: string
+  onGlobalFilterChange?: OnChangeFn<string>
+
+  enablePagination?: boolean
+  pagination?: PaginationState
+  onPaginationChange?: OnChangeFn<PaginationState>
+  pageCount?: number
+
+  enableRowSelection?: boolean
+  rowSelection?: RowSelectionState
+  onRowSelectionChange?: OnChangeFn<RowSelectionState>
+
+  enableColumnVisibility?: boolean
+  columnVisibility?: VisibilityState
+  onColumnVisibilityChange?: OnChangeFn<VisibilityState>
+  columnLabels?: Record<string, string>
+
+  /** Extension slots */
+  toolbar?: ReactNode
+  bulkActions?: (selectedRows: TData[]) => ReactNode
+
+  meta?: TableMeta<TData>
+  className?: string
+}
+
+/* ------------------------------------------------------------------ helper */
+
+/** Use the controlled value when one is given, else keep it in local state. */
+function useControlledState<T>(
+  controlledValue: T | undefined,
+  defaultValue: T,
+  onChange?: OnChangeFn<T>,
+): [T, OnChangeFn<T>] {
+  const [internalValue, setInternalValue] = useState<T>(defaultValue)
+
+  const isControlled = controlledValue !== undefined
+  const value = isControlled ? controlledValue : internalValue
+
+  const setValue: OnChangeFn<T> = useCallback(
+    (updaterOrValue) => {
+      onChange?.(updaterOrValue)
+      if (!isControlled) {
+        setInternalValue(updaterOrValue as SetStateAction<T>)
+      }
+    },
+    [onChange, isControlled],
+  )
+
+  return [value, setValue]
+}
+
+/* ----------------------------------------------------------------- context */
+
+const DataTableContext = createContext<DataTableContextValue<unknown> | null>(null)
+
+export function useDataTable<TData>(): DataTableContextValue<TData> {
+  const ctx = useContext(DataTableContext)
+  if (!ctx) throw new Error("useDataTable must be used inside <DataTable>")
+  return ctx as DataTableContextValue<TData>
+}
+
+/* -------------------------------------------------------------------- root */
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  enableSorting = true,
+  sorting: sortingProp,
+  onSortingChange,
+  enableFiltering = false,
+  columnFilters: columnFiltersProp,
+  onColumnFiltersChange,
+  globalFilter: globalFilterProp,
+  onGlobalFilterChange,
+  enablePagination = false,
+  pagination: paginationProp,
+  onPaginationChange,
+  pageCount,
+  enableRowSelection = false,
+  rowSelection: rowSelectionProp,
+  onRowSelectionChange,
+  columnVisibility: columnVisibilityProp,
+  onColumnVisibilityChange,
+  meta,
+  className,
+  children,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useControlledState<SortingState>(sortingProp, [], onSortingChange)
+
+  const [columnFilters, setColumnFilters] = useControlledState<ColumnFiltersState>(
+    columnFiltersProp,
+    [],
+    onColumnFiltersChange,
+  )
+
+  const [globalFilter, setGlobalFilter] = useControlledState<string>(
+    globalFilterProp,
+    "",
+    onGlobalFilterChange,
+  )
+
+  const [rowSelection, setRowSelection] = useControlledState<RowSelectionState>(
+    rowSelectionProp,
+    {},
+    onRowSelectionChange,
+  )
+
+  const [columnVisibility, setColumnVisibility] = useControlledState<VisibilityState>(
+    columnVisibilityProp,
+    {},
+    onColumnVisibilityChange,
+  )
+
+  const [pagination, setPagination] = useControlledState<PaginationState>(
+    paginationProp,
+    { pageIndex: 0, pageSize: 10 },
+    onPaginationChange,
+  )
+
+  // Row selection prepends a checkbox column that the caller never declares.
+  const allColumns = useMemo<ColumnDef<TData, TValue>[]>(() => {
+    if (!enableRowSelection) return columns
+
+    const selectionColumn: ColumnDef<TData, TValue> = {
+      id: "_select",
+      header: ({ table }) => (
+        <Checkbox
+          checked={table.getIsAllPageRowsSelected()}
+          indeterminate={table.getIsSomePageRowsSelected()}
+          onCheckedChange={(checked) => table.toggleAllPageRowsSelected(checked)}
+          aria-label="全て選択"
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(checked) => row.toggleSelected(checked)}
+          aria-label="行を選択"
+        />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+    }
+
+    return [selectionColumn, ...columns]
+  }, [columns, enableRowSelection])
+
+  const table = useReactTable({
+    data,
+    columns: allColumns,
+    state: {
+      sorting,
+      columnFilters,
+      globalFilter,
+      rowSelection,
+      columnVisibility,
+      ...(enablePagination ? { pagination } : {}),
+    },
+    enableSorting,
+    enableRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    onRowSelectionChange: setRowSelection,
+    onColumnVisibilityChange: setColumnVisibility,
+    ...(enablePagination ? { onPaginationChange: setPagination } : {}),
+    ...(pageCount !== undefined ? { pageCount, manualPagination: true } : {}),
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    ...(enablePagination ? { getPaginationRowModel: getPaginationRowModel() } : {}),
+    meta,
+  })
+
+  const selectedRows = useMemo(
+    () => table.getFilteredSelectedRowModel().rows.map((row) => row.original),
+    // `table` is a stable reference, so the selection state is the real input.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rowSelection, data],
+  )
+
+  const hasSelection = selectedRows.length > 0
+
+  const contextValue = useMemo<DataTableContextValue<TData>>(
+    () => ({
+      table,
+      selectedRows,
+      hasSelection,
+      globalFilter,
+      setGlobalFilter,
+      enableFiltering,
+      enablePagination,
+      enableRowSelection,
+      visibleColumnCount: allColumns.length,
+    }),
+    // `useReactTable` returns the same object every render, so each piece of
+    // table state has to be tracked explicitly to re-render the consumers.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      table,
+      selectedRows,
+      hasSelection,
+      globalFilter,
+      setGlobalFilter,
+      enableFiltering,
+      enablePagination,
+      enableRowSelection,
+      allColumns.length,
+      sorting,
+      columnFilters,
+      columnVisibility,
+      pagination,
+      rowSelection,
+    ],
+  )
 
   return (
-    <div className="rounded-xl border border-border bg-card">
-      <table className="w-full text-sm">
-        <thead className="border-b border-border">
-          <tr>
-            {columns.map((c) => (
-              <th key={c.key} className="h-10 px-3 text-left text-xs font-medium text-muted-foreground">
-                {c.sortable ? (
-                  <button
-                    type="button"
-                    onClick={() =>
-                      setSort((p) =>
-                        p?.key === c.key
-                          ? p.dir === "asc"
-                            ? { key: c.key, dir: "desc" }
-                            : null
-                          : { key: c.key, dir: "asc" },
-                      )
-                    }
-                  >
-                    {c.header} {sort?.key === c.key ? (sort.dir === "asc" ? "▲" : "▼") : "↕"}
-                  </button>
-                ) : (
-                  c.header
-                )}
-              </th>
+    <DataTableContext.Provider value={contextValue as DataTableContextValue<unknown>}>
+      <div data-slot="data-table" className={cn("space-y-4", className)}>
+        {children}
+      </div>
+    </DataTableContext.Provider>
+  )
+}
+DataTable.displayName = "DataTable"
+
+/* ----------------------------------------------------------------- toolbar */
+
+export const DataTableToolbar = forwardRef<HTMLDivElement, DataTableToolbarProps>(
+  ({ showSearch, toolbar, bulkActions, className, ...props }, ref) => {
+    const { globalFilter, setGlobalFilter, hasSelection, selectedRows, enableFiltering } =
+      useDataTable()
+
+    const showSearchEffective = showSearch ?? enableFiltering
+
+    const hasContent = showSearchEffective || toolbar != null || (hasSelection && bulkActions != null)
+
+    if (!hasContent) return null
+
+    return (
+      <div
+        ref={ref}
+        data-slot="data-table-toolbar"
+        className={cn("flex flex-wrap items-center gap-2", className)}
+        {...props}
+      >
+        {showSearchEffective && (
+          <div className="relative">
+            <Search className="absolute top-2.5 left-2.5 size-4 text-muted-foreground" />
+            <Input
+              value={globalFilter}
+              onChange={(e) => setGlobalFilter(e.target.value)}
+              className="max-w-sm pl-8"
+            />
+          </div>
+        )}
+        {toolbar}
+        {hasSelection && bulkActions && (
+          <div className="ml-auto flex items-center gap-2">{bulkActions(selectedRows)}</div>
+        )}
+      </div>
+    )
+  },
+)
+DataTableToolbar.displayName = "DataTableToolbar"
+
+/* ----------------------------------------------------------------- content */
+
+export const DataTableContent = forwardRef<HTMLDivElement, DataTableContentProps>(
+  ({ className, ...props }, ref) => {
+    const { table, visibleColumnCount } = useDataTable()
+
+    return (
+      <div
+        ref={ref}
+        data-slot="data-table-content"
+        className={cn("overflow-x-auto", className)}
+        {...props}
+      >
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                      <button
+                        type="button"
+                        className="inline-flex items-center gap-1 rounded hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none"
+                        onClick={header.column.getToggleSortingHandler()}
+                        aria-sort={
+                          header.column.getIsSorted() === "asc"
+                            ? "ascending"
+                            : header.column.getIsSorted() === "desc"
+                              ? "descending"
+                              : "none"
+                        }
+                      >
+                        {flexRender(header.column.columnDef.header, header.getContext())}
+                        {header.column.getIsSorted() === "asc" ? (
+                          <ArrowUp className="size-4" />
+                        ) : header.column.getIsSorted() === "desc" ? (
+                          <ArrowDown className="size-4" />
+                        ) : (
+                          <ArrowUpDown className="size-4 text-muted-foreground" />
+                        )}
+                      </button>
+                    ) : (
+                      flexRender(header.column.columnDef.header, header.getContext())
+                    )}
+                  </TableHead>
+                ))}
+              </TableRow>
             ))}
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map((row, i) => (
-            <tr key={i} className="border-b border-border last:border-0 hover:bg-muted/50">
-              {columns.map((c) => (
-                <td key={c.key} className="px-3 py-2.5">
-                  {c.render ? c.render(row) : String(row[c.key] ?? "")}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      {pageCount > 1 ? (
-        <div className="flex items-center justify-between border-t border-border px-3 py-2 text-sm">
-          <span className="text-muted-foreground">
-            Page {page + 1} of {pageCount}
+          </TableHeader>
+
+          <TableBody>
+            {table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} data-state={row.getIsSelected() ? "selected" : undefined}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={visibleColumnCount}
+                  className="h-24 text-center text-muted-foreground"
+                >
+                  データがありません
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    )
+  },
+)
+DataTableContent.displayName = "DataTableContent"
+
+/* -------------------------------------------------------------- pagination */
+
+export const DataTablePagination = forwardRef<HTMLDivElement, DataTablePaginationProps>(
+  ({ pageSizeOptions = [10, 20, 50], className, ...props }, ref) => {
+    const { table } = useDataTable()
+
+    const totalRows = table.getFilteredRowModel().rows.length
+    const currentPageSize = table.getState().pagination.pageSize
+    const currentPageIndex = table.getState().pagination.pageIndex
+    const rangeStart = currentPageIndex * currentPageSize + 1
+    const rangeEnd = Math.min((currentPageIndex + 1) * currentPageSize, totalRows)
+
+    return (
+      <div
+        ref={ref}
+        data-slot="data-table-pagination"
+        className={cn("flex flex-wrap items-center justify-between gap-4", className)}
+        {...props}
+      >
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <span>
+            {totalRows}件中 {rangeStart} - {rangeEnd} を表示
           </span>
-          <div className="flex gap-1">
-            <button
-              type="button"
-              className="rounded-md border border-border px-3 py-1 disabled:opacity-50"
-              disabled={page === 0}
-              onClick={() => setPage((p) => p - 1)}
-            >
-              Previous
-            </button>
-            <button
-              type="button"
-              className="rounded-md border border-border px-3 py-1 disabled:opacity-50"
-              disabled={page >= pageCount - 1}
-              onClick={() => setPage((p) => p + 1)}
-            >
-              Next
-            </button>
-          </div>
+          <Select
+            items={Object.fromEntries(pageSizeOptions.map((size) => [String(size), `${size}件`]))}
+            value={String(currentPageSize)}
+            onValueChange={(value) => table.setPageSize(Number(value))}
+          >
+            <SelectTrigger size="sm" className="w-[80px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {pageSizeOptions.map((size) => (
+                <SelectItem key={size} value={String(size)}>
+                  {size}件
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
-      ) : null}
-    </div>
+
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.firstPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            最初
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            前へ
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            次へ
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.lastPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            最後
+          </Button>
+        </div>
+      </div>
+    )
+  },
+)
+DataTablePagination.displayName = "DataTablePagination"
+
+/* ------------------------------------------------------- column visibility */
+
+export const DataTableColumnVisibility = forwardRef<
+  HTMLButtonElement,
+  DataTableColumnVisibilityProps
+>(({ columnLabels, className }, ref) => {
+  const { table } = useDataTable()
+
+  const hideableColumns = table.getAllColumns().filter((column) => column.getCanHide())
+
+  if (hideableColumns.length === 0) return null
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        ref={ref}
+        render={<Button variant="outline" size="sm" className={cn(className)} />}
+        data-slot="data-table-column-visibility"
+      >
+        <Columns3 className="size-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[10rem]">
+        {hideableColumns.map((column) => {
+          const label =
+            columnLabels?.[column.id] ??
+            (typeof column.columnDef.header === "string" ? column.columnDef.header : column.id)
+          return (
+            <DropdownMenuCheckboxItem
+              key={column.id}
+              checked={column.getIsVisible()}
+              onCheckedChange={(checked) => column.toggleVisibility(checked)}
+            >
+              {label}
+            </DropdownMenuCheckboxItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+})
+DataTableColumnVisibility.displayName = "DataTableColumnVisibility"
+
+/* ------------------------------------------------------------------ preset */
+
+/** The usual arrangement — toolbar, body and pagination — in one component. */
+export function DataTablePreset<TData, TValue>({
+  columns,
+  data,
+  enableSorting,
+  sorting,
+  onSortingChange,
+  enableFiltering,
+  columnFilters,
+  onColumnFiltersChange,
+  globalFilter,
+  onGlobalFilterChange,
+  enablePagination,
+  pagination,
+  onPaginationChange,
+  pageCount,
+  enableRowSelection,
+  rowSelection,
+  onRowSelectionChange,
+  enableColumnVisibility = false,
+  columnVisibility,
+  onColumnVisibilityChange,
+  columnLabels,
+  toolbar,
+  bulkActions,
+  meta,
+  className,
+}: DataTablePresetProps<TData, TValue>) {
+  const toolbarSlot =
+    toolbar || enableColumnVisibility ? (
+      <>
+        {toolbar}
+        {enableColumnVisibility && <DataTableColumnVisibility columnLabels={columnLabels} />}
+      </>
+    ) : undefined
+
+  return (
+    <DataTable<TData, TValue>
+      columns={columns}
+      data={data}
+      enableSorting={enableSorting}
+      sorting={sorting}
+      onSortingChange={onSortingChange}
+      enableFiltering={enableFiltering}
+      columnFilters={columnFilters}
+      onColumnFiltersChange={onColumnFiltersChange}
+      globalFilter={globalFilter}
+      onGlobalFilterChange={onGlobalFilterChange}
+      enablePagination={enablePagination}
+      pagination={pagination}
+      onPaginationChange={onPaginationChange}
+      pageCount={pageCount}
+      enableRowSelection={enableRowSelection}
+      rowSelection={rowSelection}
+      onRowSelectionChange={onRowSelectionChange}
+      columnVisibility={columnVisibility}
+      onColumnVisibilityChange={onColumnVisibilityChange}
+      meta={meta}
+      className={className}
+    >
+      <DataTableToolbar
+        showSearch={enableFiltering}
+        toolbar={toolbarSlot}
+        bulkActions={bulkActions as ((selectedRows: unknown[]) => ReactNode) | undefined}
+      />
+      <DataTableContent />
+      {enablePagination && <DataTablePagination />}
+    </DataTable>
   )
 }
+DataTablePreset.displayName = "DataTablePreset"
+
+export type {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  RowSelectionState,
+  SortingState,
+  VisibilityState,
+} from "@tanstack/react-table"