@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/data-table/cells.d.ts

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react';
+import type { IconName } from '../icon/icon';
+import { type AvatarProps } from '../data-display/avatar';
+export interface CellSwitchProps {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    /** Accessible name, e.g. "Enable Lead intake". Required: the cell has no visible label. */
+    label: string;
+    disabled?: boolean;
+}
+/** An on/off toggle that applies immediately (enable an automation, a member, a kiosk). */
+export declare function CellSwitch({ checked, onCheckedChange, label, disabled }: CellSwitchProps): import("react").JSX.Element;
+export interface CellAction {
+    icon: IconName;
+    /** Accessible name and tooltip ("Edit", "Run now", "History", "Delete"). */
+    label: string;
+    onClick: () => void;
+    tone?: 'default' | 'danger';
+    disabled?: boolean;
+}
+/** A row of icon buttons for 1–4 frequent actions. More than that: use a DropdownMenu in `rowActions`. */
+export declare function CellActions({ actions, className }: {
+    actions: CellAction[];
+    className?: string;
+}): import("react").JSX.Element;
+export interface CellStackProps {
+    title: ReactNode;
+    /** Next to the title (a Badge). */
+    badge?: ReactNode;
+    /** Small line under the title (category, owner). */
+    meta?: ReactNode;
+    /** Longer text, clamped to two lines. */
+    description?: ReactNode;
+    /** A leading color dot or icon tile (see `CellLead`). */
+    lead?: ReactNode;
+}
+/** Multi-line cell: title + badge, a meta line and a two-line description (projects, automations). */
+export declare function CellStack({ title, badge, meta, description, lead }: CellStackProps): import("react").JSX.Element;
+export interface CellLeadProps {
+    /** A colour dot (any CSS color, usually `var(--kf-category-N)`). */
+    color?: string;
+    /** An icon tile instead of a dot; tinted with `color` when given. */
+    icon?: IconName;
+    children?: ReactNode;
+}
+/** A colour dot or an icon tile before the first cell's text, with the text beside it. */
+export declare function CellLead({ color, icon, children }: CellLeadProps): import("react").JSX.Element;
+/** Monospace value (ids, keys, codes, cron expressions). */
+export declare function CellMono({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface EntityCellProps {
+    /** Primary line (a person's or a company's name). Also the avatar's initials and accessible name. */
+    name: string;
+    /** Secondary line (email, role, location). */
+    secondary?: ReactNode;
+    /** Photo URL; initials when missing. Pass `avatar={false}` to hide the avatar. */
+    src?: string;
+    avatar?: boolean;
+    /** Presence or a custom status dot (see `Avatar`). */
+    status?: AvatarProps['status'];
+    statusColor?: string;
+    statusLabel?: string;
+    /** Makes the name a link (to the record's page). */
+    href?: string;
+}
+/** Two-line cell for people and companies: avatar, name and a secondary line (staff, clients, members). */
+export declare function EntityCell({ name, secondary, src, avatar, status, statusColor, statusLabel, href, }: EntityCellProps): import("react").JSX.Element;
+/** Stacked tags in a cell; after `max`, a "+N" with the rest in its title. */
+export declare function CellTags({ tags, max }: {
+    tags: string[];
+    max?: number;
+}): import("react").JSX.Element;
+export interface CellNumberProps {
+    value: number | null | undefined;
+    /** `Intl.NumberFormat` options (currency, percent, decimals). */
+    format?: Intl.NumberFormatOptions;
+    /** BCP 47 locale (default `en-US`); pass the page's locale. */
+    locale?: string;
+    /** Shows + / − and colors gains and losses (deltas, balances). */
+    signed?: boolean;
+    /** For `signed`: a lower value is better (costs, errors). */
+    invert?: boolean;
+}
+/** A right-aligned number with tabular figures, locale formatting and optional sign coloring. Use with `align: 'end'`. */
+export declare function CellNumber({ value, format, locale, signed, invert }: CellNumberProps): import("react").JSX.Element;

package/dist/data-table/cells.js

@@ -0,0 +1,163 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { IconButton as t } from "../button/button.js";
+import { Avatar as n } from "../data-display/avatar.js";
+import { focusRing as r, switchThumb as i, switchTrack as a } from "../lib/control-styles.js";
+import { IconTile as o } from "../icon/icon-tile.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import * as l from "@radix-ui/react-switch";
+//#region src/data-table/cells.tsx
+var u = (e) => e.stopPropagation();
+function d({ checked: t, onCheckedChange: n, label: o, disabled: c }) {
+	return /* @__PURE__ */ s("span", {
+		onClick: u,
+		className: "inline-flex align-middle",
+		children: /* @__PURE__ */ s(l.Root, {
+			checked: t,
+			onCheckedChange: n,
+			disabled: c,
+			"aria-label": o,
+			className: e(a("sm"), r),
+			children: /* @__PURE__ */ s(l.Thumb, { className: i("sm") })
+		})
+	});
+}
+function f({ actions: n, className: r }) {
+	return /* @__PURE__ */ s("span", {
+		onClick: u,
+		className: e("inline-flex items-center justify-end gap-0.5", r),
+		children: n.map((e) => /* @__PURE__ */ s(t, {
+			icon: e.icon,
+			label: e.label,
+			size: "sm",
+			variant: e.tone === "danger" ? "danger" : "ghost",
+			disabled: e.disabled,
+			onClick: e.onClick
+		}, e.label))
+	});
+}
+function p({ title: e, badge: t, meta: n, description: r, lead: i }) {
+	return /* @__PURE__ */ c("span", {
+		className: "flex min-w-0 items-start gap-3",
+		children: [i, /* @__PURE__ */ c("span", {
+			className: "grid min-w-0 gap-0.5",
+			children: [
+				/* @__PURE__ */ c("span", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [/* @__PURE__ */ s("span", {
+						className: "font-semibold text-fg",
+						children: e
+					}), t]
+				}),
+				n && /* @__PURE__ */ s("span", {
+					className: "text-xs text-fg-muted",
+					children: n
+				}),
+				r && /* @__PURE__ */ s("span", {
+					className: "line-clamp-2 max-w-[48ch] text-sm text-fg-muted",
+					children: r
+				})
+			]
+		})]
+	});
+}
+function m({ color: t, icon: n, children: r }) {
+	let i = n ? /* @__PURE__ */ s(o, {
+		icon: n,
+		size: "sm",
+		tone: "muted",
+		color: t,
+		colorStyle: "soft"
+	}) : /* @__PURE__ */ s("span", {
+		"aria-hidden": "true",
+		className: "mt-1.5 size-2.5 shrink-0 rounded-full",
+		style: { background: t ?? "var(--kf-fg-muted)" }
+	});
+	return r === void 0 ? i : /* @__PURE__ */ c("span", {
+		className: e("flex min-w-0 gap-2.5", n ? "items-center" : "items-start"),
+		children: [i, /* @__PURE__ */ s("span", {
+			className: "min-w-0",
+			children: r
+		})]
+	});
+}
+function h({ children: e }) {
+	return /* @__PURE__ */ s("span", {
+		className: "font-mono text-[13px] text-fg",
+		children: e
+	});
+}
+function g({ name: e, secondary: t, src: r, avatar: i = !0, status: a, statusColor: o, statusLabel: l, href: d }) {
+	return /* @__PURE__ */ c("span", {
+		className: "flex min-w-0 items-center gap-2.5",
+		children: [i && /* @__PURE__ */ s(n, {
+			name: e,
+			src: r,
+			size: "sm",
+			status: a,
+			statusColor: o,
+			statusLabel: l,
+			decorative: !0
+		}), /* @__PURE__ */ c("span", {
+			className: "grid min-w-0",
+			children: [
+				d ? /* @__PURE__ */ s("a", {
+					href: d,
+					onClick: u,
+					className: "truncate font-medium text-fg no-underline hover:text-link hover:underline focus-visible:rounded-xs focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus",
+					children: e
+				}) : /* @__PURE__ */ s("span", {
+					className: "truncate font-medium text-fg",
+					children: e
+				}),
+				t && /* @__PURE__ */ s("span", {
+					className: "truncate text-xs text-fg-muted",
+					children: t
+				}),
+				l && /* @__PURE__ */ s("span", {
+					className: "sr-only",
+					children: l
+				})
+			]
+		})]
+	});
+}
+function _({ tags: e, max: t = 3 }) {
+	let n = e.slice(0, t), r = e.slice(t);
+	return /* @__PURE__ */ c("span", {
+		className: "flex max-w-64 flex-wrap gap-1",
+		children: [n.map((e) => /* @__PURE__ */ s("span", {
+			className: "rounded-full bg-surface-muted px-2 py-0.5 text-xs font-semibold text-fg",
+			children: e
+		}, e)), r.length > 0 && /* @__PURE__ */ c("span", {
+			title: r.join(", "),
+			className: "rounded-full px-1.5 py-0.5 text-xs font-semibold text-fg-muted",
+			children: [
+				"+",
+				r.length,
+				/* @__PURE__ */ c("span", {
+					className: "sr-only",
+					children: [": ", r.join(", ")]
+				})
+			]
+		})]
+	});
+}
+function v({ value: t, format: n, locale: r, signed: i, invert: a }) {
+	if (t == null || Number.isNaN(t)) return /* @__PURE__ */ s("span", {
+		className: "text-fg-muted",
+		children: "—"
+	});
+	let o = new Intl.NumberFormat(r ?? "en-US", {
+		...n,
+		...i ? { signDisplay: "exceptZero" } : {}
+	}).format(t);
+	return /* @__PURE__ */ s("span", {
+		className: e("tabular-nums", i && t !== 0 && ((a ? t < 0 : t > 0) ? "text-success-fg" : "text-danger-fg")),
+		children: o.replace(/^-/, "−")
+	});
+}
+//#endregion
+export { f as CellActions, m as CellLead, h as CellMono, v as CellNumber, p as CellStack, d as CellSwitch, _ as CellTags, g as EntityCell };
+
+//# sourceMappingURL=cells.js.map

package/dist/data-table/cells.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cells.js","names":["RadixSwitch","stop","CellSwitch","label","cx","switchTrack","focusRing","switchThumb","CellActions","className","actions","IconButton","a","CellStack","lead","title","badge","meta","description","CellLead","mark","icon","IconTile","color","children","CellMono","EntityCell","avatar","Avatar","href","name","secondary","statusLabel","CellTags","shown","tags","max","rest","t","CellNumber","value","text","locale","format","signed","invert"],"sources":["../../src/data-table/cells.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixSwitch from '@radix-ui/react-switch';\nimport type { ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { focusRing, switchThumb, switchTrack } from '../lib/control-styles';\nimport { IconTile } from '../icon/icon-tile';\nimport type { IconName } from '../icon/icon';\nimport { IconButton } from '../button/button';\nimport { Avatar, type AvatarProps } from '../data-display/avatar';\n\n/*\n * Cell helpers for DataTable columns (`cell: (row) => …`). Interactive cells stop click propagation,\n * so a table with `onRowClick` does not open the row when a switch or an action is used.\n */\n\nconst stop = (e: { stopPropagation: () => void }) => e.stopPropagation();\n\nexport interface CellSwitchProps {\n  checked: boolean;\n  onCheckedChange: (checked: boolean) => void;\n  /** Accessible name, e.g. \"Enable Lead intake\". Required: the cell has no visible label. */\n  label: string;\n  disabled?: boolean;\n}\n\n/** An on/off toggle that applies immediately (enable an automation, a member, a kiosk). */\nexport function CellSwitch({ checked, onCheckedChange, label, disabled }: CellSwitchProps) {\n  return (\n    <span onClick={stop} className=\"inline-flex align-middle\">\n      <RadixSwitch.Root\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        disabled={disabled}\n        aria-label={label}\n        className={cx(switchTrack('sm'), focusRing)}\n      >\n        <RadixSwitch.Thumb className={switchThumb('sm')} />\n      </RadixSwitch.Root>\n    </span>\n  );\n}\n\nexport interface CellAction {\n  icon: IconName;\n  /** Accessible name and tooltip (\"Edit\", \"Run now\", \"History\", \"Delete\"). */\n  label: string;\n  onClick: () => void;\n  tone?: 'default' | 'danger';\n  disabled?: boolean;\n}\n\n/** A row of icon buttons for 1–4 frequent actions. More than that: use a DropdownMenu in `rowActions`. */\nexport function CellActions({ actions, className }: { actions: CellAction[]; className?: string }) {\n  return (\n    <span onClick={stop} className={cx('inline-flex items-center justify-end gap-0.5', className)}>\n      {actions.map((a) => (\n        <IconButton\n          key={a.label}\n          icon={a.icon}\n          label={a.label}\n          size=\"sm\"\n          variant={a.tone === 'danger' ? 'danger' : 'ghost'}\n          disabled={a.disabled}\n          onClick={a.onClick}\n        />\n      ))}\n    </span>\n  );\n}\n\nexport interface CellStackProps {\n  title: ReactNode;\n  /** Next to the title (a Badge). */\n  badge?: ReactNode;\n  /** Small line under the title (category, owner). */\n  meta?: ReactNode;\n  /** Longer text, clamped to two lines. */\n  description?: ReactNode;\n  /** A leading color dot or icon tile (see `CellLead`). */\n  lead?: ReactNode;\n}\n\n/** Multi-line cell: title + badge, a meta line and a two-line description (projects, automations). */\nexport function CellStack({ title, badge, meta, description, lead }: CellStackProps) {\n  return (\n    <span className=\"flex min-w-0 items-start gap-3\">\n      {lead}\n      <span className=\"grid min-w-0 gap-0.5\">\n        <span className=\"flex flex-wrap items-center gap-2\">\n          <span className=\"font-semibold text-fg\">{title}</span>\n          {badge}\n        </span>\n        {meta && <span className=\"text-xs text-fg-muted\">{meta}</span>}\n        {description && <span className=\"line-clamp-2 max-w-[48ch] text-sm text-fg-muted\">{description}</span>}\n      </span>\n    </span>\n  );\n}\n\nexport interface CellLeadProps {\n  /** A colour dot (any CSS color, usually `var(--kf-category-N)`). */\n  color?: string;\n  /** An icon tile instead of a dot; tinted with `color` when given. */\n  icon?: IconName;\n  children?: ReactNode;\n}\n\n/** A colour dot or an icon tile before the first cell's text, with the text beside it. */\nexport function CellLead({ color, icon, children }: CellLeadProps) {\n  const mark = icon ? (\n    <IconTile icon={icon} size=\"sm\" tone=\"muted\" color={color} colorStyle=\"soft\" />\n  ) : (\n    <span\n      aria-hidden=\"true\"\n      className=\"mt-1.5 size-2.5 shrink-0 rounded-full\"\n      style={{ background: color ?? 'var(--kf-fg-muted)' }}\n    />\n  );\n  if (children === undefined) return mark;\n  return (\n    <span className={cx('flex min-w-0 gap-2.5', icon ? 'items-center' : 'items-start')}>\n      {mark}\n      <span className=\"min-w-0\">{children}</span>\n    </span>\n  );\n}\n\n/** Monospace value (ids, keys, codes, cron expressions). */\nexport function CellMono({ children }: { children: ReactNode }) {\n  return <span className=\"font-mono text-[13px] text-fg\">{children}</span>;\n}\n\nexport interface EntityCellProps {\n  /** Primary line (a person's or a company's name). Also the avatar's initials and accessible name. */\n  name: string;\n  /** Secondary line (email, role, location). */\n  secondary?: ReactNode;\n  /** Photo URL; initials when missing. Pass `avatar={false}` to hide the avatar. */\n  src?: string;\n  avatar?: boolean;\n  /** Presence or a custom status dot (see `Avatar`). */\n  status?: AvatarProps['status'];\n  statusColor?: string;\n  statusLabel?: string;\n  /** Makes the name a link (to the record's page). */\n  href?: string;\n}\n\n/** Two-line cell for people and companies: avatar, name and a secondary line (staff, clients, members). */\nexport function EntityCell({\n  name,\n  secondary,\n  src,\n  avatar = true,\n  status,\n  statusColor,\n  statusLabel,\n  href,\n}: EntityCellProps) {\n  return (\n    <span className=\"flex min-w-0 items-center gap-2.5\">\n      {avatar && (\n        // Decorative: the name is the text beside it (the status label is kept for screen readers below).\n        <Avatar name={name} src={src} size=\"sm\" status={status} statusColor={statusColor} statusLabel={statusLabel} decorative />\n      )}\n      <span className=\"grid min-w-0\">\n        {href ? (\n          <a\n            href={href}\n            onClick={stop}\n            className=\"truncate font-medium text-fg no-underline hover:text-link hover:underline focus-visible:rounded-xs focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus\"\n          >\n            {name}\n          </a>\n        ) : (\n          <span className=\"truncate font-medium text-fg\">{name}</span>\n        )}\n        {secondary && <span className=\"truncate text-xs text-fg-muted\">{secondary}</span>}\n        {statusLabel && <span className=\"sr-only\">{statusLabel}</span>}\n      </span>\n    </span>\n  );\n}\n\n/** Stacked tags in a cell; after `max`, a \"+N\" with the rest in its title. */\nexport function CellTags({ tags, max = 3 }: { tags: string[]; max?: number }) {\n  const shown = tags.slice(0, max);\n  const rest = tags.slice(max);\n  return (\n    <span className=\"flex max-w-64 flex-wrap gap-1\">\n      {shown.map((t) => (\n        <span key={t} className=\"rounded-full bg-surface-muted px-2 py-0.5 text-xs font-semibold text-fg\">\n          {t}\n        </span>\n      ))}\n      {rest.length > 0 && (\n        <span title={rest.join(', ')} className=\"rounded-full px-1.5 py-0.5 text-xs font-semibold text-fg-muted\">\n          +{rest.length}\n          <span className=\"sr-only\">: {rest.join(', ')}</span>\n        </span>\n      )}\n    </span>\n  );\n}\n\nexport interface CellNumberProps {\n  value: number | null | undefined;\n  /** `Intl.NumberFormat` options (currency, percent, decimals). */\n  format?: Intl.NumberFormatOptions;\n  /** BCP 47 locale (default `en-US`); pass the page's locale. */\n  locale?: string;\n  /** Shows + / − and colors gains and losses (deltas, balances). */\n  signed?: boolean;\n  /** For `signed`: a lower value is better (costs, errors). */\n  invert?: boolean;\n}\n\n/** A right-aligned number with tabular figures, locale formatting and optional sign coloring. Use with `align: 'end'`. */\nexport function CellNumber({ value, format, locale, signed, invert }: CellNumberProps) {\n  if (value === null || value === undefined || Number.isNaN(value)) return <span className=\"text-fg-muted\">—</span>;\n  // A fixed default locale: `undefined` would format differently on the server and in the browser (hydration).\n  const text = new Intl.NumberFormat(locale ?? 'en-US', { ...format, ...(signed ? { signDisplay: 'exceptZero' } : {}) }).format(value);\n  const good = invert ? value < 0 : value > 0;\n  return (\n    <span className={cx('tabular-nums', signed && value !== 0 && (good ? 'text-success-fg' : 'text-danger-fg'))}>\n      {/* A real minus sign reads better than a hyphen. */}\n      {text.replace(/^-/, '−')}\n    </span>\n  );\n}\n\n"],"mappings":"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"}

package/dist/data-table/data-table.d.ts

@@ -0,0 +1,112 @@
+import { type ReactNode } from 'react';
+export interface DataTableColumn<T> {
+    id: string;
+    header: string;
+    /** Value used for sorting, search and CSV. Omit for display-only columns. */
+    accessor?: (row: T) => string | number | Date | null | undefined;
+    /** Custom cell rendering. Defaults to the accessor value. */
+    cell?: (row: T) => ReactNode;
+    /** Default: true when there is an accessor. */
+    sortable?: boolean;
+    /** Include in the global search. Default: true for string/number accessors. */
+    searchable?: boolean;
+    align?: 'start' | 'end' | 'center';
+    /** CSS width, e.g. `12rem` or `30%`. */
+    width?: string;
+    /** Default: true. */
+    hideable?: boolean;
+    defaultHidden?: boolean;
+    /** Role in the mobile card: `title` (one column), `meta` (small line under it), `field` (label: value), `hidden`. Default `field`. */
+    mobile?: 'title' | 'meta' | 'field' | 'hidden';
+}
+export interface DataTableProps<T> {
+    data: T[];
+    columns: DataTableColumn<T>[];
+    /** Stable id per row (database id). */
+    getRowId: (row: T) => string;
+    /** Accessible name; also shown above the table when `showCaption` is set. */
+    caption: string;
+    showCaption?: boolean;
+    /** Global search box. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Row checkboxes + bulk actions bar. */
+    selectable?: boolean;
+    /** Actions for the selected rows, e.g. "Archive", "Export". `clear` deselects all. */
+    bulkActions?: (rows: T[], clear: () => void) => ReactNode;
+    /** Per-row actions at the end of each row (usually a DropdownMenu, or `CellActions`). */
+    rowActions?: (row: T) => ReactNode;
+    /**
+     * Expandable rows: a chevron button opens a full-width panel under the row with this content
+     * (sub-items, details). Not available with `virtualize`.
+     */
+    renderExpanded?: (row: T) => ReactNode;
+    /**
+     * How a row is named in the expand button and the row checkbox ("Show details for Invoice intake"). Default: the
+     * first column's value, then the row id.
+     */
+    getRowLabel?: (row: T) => string;
+    onRowClick?: (row: T) => void;
+    /** Extra toolbar content (filters). */
+    toolbar?: ReactNode;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    /** Render only visible rows (TanStack Virtual); disables pagination. For 500+ rows. */
+    virtualize?: boolean;
+    /** Height of the scroll area when virtualized. */
+    maxHeight?: string;
+    loading?: boolean;
+    error?: string;
+    onRetry?: () => void;
+    empty?: ReactNode;
+    /** Shows "Export CSV" in the toolbar; file name without extension. */
+    exportFileName?: string;
+    defaultDensity?: 'comfortable' | 'compact';
+    /** Below 960px: stacked `cards` (default) or horizontal `scroll` with the first column sticky. */
+    mobileLayout?: 'cards' | 'scroll';
+    /** `muted` (default): tinted header row. `brand`: header row in the brand color, uppercase labels (dashboards). */
+    headerAppearance?: 'muted' | 'brand';
+    /** Shows the number of matching rows in the toolbar ("24 results"). */
+    showCount?: boolean;
+    /** Footer pager: numbered `pages` (default) or `compact` ("Page 1 of 4" with arrows). */
+    pagination?: 'pages' | 'compact';
+    labels?: Partial<typeof LABELS>;
+    className?: string;
+}
+declare const LABELS: {
+    search: string;
+    view: string;
+    columns: string;
+    density: string;
+    comfortable: string;
+    compact: string;
+    export: string;
+    selectAll: string;
+    selectRow: string;
+    /** `{count}` replaced. */
+    selected: string;
+    clear: string;
+    rowsPerPage: string;
+    /** `{from}`, `{to}`, `{total}` replaced. */
+    range: string;
+    actions: string;
+    emptyTitle: string;
+    noResultsTitle: string;
+    /** `{query}` replaced. */
+    noResultsDescription: string;
+    sortAscending: string;
+    sortDescending: string;
+    /** `{count}` replaced. */
+    results: string;
+    /** `{row}` replaced with the row id. */
+    expand: string;
+    collapse: string;
+    details: string;
+};
+/**
+ * Data table for product back-offices: global search, sorting, pagination, row selection with
+ * bulk actions, column visibility, density, CSV export, loading/empty/error states, stacked
+ * cards on mobile and virtualization for large datasets. Built on TanStack Table v9.
+ */
+export declare function DataTable<T extends object>({ data, columns, getRowId, caption, showCaption, searchable, searchPlaceholder, selectable, bulkActions, rowActions, renderExpanded, getRowLabel, onRowClick, toolbar, pageSize, pageSizeOptions, virtualize, maxHeight, loading, error, onRetry, empty, exportFileName, defaultDensity, mobileLayout, headerAppearance, pagination, showCount, labels: overrides, className, }: DataTableProps<T>): import("react").JSX.Element;
+export {};