aplance-ui 1.5.1 → 1.6.0

package/registry/components/ui/data-table/types.ts

@@ -4,55 +4,99 @@ import type {
   ColumnOrderState,
   ColumnPinningState,
   ColumnSizingState,
+  ColumnVisibilityState,
   ExpandedState,
   GroupingState,
   Header,
   OnChangeFn,
-  RowData,
+  PaginationState,
   Row,
+  RowData,
   RowSelectionState,
   SortingState,
   Table,
-  TableMeta as TanstackTableMeta,
-  VisibilityState,
 } from "@tanstack/react-table";
 import type { ReactNode } from "react";
+import type { dataTableFeatures } from "./utils";
+
+// ─── Features & columns ───────────────────────────────────────────────────────
+
+/**
+ * The TanStack Table feature set every DataTable registers. Pass it where
+ * TanStack asks for a table's features, e.g.
+ * `createColumnHelper<DataTableFeatures, Invoice>()`.
+ */
+export type DataTableFeatures = typeof dataTableFeatures;
 
-// ─── Column meta augmentation ─────────────────────────────────────────────────
-// Attach presentation hints directly to the column definition so consumers
-// stay in TanStack's idiomatic API surface (`columns: [{ ..., meta: {...} }]`)
-// instead of inventing parallel prop maps on the table.
-declare module "@tanstack/react-table" {
-  /* eslint-disable @typescript-eslint/no-unused-vars -- generics must mirror tanstack's signature exactly */
-  interface ColumnMeta<TData extends RowData, TValue> {
-    /** Horizontal alignment of cell + header content. Default: `'left'`. */
-    align?: "left" | "center" | "right";
-    /**
-     * Whether to truncate overflowing text with an ellipsis. Default: `true`.
-     * Set to `false` for cells that host interactive controls (inputs,
-     * selects, buttons) so focus rings and dropdowns are not clipped.
-     */
-    truncate?: boolean;
-    /** Extra class merged onto the `<th>` element. */
-    headerClassName?: string;
-    /** Extra class merged onto the `<td>` element. */
-    cellClassName?: string;
-  }
-  /* eslint-enable @typescript-eslint/no-unused-vars */
+/**
+ * Presentation hints a column carries in `meta`, so consumers stay in
+ * TanStack's idiomatic API surface (`columns: [{ ..., meta: {...} }]`)
+ * instead of inventing parallel prop maps on the table.
+ */
+export interface DataTableColumnMeta {
+  /** Horizontal alignment of cell + header content. Default: `'left'`. */
+  align?: "left" | "center" | "right";
+  /**
+   * Whether to truncate overflowing text with an ellipsis. Default: `true`.
+   * Set to `false` for cells that host interactive controls (inputs,
+   * selects, buttons) so focus rings and dropdowns are not clipped.
+   */
+  truncate?: boolean;
+  /** Extra class merged onto the `<th>` element. */
+  headerClassName?: string;
+  /** Extra class merged onto the `<td>` element. */
+  cellClassName?: string;
 }
 
+/**
+ * One DataTable column. TanStack's `ColumnDef` is invariant on its value type
+ * parameter: `ColumnDef<F, Email, string>` is NOT assignable to
+ * `ColumnDef<F, Email, unknown>`, because `footer`/`header` templates place the
+ * value param in a contravariant position. `any` is the correct default - it
+ * is bivariant (simultaneously supertype and subtype of every type), which is
+ * the only param that lets columns of any concrete value type share one
+ * array. This matches how TanStack Table itself types its own internal APIs.
+ *
+ * In consumers: do NOT write `useMemo<DataTableColumnDef<X, unknown>[]>(...)`.
+ * Just write `useMemo(() => [...], [deps])` - let TypeScript infer the
+ * column types. The inferred union widens correctly at the prop boundary.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type DataTableColumnDef<TData extends RowData, TValue = any> = ColumnDef<
+  DataTableFeatures,
+  TData,
+  TValue
+>;
+
 // ─── Filter fields ────────────────────────────────────────────────────────────
 // Two headless primitives - nothing else. Every concrete filter (search,
 // select, date picker, custom slider, etc.) plugs in through the same
 // `value`/`onChange` render-prop contract, so the data-table has zero
 // compile-time dependency on any specific input component.
 
+/**
+ * Where a filter sits. `auto`: in the row while it fits, behind the Filters
+ * button on a compact screen. `inline`: in the row at every width, as a search
+ * people reach for first. `modal`: behind the Filters button at every width,
+ * for the filters a row has no room for.
+ */
+export type FilterPlacement = "auto" | "inline" | "modal";
+
 /** Any input-like field with a string value. Render anything that fulfils the API. */
 export interface FilterInputField {
   type: "field";
   key: string;
   /** Grid column width template. Default: `'1fr'` (shares remaining space). */
   width?: string;
+  /** Where it sits. Default: `'auto'`. */
+  placement?: FilterPlacement;
+  /**
+   * What it holds until someone sets it: the control shows it, it does not
+   * count as in use, and Clear all returns it here. With `useDataTable`, give
+   * the same value in `defaultFilterValues` so the table's state, its URL or
+   * storage, and `resetFilters` start from it too. Default: `''`.
+   */
+  defaultValue?: string;
   render: (api: {
     value: string;
     onChange: (value: string) => void;
@@ -64,6 +108,8 @@ export interface FilterAction {
   type: "action";
   /** Grid column width template. Default: `'auto'` (hugs content). */
   width?: string;
+  /** Where it sits. Default: `'auto'`. */
+  placement?: FilterPlacement;
   render: () => ReactNode;
 }
 
@@ -75,9 +121,18 @@ export interface FilterBarProps {
   onChange: (key: string, value: string) => void;
 }
 
+export interface FilterSheetProps extends FilterBarProps {
+  /**
+   * The button shows only its icon, for a row whose own fields, as a search,
+   * already say what it is. Default: `false`.
+   */
+  iconOnly?: boolean;
+}
+
 // ─── Table meta ───────────────────────────────────────────────────────────────
 
-export interface DataTableMeta<TData> extends TanstackTableMeta<TData> {
+/** What a DataTable puts in `table.options.meta`, for cells to read. */
+export interface DataTableMeta {
   editingRowId: string | null;
   updateData: (rowId: string, columnId: string, value: unknown) => void;
 }
@@ -94,7 +149,7 @@ export interface PersistedState {
   pagination?: PaginationState;
   sorting?: SortingState;
   columnOrder?: ColumnOrderState;
-  columnVisibility?: VisibilityState;
+  columnVisibility?: ColumnVisibilityState;
   columnPinning?: ColumnPinningState;
   columnSizing?: ColumnSizingState;
   grouping?: GroupingState;
@@ -143,13 +198,8 @@ export type PersistState =
 
 // ─── Pagination ───────────────────────────────────────────────────────────────
 
-export interface PaginationState {
-  pageIndex: number;
-  pageSize: number;
-}
-
-export interface PaginationBarProps<TData> {
-  table: Table<TData>;
+export interface PaginationBarProps<TData extends RowData> {
+  table: Table<DataTableFeatures, TData>;
   pagination: PaginationState;
   onPaginationChange: (next: PaginationState) => void;
   pageSizeOptions: number[];
@@ -163,37 +213,24 @@ export interface PaginationBarProps<TData> {
   extra: ReactNode;
 }
 
-// ─── Re-exports for column-control state ─────────────────────────────────────
+// ─── Re-exports for table state ───────────────────────────────────────────────
 // Re-exposed from tanstack so consumers do not need to import two modules.
 export type {
   ColumnOrderState,
   ColumnPinningState,
   ColumnSizingState,
+  ColumnVisibilityState,
   ExpandedState,
   GroupingState,
-  VisibilityState,
+  PaginationState,
 };
 
 // ─── Main DataTable props ─────────────────────────────────────────────────────
 
 export interface DataTableProps<TData extends { id: string }> {
   data: TData[];
-  /**
-   * TanStack Table's ColumnDef is invariant on its value type parameter.
-   * `ColumnDef<Email, string>` is NOT assignable to `ColumnDef<Email, unknown>`
-   * because `footer`/`header` templates place the value param in a contravariant
-   * position. `any` is the correct solution - it is bivariant (simultaneously
-   * supertype and subtype of every type), which is the only param that lets
-   * columns of any concrete value type pass here without errors.
-   * This matches how TanStack Table itself types its own internal APIs.
-   *
-   * In consumers: do NOT write `useMemo<ColumnDef<X, unknown>[]>(...)`.
-   * Just write `useMemo(() => [...], [deps])` - let TypeScript infer the
-   * column types. The inferred union widens correctly into `ColumnDef<X, any>`
-   * at the prop boundary with zero errors.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  columns: ColumnDef<TData, any>[];
+  /** Column definitions - see `DataTableColumnDef` for how to type them. */
+  columns: DataTableColumnDef<TData>[];
 
   isLoading?: boolean;
   emptyMessage?: string;
@@ -215,7 +252,20 @@ export interface DataTableProps<TData extends { id: string }> {
   showPagination?: boolean;
   pagination?: PaginationState;
   onPaginationChange?: (next: PaginationState) => void;
+  /**
+   * When true, `data` is one page (from a server, or sliced by you) and the
+   * table shows it as is. Set it to false to pass every row: the table then
+   * sorts and groups all of them before it pages them. `useDataTable` sets it
+   * from `clientSidePagination`. Default: `true`.
+   */
+  manualPagination?: boolean;
+  /**
+   * Page count when `manualPagination` is on. Without it, pages are counted
+   * from `totalCount`, and with neither the total is unknown: "next" stays
+   * open and the page controls are hidden.
+   */
   totalPages?: number;
+  /** Total row count, shown in the pagination bar. */
   totalCount?: number;
   pageSizeOptions?: number[];
   showPageSizeSelect?: boolean;
@@ -229,7 +279,7 @@ export interface DataTableProps<TData extends { id: string }> {
    * all). Returning false disables the per-row checkbox via the standard
    * `row.getCanSelect()` flow.
    */
-  getRowCanSelect?: (row: Row<TData>) => boolean;
+  getRowCanSelect?: (row: Row<DataTableFeatures, TData>) => boolean;
   rowSelection?: RowSelectionState;
   onRowSelectionChange?: OnChangeFn<RowSelectionState>;
 
@@ -263,17 +313,23 @@ export interface DataTableProps<TData extends { id: string }> {
   onColumnSizingChange?: OnChangeFn<ColumnSizingState>;
 
   /**
-   * Sticky column pinning. When enabled, pinned columns stay visible
-   * during horizontal scroll. Per-column opt-out: `enablePinning: false`.
+   * Sticky column pinning to the row's `start` or `end`. When enabled, pinned
+   * columns stay visible during horizontal scroll. Per-column opt-out:
+   * `enablePinning: false`.
    */
   enableColumnPinning?: boolean;
   columnPinning?: ColumnPinningState;
   onColumnPinningChange?: OnChangeFn<ColumnPinningState>;
-  defaultColumnPinning?: ColumnPinningState;
+  /**
+   * Columns pinned from the start, e.g. `{ end: ['actions'] }`. They also
+   * anchor the order: they stay on the outer edges, with pins made later
+   * placed inside them.
+   */
+  defaultColumnPinning?: Partial<ColumnPinningState>;
 
   /** Show/hide columns. Pass with a UI to let users toggle visibility. */
-  columnVisibility?: VisibilityState;
-  onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+  columnVisibility?: ColumnVisibilityState;
+  onColumnVisibilityChange?: OnChangeFn<ColumnVisibilityState>;
 
   /**
    * Row grouping by column id. Renders a collapsible group row per
@@ -328,8 +384,8 @@ export interface HeaderActionButtonProps {
   children: ReactNode;
 }
 
-export interface HeaderCellProps<TData> {
-  header: Header<TData, unknown>;
+export interface HeaderCellProps<TData extends RowData> {
+  header: Header<DataTableFeatures, TData, unknown>;
   extraWidth: number;
   enableColumnOrdering: boolean;
   enableColumnResizing: boolean;
@@ -344,7 +400,7 @@ export interface HeaderCellProps<TData> {
 }
 
 export interface BodyRowProps<TData extends { id: string }> {
-  row: Row<TData>;
+  row: Row<DataTableFeatures, TData>;
   editingRowId: string | null;
   onRow?: (row: TData) => void;
   enableGrouping: boolean;
@@ -358,17 +414,25 @@ export interface BodyRowProps<TData extends { id: string }> {
   onDropRow?: (draggedId: string, targetId: string) => void;
 }
 
-export interface BodyCellProps<TData> {
-  cell: Cell<TData, unknown>;
+export interface FooterCellProps<TData extends RowData> {
+  header: Header<DataTableFeatures, TData, unknown>;
   extraWidth: number;
-  groupSourceCell?: Cell<TData, unknown>;
+}
+
+export interface BodyCellProps<TData extends RowData> {
+  cell: Cell<DataTableFeatures, TData, unknown>;
+  extraWidth: number;
+  groupSourceCell?: Cell<DataTableFeatures, TData, unknown>;
   isGroupAnchorCell: boolean;
 }
 
 // ─── useDataTable hook ────────────────────────────────────────────────────────
 
 export interface UseDataTableOptions<TData extends { id: string }> {
-  /** Full dataset. The hook slices it per page automatically (client-side mode). */
+  /**
+   * Full dataset. Client-side, the table sorts and groups all of it, then
+   * shows one page at a time.
+   */
   data: TData[];
 
   /** Initial page size. Default: 10. */
@@ -424,9 +488,9 @@ export interface UseDataTableOptions<TData extends { id: string }> {
   onDataChange?: (data: TData[]) => void;
 
   /**
-   * If true (default), the hook slices `data` for the current page.
-   * Set to false when using server-side pagination - you control `data` externally
-   * and just want the hook to manage state.
+   * If true (default), the table pages `data` itself, after sorting and
+   * grouping every row. Set to false when using server-side pagination - you
+   * control `data` (one page) externally and just want the hook to manage state.
    */
   clientSidePagination?: boolean;
 
@@ -447,9 +511,13 @@ export interface UseDataTableOptions<TData extends { id: string }> {
   /** Initial drag-drop column order. */
   defaultColumnOrder?: ColumnOrderState;
   /** Initial column visibility map. */
-  defaultColumnVisibility?: VisibilityState;
-  /** Initial column pinning state. This also acts as the "anchors" for normalization. */
-  defaultColumnPinning?: ColumnPinningState;
+  defaultColumnVisibility?: ColumnVisibilityState;
+  /**
+   * Initial column pinning, e.g. `{ end: ['actions'] }`. These columns also
+   * anchor the order: they stay on the outer edges, with pins made later
+   * placed inside them.
+   */
+  defaultColumnPinning?: Partial<ColumnPinningState>;
   /** Initial column sizing state. */
   defaultColumnSizing?: ColumnSizingState;
   /** Initial grouping state (column ids to group by). */
@@ -472,14 +540,12 @@ export interface UseDataTableState<TData extends { id: string }> {
   rowSelection: RowSelectionState;
   editingRowId: string | null;
   columnOrder: ColumnOrderState;
-  columnVisibility: VisibilityState;
+  columnVisibility: ColumnVisibilityState;
   columnPinning: ColumnPinningState;
   columnSizing: ColumnSizingState;
   grouping: GroupingState;
   expanded: ExpandedState;
-  /** Rows in the current page (already sliced when clientSidePagination=true) */
-  pageData: TData[];
-  /** All rows after filtering (before paging) */
+  /** All rows after filtering (before sorting and paging) */
   filteredData: TData[];
   /** IDs of selected rows */
   selectedIds: string[];
@@ -492,7 +558,10 @@ export interface UseDataTableActions {
   setFilter: (key: string, value: string) => void;
   /** Set multiple filter values at once (resets page to 0 automatically) */
   setFilters: (values: Record<string, string>) => void;
-  /** Reset all filters to their default values */
+  /**
+   * Reset all filters to `defaultFilterValues`. Every value that changes is
+   * reported through `onFilterChange`, like a single `setFilter`.
+   */
   resetFilters: () => void;
   /** Go to a specific page index (0-based) */
   goToPage: (index: number) => void;
@@ -511,7 +580,7 @@ export interface UseDataTableActions {
   /** Toggle visibility of a single column. */
   toggleColumnVisibility: (columnId: string) => void;
   /** Replace the visibility map. */
-  setColumnVisibility: (next: VisibilityState) => void;
+  setColumnVisibility: (next: ColumnVisibilityState) => void;
   /** Replace the column order. */
   setColumnOrder: (next: ColumnOrderState) => void;
   /** Replace the column pinning state. */
@@ -556,8 +625,8 @@ export interface PersistArgs {
   setSorting: (next: SortingState) => void;
   columnOrder: ColumnOrderState;
   setColumnOrder: (next: ColumnOrderState) => void;
-  columnVisibility: VisibilityState;
-  setColumnVisibility: (next: VisibilityState) => void;
+  columnVisibility: ColumnVisibilityState;
+  setColumnVisibility: (next: ColumnVisibilityState) => void;
   columnPinning: ColumnPinningState;
   setColumnPinning: (next: ColumnPinningState) => void;
   columnSizing: ColumnSizingState;
@@ -580,7 +649,7 @@ export interface SnapshotInput {
   defaultPageSize: number;
   sorting: SortingState;
   columnOrder: ColumnOrderState;
-  columnVisibility: VisibilityState;
+  columnVisibility: ColumnVisibilityState;
   columnPinning: ColumnPinningState;
   columnSizing: ColumnSizingState;
   grouping: GroupingState;
@@ -601,7 +670,7 @@ export interface ApplyPersistedTarget {
   setPagination: (next: PaginationState) => void;
   setSorting: (next: SortingState) => void;
   setColumnOrder: (next: ColumnOrderState) => void;
-  setColumnVisibility: (next: VisibilityState) => void;
+  setColumnVisibility: (next: ColumnVisibilityState) => void;
   setColumnPinning: (next: ColumnPinningState) => void;
   setColumnSizing: (next: ColumnSizingState) => void;
   setGrouping: (next: GroupingState) => void;

package/registry/components/ui/data-table/useDataTable.tsx

@@ -3,16 +3,16 @@ import type {
   ColumnOrderState,
   ColumnPinningState,
   ColumnSizingState,
+  ColumnVisibilityState,
   ExpandedState,
   GroupingState,
   OnChangeFn,
+  PaginationState,
   RowSelectionState,
   SortingState,
-  VisibilityState,
 } from "@tanstack/react-table";
 import type {
   DataTableProps,
-  PaginationState,
   PersistArgs,
   PersistedState,
   UseDataTableOptions,
@@ -69,9 +69,12 @@ export function useDataTable<TData extends { id: string }>({
     defaultColumnOrder ?? [],
   );
   const [columnVisibility, setColumnVisibilityState] =
-    useState<VisibilityState>(defaultColumnVisibility ?? {});
+    useState<ColumnVisibilityState>(defaultColumnVisibility ?? {});
   const [columnPinning, setColumnPinningState] = useState<ColumnPinningState>(
-    defaultColumnPinning ?? {},
+    () => ({
+      start: defaultColumnPinning?.start ?? [],
+      end: defaultColumnPinning?.end ?? [],
+    }),
   );
   const [columnSizing, setColumnSizingState] = useState<ColumnSizingState>(
     defaultColumnSizing ?? {},
@@ -93,6 +96,10 @@ export function useDataTable<TData extends { id: string }>({
   // updater. Firing consumer callbacks inside an updater causes double-fires
   // under React strict/concurrent rendering (updaters may run twice) which
   // would trigger duplicate API calls for server-side sort/filter consumers.
+  // Each handler also assigns its ref as soon as it computes `next`, so several
+  // calls in one event (Clear all resets each filter in turn) build on each
+  // other instead of on the last render. The effect below covers state set
+  // any other way (hydration from the URL or storage).
   const sortingRef = useRef(sorting);
   const rowSelectionRef = useRef(rowSelection);
   const filterValuesRef = useRef(filterValues);
@@ -140,6 +147,7 @@ export function useDataTable<TData extends { id: string }>({
     (updater) => {
       const next =
         typeof updater === "function" ? updater(sortingRef.current) : updater;
+      sortingRef.current = next;
       setSorting(next);
       externalOnSortingChange?.(next);
     },
@@ -149,6 +157,7 @@ export function useDataTable<TData extends { id: string }>({
   // ── Pagination handler ──────────────────────────────────────────────────────
   const handlePaginationChange = useCallback(
     (next: PaginationState) => {
+      paginationRef.current = next;
       setPagination(next);
       externalOnPaginationChange?.(next);
     },
@@ -162,6 +171,7 @@ export function useDataTable<TData extends { id: string }>({
         typeof updater === "function"
           ? updater(rowSelectionRef.current)
           : updater;
+      rowSelectionRef.current = next;
       setRowSelection(next);
       externalOnRowSelectionChange?.(next);
     },
@@ -176,6 +186,7 @@ export function useDataTable<TData extends { id: string }>({
   const setFilter = useCallback(
     (key: string, value: string) => {
       const next = { ...filterValuesRef.current, [key]: value };
+      filterValuesRef.current = next;
       setFilterValues(next);
       onFilterChange?.(key, value, next);
       
@@ -190,6 +201,7 @@ export function useDataTable<TData extends { id: string }>({
   const setFilters = useCallback(
     (values: Record<string, string>) => {
       const next = { ...filterValuesRef.current, ...values };
+      filterValuesRef.current = next;
       setFilterValues(next);
       for (const [k, v] of Object.entries(values)) {
         onFilterChange?.(k, v, next);
@@ -204,13 +216,22 @@ export function useDataTable<TData extends { id: string }>({
   );
 
   const resetFilters = useCallback(() => {
-    setFilterValues(defaultFilterValues);
-    
+    const prev = filterValuesRef.current;
+    const next = defaultFilterValues;
+    filterValuesRef.current = next;
+    setFilterValues(next);
+    // Same contract as setFilter: every value that changes is reported, so a
+    // server-side consumer refetches after a reset too.
+    for (const key of new Set([...Object.keys(prev), ...Object.keys(next)])) {
+      const value = next[key] ?? "";
+      if ((prev[key] ?? "") !== value) onFilterChange?.(key, value, next);
+    }
+
     const p = paginationRef.current;
     if (p.pageIndex !== 0) {
       handlePaginationChange({ ...p, pageIndex: 0 });
     }
-  }, [defaultFilterValues, handlePaginationChange]);
+  }, [defaultFilterValues, onFilterChange, handlePaginationChange]);
 
   // ── Inline editing actions ──────────────────────────────────────────────────
   const startEdit = useCallback((rowId: string) => {
@@ -281,6 +302,7 @@ export function useDataTable<TData extends { id: string }>({
   );
 
   const clearSelection = useCallback(() => {
+    rowSelectionRef.current = {};
     setRowSelection({});
   }, []);
 
@@ -342,12 +364,6 @@ export function useDataTable<TData extends { id: string }>({
     return filterFn(localData, filterValues);
   }, [localData, filterFn, filterValues]);
 
-  const pageData = useMemo<TData[]>(() => {
-    if (!clientSidePagination) return filteredData;
-    const { pageIndex, pageSize } = pagination;
-    return filteredData.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
-  }, [filteredData, pagination, clientSidePagination]);
-
   const totalCount = externalTotalCount ?? filteredData.length;
   const totalPages =
     externalTotalPages ?? Math.ceil(filteredData.length / pagination.pageSize);
@@ -364,7 +380,9 @@ export function useDataTable<TData extends { id: string }>({
     "columns" | "filters" | "className"
   > = useMemo(
     () => ({
-      data: pageData,
+      // Client-side, the table gets every filtered row and sorts, groups and
+      // pages them itself; server-side, `data` is already the page.
+      data: filteredData,
       sorting,
       onSortingChange: handleSortingChange,
       manualSorting,
@@ -373,6 +391,7 @@ export function useDataTable<TData extends { id: string }>({
       showPagination: true,
       pagination,
       onPaginationChange: handlePaginationChange,
+      manualPagination: !clientSidePagination,
       totalPages,
       totalCount,
       rowSelection,
@@ -395,7 +414,7 @@ export function useDataTable<TData extends { id: string }>({
       onRowOrderChange: reorderRow,
     }),
     [
-      pageData,
+      filteredData,
       sorting,
       handleSortingChange,
       manualSorting,
@@ -403,6 +422,7 @@ export function useDataTable<TData extends { id: string }>({
       setFilter,
       pagination,
       handlePaginationChange,
+      clientSidePagination,
       totalPages,
       totalCount,
       rowSelection,
@@ -479,7 +499,6 @@ export function useDataTable<TData extends { id: string }>({
       columnSizing,
       grouping,
       expanded,
-      pageData,
       filteredData,
       selectedIds,
       selectedRows,