@ifhover/leaf-ui 0.5.0 → 0.6.0

package/dist/esm/tabletanstack/tabletanstack.d.ts

@@ -1,13 +1,8 @@
+import type { DataTableColumnVisibilityProps, DataTableContentProps, DataTablePaginationProps, DataTablePresentationProps, DataTableSearchProps } from './defaults.js';
+export type { DataTableColumnVisibilityProps, DataTableContentProps, DataTablePaginationProps, DataTablePresentationProps, DataTableSearchProps, DataTableVirtualOptions, } from './defaults.js';
 import { type Cell, type ColumnDef, type Row, type TableOptions, type Table as TanStackTable } from '@tanstack/react-table';
-import { type HTMLAttributes, type ReactNode, type Ref } from 'react';
-import { type InputProps } from '../input/index.js';
-import { type PaginationProps } from '../pagination/index.js';
-import type { ControlSize } from '../shared/types.js';
-import { type TableCellProps, type TableProps, type TableRowProps } from '../table/index.js';
-export interface DataTableVirtualOptions {
-    estimateRowHeight?: number;
-    overscan?: number;
-}
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { TableCellProps, TableRowProps } from '../table/index.js';
 export interface DataTableColumnMeta {
     label?: string;
     align?: 'start' | 'center' | 'end';
@@ -21,36 +16,17 @@ export interface DataTableRowReorderInfo<TData> {
     activeRow: Row<TData>;
     overRow: Row<TData>;
 }
-export interface DataTableProps<TData> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface DataTableProps<TData> extends DataTablePresentationProps {
     table: TanStackTable<TData>;
     data?: never;
     columns?: never;
     rowKey?: never;
     options?: never;
-    children?: ReactNode;
-    caption?: ReactNode;
-    size?: ControlSize;
-    bordered?: boolean;
-    striped?: boolean;
-    stickyHeader?: boolean;
-    maxHeight?: TableProps['maxHeight'];
-    minWidth?: TableProps['minWidth'];
-    loading?: boolean;
-    emptyContent?: ReactNode;
-    error?: ReactNode;
-    onRetry?: () => void;
-    selection?: false | 'single' | 'multiple';
-    selectAllMode?: 'page' | 'all';
     getRowLabel?: (row: Row<TData>) => string;
     renderExpandedRow?: (row: Row<TData>) => ReactNode;
     getRowProps?: (row: Row<TData>) => TableRowProps;
     getCellProps?: (cell: Cell<TData, unknown>) => TableCellProps;
-    resizable?: boolean;
-    columnReordering?: boolean;
     onRowReorder?: (info: DataTableRowReorderInfo<TData>) => void;
-    virtual?: boolean | DataTableVirtualOptions;
-    pagination?: boolean;
-    tableRef?: Ref<HTMLTableElement>;
 }
 export interface DataTableDataProps<TData> extends Omit<DataTableProps<TData>, 'table' | 'data' | 'columns' | 'rowKey' | 'options'> {
     table?: never;
@@ -59,25 +35,13 @@ export interface DataTableDataProps<TData> extends Omit<DataTableProps<TData>, '
     rowKey: keyof TData | ((row: TData, index: number) => string);
     options?: Omit<TableOptions<TData>, 'data' | 'columns' | 'getCoreRowModel' | 'getRowId'>;
 }
-export interface DataTableSearchProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange' | 'type' | 'visibilityToggle' | 'visible' | 'defaultVisible' | 'onVisibleChange' | 'visibilityIcon'> {
-    columnId?: string;
-}
-export interface DataTableColumnVisibilityProps {
-    children?: ReactNode;
-    label?: string;
-}
-export interface DataTablePaginationProps extends Omit<PaginationProps, 'total' | 'current' | 'defaultCurrent' | 'pageSize' | 'defaultPageSize' | 'onChange'> {
-    hasNextPage?: boolean;
-}
-export interface DataTableContentProps extends HTMLAttributes<HTMLDivElement> {
-}
-export declare function DataTableToolbar({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function DataTableFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function DataTableSearch({ columnId, className, ...props }: DataTableSearchProps): import("react").JSX.Element;
-export declare function DataTableColumnVisibility({ children, label }: DataTableColumnVisibilityProps): import("react").JSX.Element;
-export declare function DataTableContent({ className, ...props }: DataTableContentProps): import("react").JSX.Element;
-export declare function DataTablePagination({ className, hasNextPage, ...props }: DataTablePaginationProps): import("react").JSX.Element;
-declare function DataTableComponent<TData>(props: DataTableProps<TData> | DataTableDataProps<TData>): import("react").JSX.Element;
+export declare function DataTableToolbar(rawProps: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function DataTableFooterControl({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function DataTableSearch(rawProps: DataTableSearchProps): import("react").JSX.Element;
+export declare function DataTableColumnVisibility(rawProps: DataTableColumnVisibilityProps): import("react").JSX.Element;
+export declare function DataTableContentControl({ className, ...props }: DataTableContentProps): import("react").JSX.Element;
+export declare function DataTablePaginationControl({ className, hasNextPage, ...props }: DataTablePaginationProps): import("react").JSX.Element;
+declare function DataTableComponent<TData>(rawProps: DataTableProps<TData> | DataTableDataProps<TData>): import("react").JSX.Element;
 export declare const DataTable: typeof DataTableComponent & {
     Toolbar: typeof DataTableToolbar;
     Search: typeof DataTableSearch;
@@ -86,5 +50,7 @@ export declare const DataTable: typeof DataTableComponent & {
     Footer: typeof DataTableFooter;
     Pagination: typeof DataTablePagination;
 };
-export {};
+export declare function DataTableContent(rawProps: DataTableContentProps): import("react").JSX.Element;
+export declare function DataTablePagination(rawProps: DataTablePaginationProps): import("react").JSX.Element;
+export declare function DataTableFooter(rawProps: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 //# sourceMappingURL=tabletanstack.d.ts.map

package/dist/esm/tabletanstack/tabletanstack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabletanstack.d.ts","sourceRoot":"","sources":["../../../src/tabletanstack/tabletanstack.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"tabletanstack.d.ts","sourceRoot":"","sources":["../../../src/tabletanstack/tabletanstack.tsx"],"names":[],"mappings":"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"}

package/dist/esm/tabletanstack/tabletanstack.js

@@ -1,21 +1,23 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useFormattedText } from "../shared/use-formatted-text.js";
 import { flexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 import { ArrowDown, ArrowUp, ArrowUpDown, ChevronRight, Columns3, Search } from "lucide-react";
 import { Fragment as external_react_Fragment, createContext, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
-import { Button } from "../button/index.js";
-import { Checkbox } from "../checkbox/index.js";
+import { ButtonControl } from "../button/button.js";
+import { CheckboxControl } from "../checkbox/checkbox.js";
+import { mergeComponentProps, useComponentProps, useGenericComponentDefaults } from "../config-provider/component-defaults.js";
 import { useLeafConfig } from "../config-provider/context.js";
 import { FieldScope } from "../form/form.js";
-import { Input } from "../input/index.js";
-import { Pagination } from "../pagination/index.js";
-import { Popover } from "../popover/index.js";
-import { Radio } from "../radio/index.js";
+import { InputControl } from "../input/input.js";
+import { PaginationControl } from "../pagination/pagination.js";
+import { PopoverControl } from "../popover/popover.js";
+import { RadioControl } from "../radio/radio.js";
 import { classes } from "../shared/classes.js";
 import { assignRef } from "../shared/field.js";
 import { useText } from "../shared/use-text.js";
-import { Table } from "../table/index.js";
+import { TableControl } from "../table/table.js";
 import { ReorderColumnHeader, ReorderHandle, ReorderItems, ReorderRow, ReorderScope } from "./reordering.js";
 const DataTableContext = /*#__PURE__*/ createContext(null);
 function useDataTable() {
@@ -117,9 +119,9 @@ function DataTableRoot({ table, children, caption, size = 'md', bordered = false
                     },
                     children: children ?? /*#__PURE__*/ jsxs(Fragment, {
                         children: [
-                            /*#__PURE__*/ jsx(DataTableContent, {}),
-                            pagination && /*#__PURE__*/ jsx(DataTableFooter, {
-                                children: /*#__PURE__*/ jsx(DataTablePagination, {})
+                            /*#__PURE__*/ jsx(DataTableContentControl, {}),
+                            pagination && /*#__PURE__*/ jsx(DataTableFooterControl, {
+                                children: /*#__PURE__*/ jsx(DataTablePaginationControl, {})
                             })
                         ]
                     })
@@ -128,26 +130,28 @@ function DataTableRoot({ table, children, caption, size = 'md', bordered = false
         })
     });
 }
-function DataTableToolbar({ className, ...props }) {
+function DataTableToolbar(rawProps) {
+    const { className, ...props } = useComponentProps('DataTableToolbar', rawProps);
     return /*#__PURE__*/ jsx("div", {
         ...props,
         className: classes('leaf-data-table__toolbar', className)
     });
 }
-function DataTableFooter({ className, ...props }) {
+function DataTableFooterControl({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         ...props,
         className: classes('leaf-data-table__footer', className)
     });
 }
-function DataTableSearch({ columnId, className, ...props }) {
+function DataTableSearch(rawProps) {
+    const { columnId, className, ...props } = useComponentProps('DataTableSearch', rawProps);
     const { table, loading, size } = useDataTable();
     const t = useText();
     const column = columnId ? table.getColumn(columnId) : void 0;
     const value = columnId ? column?.getFilterValue() : table.getState().globalFilter;
-    return /*#__PURE__*/ jsx(Input, {
-        "aria-label": t('搜索表格', 'Search table'),
-        placeholder: t('搜索表格', 'Search table'),
+    return /*#__PURE__*/ jsx(InputControl, {
+        "aria-label": t('dataTable.searchTable'),
+        placeholder: t('dataTable.searchTable'),
         prefix: /*#__PURE__*/ jsx(Search, {
             size: 16
         }),
@@ -167,17 +171,18 @@ function columnLabel(column) {
     const meta = column.columnDef.meta;
     return meta?.label ?? ('string' == typeof column.columnDef.header ? column.columnDef.header : column.id);
 }
-function DataTableColumnVisibility({ children, label }) {
+function DataTableColumnVisibility(rawProps) {
+    const { children, label } = useComponentProps('DataTableColumnVisibility', rawProps);
     const { table, loading, size } = useDataTable();
     const t = useText();
-    const title = label ?? t('显示列', 'Columns');
-    return /*#__PURE__*/ jsx(Popover, {
+    const title = label ?? t('dataTable.columns');
+    return /*#__PURE__*/ jsx(PopoverControl, {
         placement: "bottom-end",
         "aria-label": title,
         content: /*#__PURE__*/ jsx(FieldScope, {
             children: /*#__PURE__*/ jsx("div", {
                 className: "leaf-data-table__visibility",
-                children: table.getAllLeafColumns().map((column)=>/*#__PURE__*/ jsx(Checkbox, {
+                children: table.getAllLeafColumns().map((column)=>/*#__PURE__*/ jsx(CheckboxControl, {
                         checked: column.getIsVisible(),
                         disabled: loading || !column.getCanHide(),
                         onChange: column.getToggleVisibilityHandler(),
@@ -185,7 +190,7 @@ function DataTableColumnVisibility({ children, label }) {
                     }, column.id))
             })
         }),
-        children: /*#__PURE__*/ jsx(Button, {
+        children: /*#__PURE__*/ jsx(ButtonControl, {
             size: size,
             variant: "outline",
             startIcon: /*#__PURE__*/ jsx(Columns3, {
@@ -207,13 +212,15 @@ function pinProps(column) {
 function ResizeHandle({ header }) {
     const { table, loading } = useDataTable();
     const { direction } = useLeafConfig();
-    const t = useText();
+    const format = useFormattedText();
     const column = header.column;
     const min = column.columnDef.minSize ?? 20;
     const max = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
     return /*#__PURE__*/ jsx("hr", {
         tabIndex: loading ? -1 : 0,
-        "aria-label": `${t('调整列宽', 'Resize column')}: ${columnLabel(column)}`,
+        "aria-label": format('dataTable.resizeColumn', {
+            label: columnLabel(column)
+        }),
         "aria-orientation": "vertical",
         "aria-valuemin": min,
         "aria-valuemax": max,
@@ -249,12 +256,12 @@ function SelectionHeader() {
     const t = useText();
     if ('multiple' !== selection) return /*#__PURE__*/ jsx("span", {
         className: "leaf-table__sr-only",
-        children: t('选择行', 'Select rows')
+        children: t('dataTable.selectRows')
     });
     const page = 'page' === selectAllMode;
     const selectable = (page ? table.getRowModel() : table.getPrePaginationRowModel()).flatRows.filter((row)=>row.getCanSelect());
-    return /*#__PURE__*/ jsx(Checkbox, {
-        "aria-label": page ? t('选择本页所有行', 'Select all rows on this page') : t('选择所有行', 'Select all rows'),
+    return /*#__PURE__*/ jsx(CheckboxControl, {
+        "aria-label": page ? t('dataTable.selectAllRowsOnThisPage') : t('dataTable.selectAllRows'),
         checked: page ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected(),
         indeterminate: page ? table.getIsSomePageRowsSelected() : table.getIsSomeRowsSelected(),
         disabled: loading || !selectable.length,
@@ -264,7 +271,7 @@ function SelectionHeader() {
 function DataRow({ row, rowIndex, ariaRowIndex, measureRef }) {
     const config = useDataTable();
     const { id, selection, loading, getRowLabel, renderExpandedRow, getRowProps, getCellProps } = config;
-    const t = useText();
+    const format = useFormattedText();
     const detailsId = `${id}-detail-${encodeURIComponent(row.id)}`;
     const label = getRowLabel?.(row) ?? row.id;
     const expandable = config.expandable;
@@ -308,37 +315,45 @@ function DataRow({ row, rowIndex, ariaRowIndex, measureRef }) {
                 "aria-rowindex": ariaRowIndex,
                 selected: selection ? row.getIsSelected() : custom?.selected,
                 children: [
-                    config.rowReordering && /*#__PURE__*/ jsx(Table.Cell, {
+                    config.rowReordering && /*#__PURE__*/ jsx(TableControl.Cell, {
                         className: "leaf-data-table__utility",
                         children: /*#__PURE__*/ jsx(ReorderHandle, {
-                            label: `${t('移动行', 'Reorder row')}: ${label}`
+                            label: format('dataTable.reorderRow', {
+                                label
+                            })
                         })
                     }),
-                    selection && /*#__PURE__*/ jsx(Table.Cell, {
+                    selection && /*#__PURE__*/ jsx(TableControl.Cell, {
                         className: "leaf-data-table__utility",
-                        children: 'single' === selection ? /*#__PURE__*/ jsx(Radio, {
+                        children: 'single' === selection ? /*#__PURE__*/ jsx(RadioControl, {
                             name: `${id}-selection`,
                             form: `${id}-detached-selection`,
-                            "aria-label": `${t('选择行', 'Select row')}: ${label}`,
+                            "aria-label": format('dataTable.selectRow', {
+                                label
+                            }),
                             checked: row.getIsSelected(),
                             disabled: loading || !row.getCanSelect(),
                             onChange: ()=>config.table.setRowSelection({
                                     [row.id]: true
                                 })
-                        }) : /*#__PURE__*/ jsx(Checkbox, {
-                            "aria-label": `${t('选择行', 'Select row')}: ${label}`,
+                        }) : /*#__PURE__*/ jsx(CheckboxControl, {
+                            "aria-label": format('dataTable.selectRow', {
+                                label
+                            }),
                             checked: row.getIsSelected(),
                             indeterminate: row.getIsSomeSelected(),
                             disabled: loading || !row.getCanSelect(),
                             onChange: row.getToggleSelectedHandler()
                         })
                     }),
-                    expandable && /*#__PURE__*/ jsx(Table.Cell, {
+                    expandable && /*#__PURE__*/ jsx(TableControl.Cell, {
                         className: "leaf-data-table__utility",
                         children: row.getCanExpand() && /*#__PURE__*/ jsx("button", {
                             type: "button",
                             className: "leaf-data-table__expand",
-                            "aria-label": `${row.getIsExpanded() ? t('收起行', 'Collapse row') : t('展开行', 'Expand row')}: ${label}`,
+                            "aria-label": format(row.getIsExpanded() ? 'dataTable.collapseRow' : 'dataTable.expandRow', {
+                                label
+                            }),
                             "aria-expanded": row.getIsExpanded(),
                             "aria-controls": renderExpandedRow && !row.subRows.length ? detailsId : void 0,
                             disabled: loading,
@@ -356,7 +371,7 @@ function DataRow({ row, rowIndex, ariaRowIndex, measureRef }) {
                         const meta = cell.column.columnDef.meta;
                         const props = getCellProps?.(cell);
                         if (props?.colSpan === 0 || props?.rowSpan === 0) return null;
-                        return /*#__PURE__*/ jsxs(Table.Cell, {
+                        return /*#__PURE__*/ jsxs(TableControl.Cell, {
                             align: meta?.align,
                             ...pinProps(cell.column),
                             ...props,
@@ -376,13 +391,13 @@ function DataRow({ row, rowIndex, ariaRowIndex, measureRef }) {
                     })
                 ]
             }),
-            renderExpandedRow && row.getCanExpand() && !row.subRows.length && /*#__PURE__*/ jsx(Table.Row, {
+            renderExpandedRow && row.getCanExpand() && !row.subRows.length && /*#__PURE__*/ jsx(TableControl.Row, {
                 className: "leaf-data-table__detail",
                 id: detailsId,
                 "data-detail-row": row.id,
                 "aria-rowindex": ariaRowIndex && detail ? ariaRowIndex + 1 : void 0,
                 hidden: !detail,
-                children: /*#__PURE__*/ jsx(Table.Cell, {
+                children: /*#__PURE__*/ jsx(TableControl.Cell, {
                     colSpan: Math.max(1, cells.length + utilityCount),
                     children: visited || detail ? renderExpandedRow?.(row) : null
                 })
@@ -453,7 +468,7 @@ function VirtualRows({ rows, colSpan, headerCount, viewport, tableElement, focus
                 const gap = Math.max(0, item.start - (previous?.end ?? headerHeight.current));
                 return row ? /*#__PURE__*/ jsxs(external_react_Fragment, {
                     children: [
-                        gap > 0 && /*#__PURE__*/ jsx(Table.Row, {
+                        gap > 0 && /*#__PURE__*/ jsx(TableControl.Row, {
                             className: "leaf-data-table__spacer",
                             "aria-hidden": "true",
                             children: /*#__PURE__*/ jsx("td", {
@@ -472,7 +487,7 @@ function VirtualRows({ rows, colSpan, headerCount, viewport, tableElement, focus
                     ]
                 }, row.id) : null;
             }),
-            bottom > 0 && /*#__PURE__*/ jsx(Table.Row, {
+            bottom > 0 && /*#__PURE__*/ jsx(TableControl.Row, {
                 className: "leaf-data-table__spacer",
                 "aria-hidden": "true",
                 children: /*#__PURE__*/ jsx("td", {
@@ -485,10 +500,11 @@ function VirtualRows({ rows, colSpan, headerCount, viewport, tableElement, focus
         ]
     });
 }
-function DataTableContent({ className, ...props }) {
+function DataTableContentControl({ className, ...props }) {
     const config = useDataTable();
     const { table, caption, tableRef, loading, error, emptyContent, onRetry, selection, resizable, virtual } = config;
     const t = useText();
+    const format = useFormattedText();
     const viewport = useRef(null);
     const element = useRef(null);
     const [focusedRowId, setFocusedRowId] = useState();
@@ -531,7 +547,7 @@ function DataTableContent({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         ...props,
         className: className,
-        children: /*#__PURE__*/ jsxs(Table, {
+        children: /*#__PURE__*/ jsxs(TableControl, {
             ref: (node)=>{
                 assignRef(element, node);
                 assignRef(tableRef, node);
@@ -553,7 +569,7 @@ function DataTableContent({ className, ...props }) {
             },
             loading: loading && Boolean(rows.length) && 'error' !== status,
             children: [
-                null != caption && /*#__PURE__*/ jsx(Table.Caption, {
+                null != caption && /*#__PURE__*/ jsx(TableControl.Caption, {
                     children: caption
                 }),
                 /*#__PURE__*/ jsxs("colgroup", {
@@ -580,33 +596,33 @@ function DataTableContent({ className, ...props }) {
                             }, column.id))
                     ]
                 }),
-                /*#__PURE__*/ jsx(Table.Header, {
+                /*#__PURE__*/ jsx(TableControl.Header, {
                     children: /*#__PURE__*/ jsx(ReorderItems, {
                         enabled: Boolean(config.columnReordering),
                         kind: "column",
                         ids: config.columnReordering ? columns.map((column)=>column.id) : [],
-                        children: headers.map((group, groupIndex)=>/*#__PURE__*/ jsxs(Table.Row, {
+                        children: headers.map((group, groupIndex)=>/*#__PURE__*/ jsxs(TableControl.Row, {
                                 "aria-rowindex": virtual ? groupIndex + 1 : void 0,
                                 children: [
-                                    0 === groupIndex && config.rowReordering && /*#__PURE__*/ jsx(Table.ColumnHeader, {
+                                    0 === groupIndex && config.rowReordering && /*#__PURE__*/ jsx(TableControl.ColumnHeader, {
                                         rowSpan: headers.length,
                                         className: "leaf-data-table__utility",
                                         children: /*#__PURE__*/ jsx("span", {
                                             className: "leaf-table__sr-only",
-                                            children: t('移动行', 'Reorder rows')
+                                            children: t('dataTable.reorderRows')
                                         })
                                     }),
-                                    0 === groupIndex && selection && /*#__PURE__*/ jsx(Table.ColumnHeader, {
+                                    0 === groupIndex && selection && /*#__PURE__*/ jsx(TableControl.ColumnHeader, {
                                         rowSpan: headers.length,
                                         className: "leaf-data-table__utility",
                                         children: /*#__PURE__*/ jsx(SelectionHeader, {})
                                     }),
-                                    0 === groupIndex && expandable && /*#__PURE__*/ jsx(Table.ColumnHeader, {
+                                    0 === groupIndex && expandable && /*#__PURE__*/ jsx(TableControl.ColumnHeader, {
                                         rowSpan: headers.length,
                                         className: "leaf-data-table__utility",
                                         children: /*#__PURE__*/ jsx("span", {
                                             className: "leaf-table__sr-only",
-                                            children: t('展开行', 'Expand rows')
+                                            children: t('dataTable.expandRows')
                                         })
                                     }),
                                     group.headers.map((header)=>{
@@ -616,7 +632,7 @@ function DataTableContent({ className, ...props }) {
                                         const canSort = !header.isPlaceholder && !column.columns.length && column.getCanSort();
                                         const SortIcon = 'asc' === sorted ? ArrowUp : 'desc' === sorted ? ArrowDown : ArrowUpDown;
                                         const nextSort = column.getNextSortingOrder();
-                                        const sortLabel = 'asc' === nextSort ? t('升序排序', 'Sort ascending') : 'desc' === nextSort ? t('降序排序', 'Sort descending') : t('取消排序', 'Clear sorting');
+                                        const sortLabel = 'asc' === nextSort ? t('dataTable.sortAscending') : 'desc' === nextSort ? t('dataTable.sortDescending') : t('dataTable.clearSorting');
                                         return /*#__PURE__*/ jsxs(ReorderColumnHeader, {
                                             enabled: Boolean(config.columnReordering && !header.isPlaceholder && !column.columns.length),
                                             disabled: !config.reorderColumns,
@@ -634,7 +650,9 @@ function DataTableContent({ className, ...props }) {
                                                     className: "leaf-data-table__heading",
                                                     children: [
                                                         config.reorderColumns && !header.isPlaceholder && /*#__PURE__*/ jsx(ReorderHandle, {
-                                                            label: `${t('移动列', 'Reorder column')}: ${columnLabel(column)}`
+                                                            label: format('dataTable.reorderColumn', {
+                                                                label: columnLabel(column)
+                                                            })
                                                         }),
                                                         header.isPlaceholder ? null : canSort ? /*#__PURE__*/ jsxs("button", {
                                                             type: "button",
@@ -665,18 +683,18 @@ function DataTableContent({ className, ...props }) {
                             }, group.id))
                     })
                 }),
-                /*#__PURE__*/ jsx(Table.Body, {
+                /*#__PURE__*/ jsx(TableControl.Body, {
                     onFocusCapture: virtual ? (event)=>setFocusedRowId(event.target.closest('[data-row-id], [data-detail-row]')?.getAttribute('data-row-id') ?? event.target.closest('[data-detail-row]')?.getAttribute('data-detail-row') ?? void 0) : void 0,
                     onBlurCapture: virtual ? (event)=>{
                         if (!event.currentTarget.contains(event.relatedTarget)) setFocusedRowId(void 0);
                     } : void 0,
-                    children: 'error' === status ? /*#__PURE__*/ jsx(Table.Error, {
+                    children: 'error' === status ? /*#__PURE__*/ jsx(TableControl.Error, {
                         colSpan: colSpan,
                         onRetry: onRetry,
                         children: error
-                    }) : 'loading' === status ? /*#__PURE__*/ jsx(Table.Loading, {
+                    }) : 'loading' === status ? /*#__PURE__*/ jsx(TableControl.Loading, {
                         colSpan: colSpan
-                    }) : 'empty' === status ? /*#__PURE__*/ jsx(Table.Empty, {
+                    }) : 'empty' === status ? /*#__PURE__*/ jsx(TableControl.Empty, {
                         colSpan: colSpan,
                         children: emptyContent
                     }) : virtual ? /*#__PURE__*/ jsx(VirtualRows, {
@@ -701,36 +719,36 @@ function DataTableContent({ className, ...props }) {
         })
     });
 }
-function DataTablePagination({ className, hasNextPage, ...props }) {
+function DataTablePaginationControl({ className, hasNextPage, ...props }) {
     const { table, loading, size } = useDataTable();
     const { pageIndex, pageSize } = table.getState().pagination;
     const t = useText();
     const pages = table.getPageCount();
     if (pages < 0) return /*#__PURE__*/ jsxs("nav", {
-        "aria-label": t('分页', 'Pagination'),
+        "aria-label": t('pagination.label'),
         className: classes('leaf-data-table__pagination', className),
         children: [
-            /*#__PURE__*/ jsx(Button, {
-                size: size,
-                variant: "outline",
+            /*#__PURE__*/ jsx(ButtonControl, {
+                size: props.size ?? size,
+                variant: props.variant ?? 'outline',
                 disabled: props.disabled || loading || !table.getCanPreviousPage(),
                 onClick: ()=>table.previousPage(),
-                children: t('上一页', 'Previous page')
+                children: t('pagination.previousPage')
             }),
             /*#__PURE__*/ jsx("span", {
                 children: pageIndex + 1
             }),
-            /*#__PURE__*/ jsx(Button, {
-                size: size,
-                variant: "outline",
+            /*#__PURE__*/ jsx(ButtonControl, {
+                size: props.size ?? size,
+                variant: props.variant ?? 'outline',
                 disabled: props.disabled || loading || !(hasNextPage ?? table.getCanNextPage()),
                 onClick: ()=>table.nextPage(),
-                children: t('下一页', 'Next page')
+                children: t('pagination.nextPage')
             })
         ]
     });
     const total = table.options.rowCount ?? (table.options.manualPagination && null != table.options.pageCount ? pages * pageSize : table.getRowCount());
-    return /*#__PURE__*/ jsx(Pagination, {
+    return /*#__PURE__*/ jsx(PaginationControl, {
         showSizeChanger: true,
         size: size,
         ...props,
@@ -776,7 +794,8 @@ function ManagedDataTable({ data, columns, rowKey, options, ...props }) {
         table: table
     });
 }
-function DataTableComponent(props) {
+function DataTableComponent(rawProps) {
+    const props = mergeComponentProps(useGenericComponentDefaults('DataTable'), rawProps);
     return props.table ? /*#__PURE__*/ jsx(DataTableRoot, {
         ...props
     }) : /*#__PURE__*/ jsx(ManagedDataTable, {
@@ -791,6 +810,24 @@ const DataTable = Object.assign(DataTableComponent, {
     Footer: DataTableFooter,
     Pagination: DataTablePagination
 });
-export { DataTable, DataTableColumnVisibility, DataTableContent, DataTableFooter, DataTablePagination, DataTableSearch, DataTableToolbar };
+function DataTableContent(rawProps) {
+    const props = useComponentProps('DataTableContent', rawProps);
+    return /*#__PURE__*/ jsx(DataTableContentControl, {
+        ...props
+    });
+}
+function DataTablePagination(rawProps) {
+    const props = useComponentProps('DataTablePagination', rawProps);
+    return /*#__PURE__*/ jsx(DataTablePaginationControl, {
+        ...props
+    });
+}
+function DataTableFooter(rawProps) {
+    const props = useComponentProps('DataTableFooter', rawProps);
+    return /*#__PURE__*/ jsx(DataTableFooterControl, {
+        ...props
+    });
+}
+export { DataTable, DataTableColumnVisibility, DataTableContent, DataTableContentControl, DataTableFooter, DataTableFooterControl, DataTablePagination, DataTablePaginationControl, DataTableSearch, DataTableToolbar };
 
 //# sourceMappingURL=tabletanstack.js.map