@nccirtu/tablefy 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Cirtu Cristian
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,236 @@
+# Tablefy
+
+A powerful, type-safe React table package built with TanStack Table and shadcn/ui components. Create beautiful, feature-rich data tables with a fluent, chainable API.
+
+## Features
+
+- **Beautiful UI** - Built on shadcn/ui components with Tailwind CSS
+- **Search & Filter** - Built-in search and advanced filtering
+- **Sorting & Pagination** - Full sorting and pagination support
+- **Type-Safe** - Complete TypeScript support with type inference
+- **Fluent API** - Chainable builder pattern for easy configuration
+- **Responsive** - Mobile-friendly responsive design
+- **Rich Columns** - 12+ specialized column types with custom builders
+- **Performance** - Optimized for large datasets
+- **Customizable** - Extensive theming and styling options
+
+## Installation
+
+```bash
+npm install tablefy
+```
+
+### Prerequisites
+
+Tablefy requires the following peer dependencies:
+
+```bash
+npm install @tanstack/react-table lucide-react class-variance-authority clsx tailwind-merge
+```
+
+## Quick Start
+
+```tsx
+import {
+  DataTable,
+  TableSchema,
+  TextColumn,
+  BadgeColumn,
+  DateColumn,
+} from "tablefy";
+
+type User = {
+  id: string;
+  name: string;
+  email: string;
+  status: "active" | "inactive";
+  createdAt: Date;
+};
+
+const columns = TableSchema.make<User>()
+  .columns(
+    TextColumn.make("name").label("Name").sortable(),
+
+    TextColumn.make("email").label("Email").limit(30),
+
+    BadgeColumn.make("status").label("Status").variants({
+      active: "success",
+      inactive: "secondary",
+    }),
+
+    DateColumn.make("createdAt").label("Created").relative(),
+  )
+  .build();
+
+function UsersTable({ users }: { users: User[] }) {
+  return (
+    <DataTable
+      columns={columns}
+      data={users}
+      config={{
+        search: { enabled: true },
+        pagination: { enabled: true },
+      }}
+    />
+  );
+}
+```
+
+## Column Types
+
+Tablefy provides 12+ specialized column types, each with their own builder methods:
+
+| Column Type         | Description          | Key Methods                                                               |
+| ------------------- | -------------------- | ------------------------------------------------------------------------- |
+| `TextColumn`        | Simple text display  | `sortable()`, `prefix()`, `suffix()`, `limit()`, `uppercase()`            |
+| `NumberColumn`      | Numbers & currency   | `money()`, `percent()`, `decimals()`, `locale()`                          |
+| `DateColumn`        | Dates & times        | `short()`, `long()`, `relative()`, `datetime()`, `withIcon()`             |
+| `BadgeColumn`       | Status badges        | `variants()`, `boolean()`, `status()`                                     |
+| `LinkColumn`        | Clickable links      | `href()`, `external()`, `underline()`, `openInNewTab()`                   |
+| `ProgressColumn`    | Progress bars        | `max()`, `colorByThreshold()`, `showPercentage()`, `format()`             |
+| `AvatarGroupColumn` | Avatar groups        | `maxVisible()`, `size()`, `overlap()`, `fields()`, `showNames()`          |
+| `IconColumn`        | Status icons         | `boolean()`, `priority()`, `onlineStatus()`, `verification()`, `states()` |
+| `ImageColumn`       | Single images        | `size()`, `rounded()`, `circular()`, `fallback()`                         |
+| `CheckboxColumn`    | Selection checkboxes | —                                                                         |
+| `ActionsColumn`     | Dropdown menus       | `view()`, `edit()`, `delete()`, `action()`, `link()`                      |
+
+## Example: Project Management Table
+
+```tsx
+import {
+  TableSchema,
+  CheckboxColumn,
+  TextColumn,
+  LinkColumn,
+  ProgressColumn,
+  AvatarGroupColumn,
+  IconColumn,
+  DateColumn,
+  ActionsColumn,
+} from "tablefy";
+
+type Project = {
+  id: string;
+  name: string;
+  url: string;
+  progress: number;
+  priority: "low" | "medium" | "high" | "critical";
+  status: "active" | "inactive";
+  isPublic: boolean;
+  team: Array<{ name: string; avatar?: string }>;
+  deadline: Date;
+};
+
+export const projectColumns = TableSchema.make<Project>()
+  .columns(
+    CheckboxColumn.make(),
+
+    LinkColumn.make("name")
+      .label("Project")
+      .sortable()
+      .href((row) => `/projects/${row.id}`)
+      .underline("hover"),
+
+    LinkColumn.make("url").label("Website").external().limit(30),
+
+    ProgressColumn.make("progress")
+      .label("Progress")
+      .sortable()
+      .colorByThreshold(30, 15)
+      .showPercentage(),
+
+    IconColumn.make("priority")
+      .label("Priority")
+      .sortable()
+      .priority()
+      .withBackground(),
+
+    IconColumn.make("status").label("Status").activeInactive(),
+
+    IconColumn.make("isPublic")
+      .label("Visibility")
+      .boolean({
+        trueLabel: "Public",
+        falseLabel: "Private",
+      })
+      .showLabel(),
+
+    AvatarGroupColumn.make("team")
+      .label("Team")
+      .maxVisible(3)
+      .size("sm")
+      .fields({ name: "name", src: "avatar" }),
+
+    DateColumn.make("deadline").label("Deadline").sortable().relative(),
+
+    ActionsColumn.make<Project>()
+      .view((row) => (window.location.href = `/projects/${row.id}`))
+      .edit((row) => console.log("Edit", row.id))
+      .delete((row) => console.log("Delete", row.id)),
+  )
+  .build();
+```
+
+## Documentation
+
+- [Installation Guide](./docs/INSTALLATION.md) - Detailed installation instructions
+- [Usage Guide](./docs/USAGE.md) - Complete API reference and examples
+- [Column Types](./docs/USAGE.md#column-types) - All column types and their methods
+
+## Advanced Features
+
+### Empty States
+
+```tsx
+import { EmptyStateBuilder } from "tablefy";
+
+const emptyState = EmptyStateBuilder.make()
+  .title("No projects found")
+  .description("Get started by creating your first project")
+  .action("Create Project", () => createProject())
+  .build();
+```
+
+### Search & Filters
+
+```tsx
+<DataTable
+  columns={columns}
+  data={data}
+  config={{
+    search: {
+      enabled: true,
+      placeholder: "Search projects...",
+      columns: ["name", "url"],
+    },
+    filters: [
+      {
+        id: "status",
+        label: "Status",
+        type: "select",
+        column: "status",
+        options: [
+          { label: "Active", value: "active" },
+          { label: "Inactive", value: "inactive" },
+        ],
+      },
+    ],
+  }}
+/>
+```
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT Tablefy Contributors
+
+## Acknowledgments
+
+Built with:
+
+- [TanStack Table](https://tanstack.com/table) - Headless table library
+- [shadcn/ui](https://ui.shadcn.com/) - Beautiful UI components
+- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework

package/dist/columns/actions-column.d.ts

@@ -0,0 +1,26 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+interface ActionItem<TData> {
+    label: string;
+    icon?: ReactNode;
+    onClick?: (row: TData) => void;
+    href?: (row: TData) => string;
+    variant?: 'default' | 'destructive';
+    separator?: boolean;
+    hidden?: (row: TData) => boolean;
+    disabled?: (row: TData) => boolean;
+}
+export declare class ActionsColumn<TData> {
+    private config;
+    static make<TData>(): ActionsColumn<TData>;
+    label(label: string): this;
+    triggerIcon(icon: ReactNode): this;
+    action(action: ActionItem<TData>): this;
+    view(onClick: (row: TData) => void): this;
+    edit(onClick: (row: TData) => void): this;
+    delete(onClick: (row: TData) => void): this;
+    link(label: string, href: (row: TData) => string): this;
+    separator(): this;
+    build(): ColumnDef<TData, unknown>;
+}
+export {};

package/dist/columns/avatar-group-column.d.ts

@@ -0,0 +1,38 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { BaseColumn } from "./base-column";
+import { BaseColumnConfig } from "./types";
+interface AvatarItem {
+    src?: string;
+    name: string;
+    fallback?: string;
+}
+interface AvatarGroupColumnConfig<TData> extends BaseColumnConfig<TData> {
+    maxVisible?: number;
+    size?: "xs" | "sm" | "md" | "lg";
+    overlap?: "none" | "sm" | "md" | "lg";
+    showTooltip?: boolean;
+    nameField?: keyof TData | ((row: TData) => AvatarItem[]);
+    srcField?: string;
+    fallbackField?: string;
+    showNames?: boolean;
+    maxNames?: number;
+}
+export declare class AvatarGroupColumn<TData> extends BaseColumn<TData, AvatarGroupColumnConfig<TData>> {
+    constructor(accessor: keyof TData | string);
+    static make<TData>(accessor: keyof TData | string): AvatarGroupColumn<TData>;
+    maxVisible(max: number): this;
+    size(size: "xs" | "sm" | "md" | "lg"): this;
+    overlap(overlap: "none" | "sm" | "md" | "lg"): this;
+    noOverlap(): this;
+    hideTooltip(): this;
+    fields(config: {
+        src?: string;
+        name: string;
+        fallback?: string;
+    }): this;
+    mapItems(fn: (row: TData) => AvatarItem[]): this;
+    showNames(show?: boolean, max?: number): this;
+    private toContactItems;
+    build(): ColumnDef<TData, unknown>;
+}
+export {};

package/dist/columns/badge-column.d.ts

@@ -0,0 +1,22 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { ReactNode } from "react";
+import { BaseColumn } from "./base-column";
+import { BadgeColumnConfig } from "./types";
+type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info" | "muted";
+interface VariantConfig {
+    label?: string;
+    variant?: BadgeVariant;
+    className?: string;
+    icon?: ReactNode;
+}
+export declare class BadgeColumn<TData> extends BaseColumn<TData, BadgeColumnConfig<TData>> {
+    static make<TData>(accessor: keyof TData | string): BadgeColumn<TData>;
+    variants(variants: Record<string, VariantConfig>): this;
+    boolean(trueLabel?: string, falseLabel?: string): this;
+    status(statuses: Record<string, {
+        label: string;
+        color: string;
+    }>): this;
+    build(): ColumnDef<TData, unknown>;
+}
+export {};

package/dist/columns/base-column.d.ts

@@ -0,0 +1,19 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { BaseColumnConfig } from './types';
+export declare abstract class BaseColumn<TData, TConfig extends BaseColumnConfig<TData>> {
+    protected config: TConfig;
+    constructor(accessor: keyof TData | string);
+    label(label: string): this;
+    sortable(sortable?: boolean): this;
+    searchable(searchable?: boolean): this;
+    hidden(hidden?: boolean): this;
+    alignLeft(): this;
+    alignCenter(): this;
+    alignRight(): this;
+    width(width: string | number): this;
+    className(className: string): this;
+    headerClassName(className: string): this;
+    cellClassName(className: string): this;
+    abstract build(): ColumnDef<TData, unknown>;
+    protected getAlignmentClass(): string;
+}

package/dist/columns/button-column.d.ts

@@ -0,0 +1,14 @@
+interface ButtonColumnConfig {
+    accessorKey?: string;
+    header?: string;
+    label?: string;
+    onClick?: (data: any) => void;
+}
+export declare const ButtonColumn: (config: ButtonColumnConfig) => {
+    accessorKey: string;
+    header: string;
+    cell: ({ row }: {
+        row: any;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export { ButtonColumn as buttonColumn };

package/dist/columns/checkbox-column.d.ts

@@ -0,0 +1,5 @@
+import { ColumnDef } from '@tanstack/react-table';
+export declare class CheckboxColumn<TData> {
+    static make<TData>(): CheckboxColumn<TData>;
+    build(): ColumnDef<TData, unknown>;
+}

package/dist/columns/date-column.d.ts

@@ -0,0 +1,24 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { BaseColumn } from './base-column';
+import { BaseColumnConfig } from './types';
+interface DateColumnConfig<TData> extends BaseColumnConfig<TData> {
+    format?: 'short' | 'long' | 'relative' | 'time' | 'datetime' | string;
+    locale?: string;
+    showIcon?: boolean;
+}
+export declare class DateColumn<TData> extends BaseColumn<TData, DateColumnConfig<TData>> {
+    constructor(accessor: keyof TData | string);
+    static make<TData>(accessor: keyof TData | string): DateColumn<TData>;
+    format(format: 'short' | 'long' | 'relative' | 'time' | 'datetime'): this;
+    locale(locale: string): this;
+    withIcon(show?: boolean): this;
+    short(): this;
+    long(): this;
+    relative(): this;
+    time(): this;
+    datetime(): this;
+    private formatDate;
+    private getRelativeTime;
+    build(): ColumnDef<TData, unknown>;
+}
+export {};

package/dist/columns/dropdown-column.d.ts

@@ -0,0 +1,17 @@
+interface DropdownOption {
+    label: string;
+    onClick?: (data: any) => void;
+}
+interface DropdownColumnConfig {
+    accessorKey?: string;
+    header?: string;
+    options: DropdownOption[];
+}
+export declare const DropdownColumn: (config: DropdownColumnConfig) => {
+    accessorKey: string;
+    header: string;
+    cell: ({ row }: {
+        row: any;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export { DropdownColumn as dropdownColumn };

package/dist/columns/icon-column.d.ts

@@ -0,0 +1,58 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+import { BaseColumn } from './base-column';
+import { BaseColumnConfig } from './types';
+interface IconState {
+    icon: ReactNode | LucideIcon;
+    label?: string;
+    color?: string;
+    bgColor?: string;
+    tooltip?: string;
+}
+interface IconColumnConfig<TData> extends BaseColumnConfig<TData> {
+    states?: Record<string, IconState>;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    showLabel?: boolean;
+    showTooltip?: boolean;
+    withBackground?: boolean;
+    defaultIcon?: ReactNode;
+    defaultLabel?: string;
+}
+export declare class IconColumn<TData> extends BaseColumn<TData, IconColumnConfig<TData>> {
+    constructor(accessor: keyof TData | string);
+    static make<TData>(accessor: keyof TData | string): IconColumn<TData>;
+    state(value: string, config: IconState): this;
+    states(states: Record<string, IconState>): this;
+    size(size: 'xs' | 'sm' | 'md' | 'lg'): this;
+    showLabel(show?: boolean): this;
+    hideTooltip(): this;
+    withBackground(show?: boolean): this;
+    default(icon: ReactNode, label?: string): this;
+    boolean(config?: {
+        trueIcon?: ReactNode;
+        falseIcon?: ReactNode;
+        trueLabel?: string;
+        falseLabel?: string;
+        trueColor?: string;
+        falseColor?: string;
+        trueBgColor?: string;
+        falseBgColor?: string;
+    }): this;
+    activeInactive(): this;
+    onlineStatus(): this;
+    priority(): this;
+    verification(): this;
+    private createCheckIcon;
+    private createXIcon;
+    private createCircleIcon;
+    private createArrowUpIcon;
+    private createArrowDownIcon;
+    private createMinusIcon;
+    private createAlertIcon;
+    private createShieldCheckIcon;
+    private createShieldXIcon;
+    private createClockIcon;
+    build(): ColumnDef<TData, unknown>;
+}
+export {};

package/dist/columns/image-column.d.ts

@@ -0,0 +1,21 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { BaseColumn } from './base-column';
+import { BaseColumnConfig } from './types';
+interface ImageColumnConfig<TData> extends BaseColumnConfig<TData> {
+    size?: 'sm' | 'md' | 'lg';
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    fallback?: string;
+    alt?: (row: TData) => string;
+}
+export declare class ImageColumn<TData> extends BaseColumn<TData, ImageColumnConfig<TData>> {
+    constructor(accessor: keyof TData | string);
+    static make<TData>(accessor: keyof TData | string): ImageColumn<TData>;
+    size(size: 'sm' | 'md' | 'lg'): this;
+    rounded(rounded: 'none' | 'sm' | 'md' | 'lg' | 'full'): this;
+    circular(): this;
+    square(): this;
+    fallback(url: string): this;
+    alt(fn: (row: TData) => string): this;
+    build(): ColumnDef<TData, unknown>;
+}
+export {};

package/dist/columns/index.d.ts

@@ -0,0 +1,13 @@
+export { TableSchema } from "../schema";
+export { ActionsColumn } from "./actions-column";
+export { AvatarGroupColumn } from "./avatar-group-column";
+export { BadgeColumn } from "./badge-column";
+export { CheckboxColumn } from "./checkbox-column";
+export { DateColumn } from "./date-column";
+export { IconColumn } from "./icon-column";
+export { ImageColumn } from "./image-column";
+export { LinkColumn } from "./link-column";
+export { NumberColumn } from "./number-column";
+export { ProgressColumn } from "./progress-column";
+export { TextColumn } from "./text-column";
+export type { ActionConfig, BadgeColumnConfig, BaseColumnConfig, FormattedColumnConfig, } from "./types";

package/dist/columns/input-column.d.ts

@@ -0,0 +1,14 @@
+interface InputColumnConfig {
+    accessorKey?: string;
+    header?: string;
+    placeholder?: string;
+    onChange?: (data: any, value: string) => void;
+}
+export declare const InputColumn: (config: InputColumnConfig) => {
+    accessorKey: string;
+    header: string;
+    cell: ({ row }: {
+        row: any;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export { InputColumn as inputColumn };

package/dist/columns/link-column.d.ts

@@ -0,0 +1,27 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+import { BaseColumn } from './base-column';
+import { BaseColumnConfig } from './types';
+interface LinkColumnConfig<TData> extends BaseColumnConfig<TData> {
+    href?: string | ((row: TData) => string);
+    external?: boolean;
+    icon?: ReactNode;
+    showExternalIcon?: boolean;
+    underline?: 'always' | 'hover' | 'never';
+    openInNewTab?: boolean;
+    onClick?: (row: TData) => void;
+}
+export declare class LinkColumn<TData> extends BaseColumn<TData, LinkColumnConfig<TData>> {
+    constructor(accessor: keyof TData | string);
+    static make<TData>(accessor: keyof TData | string): LinkColumn<TData>;
+    href(href: string | ((row: TData) => string)): this;
+    urlFromField(field: keyof TData): this;
+    external(external?: boolean): this;
+    icon(icon: ReactNode): this;
+    showExternalIcon(show?: boolean): this;
+    underline(style: 'always' | 'hover' | 'never'): this;
+    openInNewTab(open?: boolean): this;
+    onClick(handler: (row: TData) => void): this;
+    build(): ColumnDef<TData, unknown>;
+}
+export {};

package/dist/columns/number-column.d.ts

@@ -0,0 +1,23 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { BaseColumn } from './base-column';
+import { BaseColumnConfig } from './types';
+interface NumberColumnConfig<TData> extends BaseColumnConfig<TData> {
+    decimals?: number;
+    locale?: string;
+    currency?: string;
+    percent?: boolean;
+    prefix?: string;
+    suffix?: string;
+}
+export declare class NumberColumn<TData> extends BaseColumn<TData, NumberColumnConfig<TData>> {
+    constructor(accessor: keyof TData | string);
+    static make<TData>(accessor: keyof TData | string): NumberColumn<TData>;
+    decimals(decimals: number): this;
+    locale(locale: string): this;
+    money(currency?: string): this;
+    percent(): this;
+    prefix(prefix: string): this;
+    suffix(suffix: string): this;
+    build(): ColumnDef<TData, unknown>;
+}
+export {};

package/dist/columns/progress-column.d.ts

@@ -0,0 +1,30 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { BaseColumn } from './base-column';
+import { BaseColumnConfig } from './types';
+interface ProgressColumnConfig<TData> extends BaseColumnConfig<TData> {
+    max?: number;
+    showValue?: boolean;
+    showPercentage?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'default' | 'success' | 'warning' | 'danger' | ((value: number, max: number) => string);
+    thresholds?: {
+        warning?: number;
+        danger?: number;
+    };
+    format?: (value: number, max: number) => string;
+}
+export declare class ProgressColumn<TData> extends BaseColumn<TData, ProgressColumnConfig<TData>> {
+    constructor(accessor: keyof TData | string);
+    static make<TData>(accessor: keyof TData | string): ProgressColumn<TData>;
+    max(max: number): this;
+    showValue(show?: boolean): this;
+    showPercentage(show?: boolean): this;
+    hideLabel(): this;
+    size(size: 'sm' | 'md' | 'lg'): this;
+    color(color: 'default' | 'success' | 'warning' | 'danger'): this;
+    colorByThreshold(warning?: number, danger?: number): this;
+    colorByThresholdInverse(warning?: number, danger?: number): this;
+    format(fn: (value: number, max: number) => string): this;
+    build(): ColumnDef<TData, unknown>;
+}
+export {};

package/dist/columns/select-column.d.ts

@@ -0,0 +1,19 @@
+interface SelectOption {
+    label: string;
+    value: string;
+}
+interface SelectColumnConfig {
+    accessorKey?: string;
+    header?: string;
+    placeholder?: string;
+    options: SelectOption[];
+    onChange?: (data: any, value: string) => void;
+}
+export declare const SelectColumn: (config: SelectColumnConfig) => {
+    accessorKey: string;
+    header: string;
+    cell: ({ row }: {
+        row: any;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export { SelectColumn as selectColumn };

package/dist/columns/text-column.d.ts

@@ -0,0 +1,14 @@
+import { ColumnDef, Row } from '@tanstack/react-table';
+import { BaseColumn } from './base-column';
+import { FormattedColumnConfig } from './types';
+export declare class TextColumn<TData> extends BaseColumn<TData, FormattedColumnConfig<TData>> {
+    static make<TData>(accessor: keyof TData | string): TextColumn<TData>;
+    formatter(fn: (value: unknown, row: Row<TData>) => React.ReactNode): this;
+    prefix(prefix: string): this;
+    suffix(suffix: string): this;
+    placeholder(placeholder: string): this;
+    uppercase(): this;
+    lowercase(): this;
+    limit(chars: number): this;
+    build(): ColumnDef<TData, unknown>;
+}