@c2n/table 0.0.7

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@c2n/table",
+  "version": "0.0.7",
+  "type": "module",
+  "main": "dist/table.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/table.d.ts",
+      "default": "./dist/table.js"
+    },
+    "./table-column.js": {
+      "types": "./types/src/table-column.d.ts",
+      "default": "./dist/table-column.js"
+    },
+    "./table-types.js": {
+      "types": "./types/src/table-types.d.ts",
+      "default": "./dist/table-types.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "table",
+    "data grid",
+    "virtual scroll",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build",
+        "../checkbox:build",
+        "../spinner:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/checkbox": "0.0.7",
+    "@c2n/core": "0.0.7",
+    "@c2n/spinner": "0.0.7",
+    "@lit/context": "1.1.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
+}

package/react.d.ts

@@ -0,0 +1,26 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/table. Import once, anywhere in the program:
+//
+//     import '@c2n/table/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Table } from '@c2n/table'
+import type { TableColumn } from '@c2n/table/table-column.js'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-table': C2Props<Table>
+      'c2-table-column': C2Props<TableColumn>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/table-column.d.ts

@@ -0,0 +1,72 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { ColumnAlign, ColumnFormat, ColumnPin, TableCellRenderer, TableColumnConfig, TableHeaderRenderer } from './table-types.js';
+/** Fired at the parent table whenever a column definition changes. */
+export declare const COLUMN_CHANGE_EVENT = "c2-table-column-change";
+/**
+ * One column of a `c2-table`, declared as a light-DOM child. The element renders nothing: it is a definition the
+ * table reads, the same way `c2-select` reads its `c2-list-item` children. Everything it exposes as an attribute can
+ * also be set as a property, and the function-valued properties (`renderCell`, `renderHeader`, `comparator`) are
+ * property-only.
+ *
+ * ```html
+ * <c2-table rows='[{ "name": "Ada", "score": 12 }]'>
+ *   <c2-table-column field="name" header="Name" width="2fr" sortable pinned="start"></c2-table-column>
+ *   <c2-table-column field="score" header="Score" width="120px" align="end" format="number" sortable></c2-table-column>
+ * </c2-table>
+ * ```
+ *
+ * @tag c2-table-column
+ */
+export declare class TableColumn extends LitElement implements TableColumnConfig {
+    #private;
+    static styles: import("lit").CSSResult;
+    /** Key of the value in the row object; may be a dotted path such as `user.name`. */
+    field: string;
+    /** Header label. Falls back to the field name. */
+    header?: string;
+    /** Grid track for the column: `1fr`, `160px`, `minmax(120px, 1fr)`… */
+    width: string;
+    /** Lower bound in pixels while the column is resized. */
+    minWidth: number;
+    /** Horizontal alignment of the header and the cells. */
+    align: ColumnAlign;
+    /** Lets the user sort by this column. Defaults to the table's `sortable`. */
+    sortable?: boolean;
+    /** Lets the user drag the column's trailing edge. Defaults to the table's `resizable`. */
+    resizable?: boolean;
+    /** Freezes the column against the leading or trailing edge while scrolling horizontally. */
+    pinned?: ColumnPin;
+    /** Leaves the column out of the table without removing the definition. */
+    hidden: boolean;
+    /** Built-in `Intl` formatting applied when no `renderCell` is set. */
+    format: ColumnFormat;
+    /** Options handed to the `Intl` formatter of `format`, as JSON in the attribute. */
+    formatOptions?: Record<string, unknown>;
+    /** Currency code used by `format="currency"`. */
+    currency?: string;
+    /** BCP 47 locale used by `format`. Defaults to the browser locale. */
+    locale?: string;
+    /** Class set on every cell of this column, so light-DOM CSS can target it through `::part(cell)`. */
+    cellClass?: string;
+    /**
+     * Renders each cell from a light-DOM child of the table rather than from `renderCell`: the cell holds a
+     * `<slot name="cell:<row key>:<field>">`, so a framework can build the body with its own template language.
+     * Requires the table's `row-key`.
+     */
+    cellSlot: boolean;
+    /** Renders the cell body. Property only. */
+    renderCell?: TableCellRenderer;
+    /** Renders the header body. Property only. */
+    renderHeader?: TableHeaderRenderer;
+    /** Client-side sort comparator for this column's values. Property only. */
+    comparator?: (a: unknown, b: unknown) => number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(_changed: PropertyValues): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-table-column': TableColumn;
+    }
+}
+//# sourceMappingURL=table-column.d.ts.map

package/types/src/table-column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-column.d.ts","sourceRoot":"","sources":["../../src/table-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAKhE,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEvI,sEAAsE;AACtE,eAAO,MAAM,mBAAmB,2BAA2B,CAAA;AAE3D;;;;;;;;;;;;;;GAcG;AACH,qBACa,WAAY,SAAQ,UAAW,YAAW,iBAAiB;;IACtE,OAAgB,MAAM,0BAAoB;IAE1C,oFAAoF;IACxD,KAAK,SAAK;IAEtC,kDAAkD;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IAE3C,uEAAuE;IAC3C,KAAK,SAAQ;IAEzC,yDAAyD;IACL,QAAQ,SAAK;IAEjE,wDAAwD;IAC5B,KAAK,EAAE,WAAW,CAAU;IAExD,6EAA6E;IACwB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAEvH,0FAA0F;IACW,SAAS,CAAC,EAAE,OAAO,CAAA;IAExH,4FAA4F;IAChE,MAAM,CAAC,EAAE,SAAS,CAAA;IAE9C,0EAA0E;IACrB,MAAM,UAAQ;IAEnE,sEAAsE;IAC1C,MAAM,EAAE,YAAY,CAAS;IAEzD,oFAAoF;IACP,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAEpH,iDAAiD;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IAE7C,sEAAsE;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAA;IAE3C,qGAAqG;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAEvE;;;;OAIG;IACkD,QAAQ,UAAQ;IAErE,4CAA4C;IACZ,UAAU,CAAC,EAAE,iBAAiB,CAAA;IAE9D,8CAA8C;IACd,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAElE,2EAA2E;IAC3C,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,KAAK,MAAM,CAAA;IAEtE,iBAAiB;IAKjB,oBAAoB;cAKV,OAAO,CAAC,QAAQ,EAAE,cAAc;CAOpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF"}

package/types/src/table-types.d.ts

@@ -0,0 +1,112 @@
+export type { SortDirection } from '@c2n/core/data-helper.js';
+import type { SortDirection } from '@c2n/core/data-helper.js';
+export interface SortModel {
+    field: string;
+    direction: SortDirection;
+}
+export type ColumnAlign = 'start' | 'center' | 'end';
+export type ColumnPin = 'start' | 'end';
+export type ColumnFormat = 'text' | 'number' | 'percent' | 'currency' | 'date' | 'datetime' | 'time';
+/** A row is any plain object; values are read by `field`, which may be a dotted path (`user.name`). */
+export type TableRow = Record<string, unknown>;
+export interface TableCellContext {
+    value: unknown;
+    row: TableRow;
+    rowIndex: number;
+    column: TableColumnConfig;
+}
+export interface TableHeaderContext {
+    column: TableColumnConfig;
+}
+/** Returns anything Lit can render: a `TemplateResult`, a string, a number, a node. */
+export type TableCellRenderer = (context: TableCellContext) => unknown;
+export type TableHeaderRenderer = (context: TableHeaderContext) => unknown;
+export interface TableColumnConfig {
+    /** Key of the value in the row object; may be a dotted path. */
+    field: string;
+    /** Header label. Defaults to the field. */
+    header?: string;
+    /** Grid track for the column: `1fr`, `160px`, `minmax(120px, 1fr)`… Defaults to `1fr`. */
+    width?: string;
+    /** Lower bound in pixels while resizing. Defaults to 64. */
+    minWidth?: number;
+    align?: ColumnAlign;
+    sortable?: boolean;
+    resizable?: boolean;
+    /** Freezes the column against the left (`start`) or right (`end`) edge while scrolling horizontally. */
+    pinned?: ColumnPin;
+    hidden?: boolean;
+    /** Built-in `Intl` formatting applied when no `renderCell` is given. */
+    format?: ColumnFormat;
+    /** Options passed to the `Intl` formatter of `format`. */
+    formatOptions?: Record<string, unknown>;
+    /** Currency code for `format="currency"`. Defaults to `USD`. */
+    currency?: string;
+    /** BCP 47 locale for `format`. Defaults to the browser locale. */
+    locale?: string;
+    /** Class set on every cell of the column, for `::part(cell)`-free styling from the light DOM. */
+    cellClass?: string;
+    /**
+     * Renders each cell of the column from a light-DOM child instead of a function, so a framework can build the
+     * body with its own template language. The table puts a `<slot name="cell:<row key>:<field>">` in the cell;
+     * `renderCell` (or the formatted value) stays as the fallback while nothing is slotted into it.
+     *
+     * Requires `rowKey`. Only the rows the virtualizer has rendered have a slot, so children for the rest simply
+     * wait — write one child per row and let the table pick.
+     */
+    cellSlot?: boolean;
+    renderCell?: TableCellRenderer;
+    renderHeader?: TableHeaderRenderer;
+    /** Client-side sort comparator for the column's values. */
+    comparator?: (a: unknown, b: unknown) => number;
+}
+export interface TableRowsRequest {
+    /** Index of the first row requested. */
+    start: number;
+    /** Number of rows requested. */
+    count: number;
+    /** Sort the server should apply, in priority order. */
+    sort: SortModel[];
+}
+export interface TableRowsResult {
+    rows: TableRow[];
+    /** Total number of rows on the server. Required on the first response so the scrollbar can be sized. */
+    total?: number;
+}
+/**
+ * Lazy row source: the table asks for one block of rows at a time as they scroll into view, instead of holding the
+ * whole dataset in `rows`. Sorting is delegated to the source.
+ */
+export interface TableDataSource {
+    getRows(request: TableRowsRequest): Promise<TableRowsResult>;
+}
+export interface TableSelectionChangeEventDetail {
+    /** Keys of the selected rows (`row-key` field, or the row index when no `row-key` is set). */
+    value: string[];
+    /** The selected rows themselves; only the loaded ones when a `dataSource` is used. */
+    rows: TableRow[];
+}
+export interface TableSortChangeEventDetail {
+    sort: SortModel[];
+}
+export interface TableRowEventDetail {
+    row: TableRow;
+    rowIndex: number;
+    key: string;
+}
+export interface TableCellEventDetail extends TableRowEventDetail {
+    column: TableColumnConfig;
+    value: unknown;
+}
+export interface TableColumnResizeEventDetail {
+    field: string;
+    width: number;
+}
+/** Reads a possibly dotted `field` path out of a row. Re-exported from `@c2n/core` so the table keeps its own subpath. */
+export { getFieldValue } from '@c2n/core/data-helper.js';
+/** `name:asc;age:desc` ⇄ `SortModel[]`, so the sort can be set from markup. */
+export declare const sortModelConverter: {
+    toAttribute: (value: SortModel[]) => string | null;
+    fromAttribute: (value: string | null) => SortModel[];
+};
+//# sourceMappingURL=table-types.d.ts.map

package/types/src/table-types.d.ts.map

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

package/types/src/table.d.ts

@@ -0,0 +1,272 @@
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+import { type SortModel, type TableCellEventDetail, type TableColumnConfig, type TableColumnResizeEventDetail, type TableDataSource, type TableRow, type TableRowEventDetail, type TableSelectionChangeEventDetail, type TableSortChangeEventDetail } from './table-types.js';
+import '@c2n/checkbox';
+import '@c2n/spinner';
+export type TableSelectionMode = 'none' | 'single' | 'multiple';
+export type TableVirtualMode = 'auto' | 'always' | 'never';
+export interface TablePageChangeEventDetail {
+    /** The page now shown, 1-based. */
+    page: number;
+    /** The page shown before. */
+    previousPage: number;
+    /** Rows per page. */
+    pageSize: number;
+    /** Total number of pages. */
+    pageCount: number;
+    /** Index of the first row of the page, and how many were asked for — the `getRows` request that follows. */
+    start: number;
+    count: number;
+    /** Total rows the data source reports. */
+    totalRows: number;
+}
+/** Events fired by {@link Table}, keyed for `addEventListener`. */
+export interface TableEventMap {
+    'selection-change': CustomEvent<TableSelectionChangeEventDetail>;
+    'sort-change': CustomEvent<TableSortChangeEventDetail>;
+    'row-click': CustomEvent<TableRowEventDetail>;
+    'cell-click': CustomEvent<TableCellEventDetail>;
+    'column-resize': CustomEvent<TableColumnResizeEventDetail>;
+    'page-change': CustomEvent<TablePageChangeEventDetail>;
+}
+export interface Table {
+    addEventListener: TypedAddEventListener<Table, TableEventMap>;
+    removeEventListener: TypedRemoveEventListener<Table, TableEventMap>;
+}
+/**
+ * A data grid: a scrolling, virtualized table built from a `rows` array (or an async `dataSource`) and a set of
+ * `c2-table-column` definitions given as light-DOM children. Sorting, row selection, column pinning, column resizing
+ * and keyboard navigation are built in; every cell can be rendered by a function, so a cell body can be any markup —
+ * including other c2 components.
+ *
+ * Rows and columns are readable from markup as JSON attributes as well as from script as properties, so a table can be
+ * authored without a build step:
+ *
+ * ```html
+ * <c2-table row-key="id" selection="multiple" checkbox-selection sortable stripe style="height: 320px">
+ *   <c2-table-column field="name" header="Name" width="2fr" pinned="start"></c2-table-column>
+ *   <c2-table-column field="score" header="Score" width="120px" align="end" format="number"></c2-table-column>
+ * </c2-table>
+ * ```
+ *
+ * **Layout.** The table is one CSS grid: the header row and every body row are grid items using `grid-template-columns:
+ * subgrid`, so columns stay aligned without any scroll syncing, and pinned columns are `position: sticky` cells rather
+ * than separate containers. Give the host a height (or `--c2-table--max-height`) — the body scrolls inside it.
+ *
+ * **Styling one column.** Every cell carries two parts named after its column — `cell-<field>` on the cell box and
+ * `cell-content-<field>` on the text inside it — so a single column can be given its own colour, alignment or pill
+ * shape from outside: `::part(cell-content-status) { border-radius: 999px; background: #f4f4f5 }`. Rows are
+ * `::part(row)` and `::part(row-selected)`.
+ *
+ * **Virtualization** windows the rows to the visible range plus an overscan margin. It needs a uniform row height, which
+ * it measures from the first rendered row, so theme the height with `--c2-table__row--height` (`row-height` is only the
+ * estimate used for the first paint). It turns on automatically past `virtual-threshold` rows; `virtual="always"` and
+ * `virtual="never"` force it.
+ *
+ * @tag c2-table
+ *
+ * @slot default - The column definitions: `c2-table-column` elements. They render nothing themselves.
+ * @slot toolbar - Bar above the header, for a title, filters or a column menu. Hidden when empty.
+ * @slot footer - Bar below the rows, for a row count or a `c2-pagination`. Hidden when empty.
+ * @slot empty - Replaces the built-in "no rows" message.
+ * @slot loading - Replaces the built-in spinner shown while the first rows load.
+ * @slot error - Replaces the built-in message shown when `error` is set.
+ * @slot cell:{rowKey}:{field} - Body of one cell of a column marked `cell-slot`, e.g. `slot="cell:AAPL:change"`. Lets a framework render a cell with its own template language instead of a `renderCell` function; the column's `renderCell` or formatted value stays as the fallback.
+ *
+ * @slotcomponent c2-table-column
+ * @slotcomponent c2-pagination
+ *
+ * @event {CustomEvent<TableSelectionChangeEventDetail>} selection-change - Fired after the user changes the selection. `detail.value` is the array of selected row keys, `detail.rows` the matching rows. Does not bubble: several components fire `selection-change`, so a listener belongs on the element itself rather than on an ancestor.
+ * @event {CustomEvent<TableSortChangeEventDetail>} sort-change - Fired after the user clicks a sortable header. `detail.sort` is the new sort model, in priority order.
+ * @event {CustomEvent<TableRowEventDetail>} row-click - Fired when a row is clicked, before the selection is applied.
+ * @event {CustomEvent<TableCellEventDetail>} cell-click - Fired when a cell is clicked; adds `detail.column` and `detail.value`.
+ * @event {CustomEvent<TableColumnResizeEventDetail>} column-resize - Fired when the user releases a column's resize handle.
+ * @event {CustomEvent<TablePageChangeEventDetail>} page-change - Fired after the shown page changes, while `paginated`. `detail.start` and `detail.count` are the slice of the whole dataset now shown — with a `dataSource`, the `getRows` request that follows. A pager slotted in the footer does not fire its own: the table speaks for it.
+ *
+ * @cssproperty {color} [--c2-table--background=#ffffff]
+ * @cssproperty {color} [--c2-table--color=#18181b]
+ * @cssproperty {font-size} [--c2-table--font-size=14px]
+ * @cssproperty {pixel} [--c2-table--max-height=none] - Caps the height when the host is not sized itself; the body scrolls.
+ *
+ * @cssproperty {border} [--c2-table--border-top=1px solid #e4e4e7]
+ * @cssproperty {border} [--c2-table--border-right=1px solid #e4e4e7]
+ * @cssproperty {border} [--c2-table--border-bottom=1px solid #e4e4e7]
+ * @cssproperty {border} [--c2-table--border-left=1px solid #e4e4e7]
+ *
+ * @cssproperty {border-radius} [--c2-table--border-top-left-radius=8px]
+ * @cssproperty {border-radius} [--c2-table--border-top-right-radius=8px]
+ * @cssproperty {border-radius} [--c2-table--border-bottom-left-radius=8px]
+ * @cssproperty {border-radius} [--c2-table--border-bottom-right-radius=8px]
+ *
+ * @cssproperty {box-shadow} [--c2-table--box-shadow=none]
+ *
+ * @cssproperty {color} [--c2-table__header--background=#fafafa]
+ * @cssproperty {color} [--c2-table__header--color=#71717a]
+ * @cssproperty {pixel} [--c2-table__header--height=36px]
+ * @cssproperty {font-size} [--c2-table__header--font-size=12px]
+ * @cssproperty {font-weight} [--c2-table__header--font-weight=600]
+ * @cssproperty {letter-spacing} [--c2-table__header--letter-spacing=0.02em]
+ * @cssproperty {border} [--c2-table__header--border-bottom=1px solid #e4e4e7]
+ *
+ * @cssproperty {padding} [--c2-table__header-cell--padding=0 12px]
+ * @cssproperty {pixel} [--c2-table__header-cell--gap=6px]
+ * @cssproperty {color} [--c2-table__header-cell__hover--background=#f4f4f5]
+ * @cssproperty {color} [--c2-table__header-cell__sorted--color=#18181b]
+ *
+ * @cssproperty {pixel} [--c2-table__sort-icon--width=14px]
+ * @cssproperty {pixel} [--c2-table__sort-icon--height=14px]
+ * @cssproperty {color} [--c2-table__sort-icon--color=#a1a1aa]
+ * @cssproperty {color} [--c2-table__sort-icon__active--color=rgb(2, 101, 220)]
+ *
+ * @cssproperty {pixel} [--c2-table__resizer--width=9px] - Width of the grab area, not of the visible line.
+ * @cssproperty {pixel} [--c2-table__resizer--height=56%] - Height of the resting divider, as a share of the header.
+ * @cssproperty {pixel} [--c2-table__resizer--line-width=1px]
+ * @cssproperty {color} [--c2-table__resizer--color=#e4e4e7] - The divider drawn at a resizable column's edge.
+ * @cssproperty {pixel} [--c2-table__resizer__hover--height=100%]
+ * @cssproperty {pixel} [--c2-table__resizer__hover--line-width=2px]
+ * @cssproperty {color} [--c2-table__resizer__hover--color=rgb(2, 101, 220)]
+ *
+ * @cssproperty {pixel} [--c2-table__row--height=36px] - Row height; virtualization measures it, so keep it uniform.
+ * @cssproperty {border} [--c2-table__row--border-bottom=1px solid #e4e4e7]
+ * @cssproperty {color} [--c2-table__row__hover--background=#fafafa]
+ * @cssproperty {color} [--c2-table__row__odd--background=#fafafa] - Applies with the `stripe` attribute.
+ * @cssproperty {color} [--c2-table__row__selected--background=#edf1fe]
+ * @cssproperty {color} [--c2-table__row__selected--color=#18181b]
+ *
+ * @cssproperty {padding} [--c2-table__cell--padding=0 12px]
+ * @cssproperty {pixel} [--c2-table__cell--gap=8px]
+ * @cssproperty {font-size} [--c2-table__cell--font-size=14px]
+ * @cssproperty {color} [--c2-table__cell--color=#18181b]
+ * @cssproperty {border} [--c2-table__cell--border-right=none] - Vertical grid lines; applies to header cells too.
+ * @cssproperty {outline} [--c2-table__cell__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-table__cell__focus--outline-offset=-2px]
+ *
+ * @cssproperty {box-shadow} [--c2-table__pinned-start--box-shadow=1px 0 0 0 #e4e4e7] - Separator on the last column pinned to the start.
+ * @cssproperty {box-shadow} [--c2-table__pinned-end--box-shadow=-1px 0 0 0 #e4e4e7] - Separator on the first column pinned to the end.
+ *
+ * @cssproperty {pixel} [--c2-table__selection-cell--width=44px] - Width of the `checkbox-selection` column.
+ *
+ * @cssproperty {color} [--c2-table__skeleton--background=#f4f4f5] - Placeholder shown in cells whose `dataSource` block is still loading.
+ * @cssproperty {border-radius} [--c2-table__skeleton--border-radius=4px]
+ *
+ * @cssproperty {color} [--c2-table__state--color=#71717a] - Colour of the empty and loading messages.
+ * @cssproperty {padding} [--c2-table__state--padding=32px 12px]
+ * @cssproperty {font-size} [--c2-table__state--font-size=14px]
+ * @cssproperty {color} [--c2-table__state__error--color=rgb(211, 21, 16)]
+ *
+ * @cssproperty {color} [--c2-table__toolbar--background=transparent]
+ * @cssproperty {padding} [--c2-table__toolbar--padding=8px 12px]
+ * @cssproperty {border} [--c2-table__toolbar--border-bottom=1px solid #e4e4e7]
+ *
+ * @cssproperty {color} [--c2-table__footer--background=transparent]
+ * @cssproperty {padding} [--c2-table__footer--padding=8px 12px]
+ * @cssproperty {border} [--c2-table__footer--border-top=1px solid #e4e4e7]
+ */
+export declare class Table extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    private viewport;
+    /** The rows to display. An array in the property, JSON in the attribute. */
+    rows: TableRow[];
+    /** Column definitions, as an alternative to `c2-table-column` children. Children win when both are present. */
+    columns?: TableColumnConfig[];
+    /** Field used as the identity of a row, for selection and DOM reuse. Falls back to the row index. */
+    rowKey: string;
+    /** `single` selects one row at a time, `multiple` supports ⌘/ctrl-click and shift-click ranges. */
+    selection: TableSelectionMode;
+    /** Adds a leading checkbox column, pinned to the start. */
+    checkboxSelection: boolean;
+    /** Keys of the selected rows: an array in the property, `;`-separated in the attribute. */
+    value: string[];
+    /** The sort, in priority order: `SortModel[]` in the property, `field:asc;other:desc` in the `sort` attribute. */
+    sortModel: SortModel[];
+    /** Lets shift-click add a column to the sort instead of replacing it. */
+    multiSort: boolean;
+    /** Makes every column sortable; a column's own `sortable` still wins. */
+    sortable: boolean;
+    /** Makes every column resizable; a column's own `resizable` still wins. */
+    resizable: boolean;
+    /** Tints odd rows with `--c2-table__row__odd--background`. */
+    stripe: boolean;
+    /** `auto` virtualizes past `virtual-threshold` rows; `always` and `never` force it. */
+    virtual: TableVirtualMode;
+    /** Row height in pixels used before the first row has been measured. */
+    rowHeight: number;
+    /** Rows rendered above and below the viewport while virtualizing. */
+    overscan: number;
+    /** Row count past which `virtual="auto"` starts windowing. */
+    virtualThreshold: number;
+    /** Lazy row source used instead of `rows`; the table requests one block at a time as rows scroll into view. */
+    dataSource?: TableDataSource;
+    /** Number of rows the table asks a `dataSource` for at a time. */
+    blockSize: number;
+    /** Shows the loading state; implied while a `dataSource` resolves its first block. */
+    loading: boolean;
+    /** Shows the error state with this message. */
+    error: string;
+    /** Message shown when there are no rows. */
+    emptyMessage: string;
+    /** The page on show, 1-based. Only meaningful while the table is `paginated`; clamped to `pageCount`. */
+    page: number;
+    /**
+     * Rows per page. `0` leaves paging off; a `c2-pagination` slotted into the `footer` sets it from its own
+     * `page-size` when the table has none, which is what makes the nested form work with no configuration.
+     * With `rows` the page is sliced in place; with a `dataSource` each page is one request.
+     */
+    pageSize: number;
+    private columnElements;
+    private widthOverrides;
+    private focusedCell;
+    private hasToolbar;
+    private hasFooter;
+    private remoteTotal;
+    /**
+     * Shared with a `c2-pagination` slotted into the `footer`. Rebuilt rather than mutated whenever the paging state
+     * moves: `@lit/context` consumers only re-render on a new object identity.
+     */
+    private pager;
+    /** Total number of rows the table knows about: `rows.length`, or the `dataSource` total. */
+    get totalRows(): number;
+    /**
+     * Number of rows on screen right now: the whole dataset, or one page of it while `paginated`. This is what the
+     * virtualizer windows and what `virtual="auto"` measures, so a 25-row page is never virtualized against a
+     * million-row total.
+     */
+    get rowCount(): number;
+    /**
+     * Whether the table is paging its rows. `rows` are sliced in place; a `dataSource` is asked for one page per
+     * request. Either way `page-size` is the switch, and a pager slotted into the `footer` sets it.
+     */
+    get paginated(): boolean;
+    /** Number of pages, at least 1. */
+    get pageCount(): number;
+    /** Whether the rows are currently windowed. */
+    get isVirtualized(): boolean;
+    /** The resolved, ordered, visible columns — children first, then the `columns` property, then one per key of the first row. */
+    get resolvedColumns(): TableColumnConfig[];
+    /** The rows currently selected. Only the loaded ones when a `dataSource` is used. */
+    getSelectedRows(): TableRow[];
+    /** Selects every loaded row. No-op unless `selection="multiple"`. */
+    selectAll(): void;
+    /** Clears the selection. */
+    clearSelection(): void;
+    /** Scrolls the row at `index` into view. */
+    scrollToIndex(index: number): void;
+    /** Drops the `dataSource` cache and reloads the visible rows. */
+    refresh(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    /** Shows `page`, clamped to the available range, and loads it. Fires `page-change` when the page actually moves. */
+    goToPage(page: number): void;
+    /** Changes the rows per page, keeping the first row of the current page on screen. */
+    setPageSize(pageSize: number): void;
+    protected updated(changed: PropertyValues): void;
+    render(): TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-table': Table;
+    }
+}
+//# sourceMappingURL=table.d.ts.map

package/types/src/table.d.ts.map

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

package/vue.d.ts

@@ -0,0 +1,57 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/table. Import once, anywhere in the program:
+//
+//     import '@c2n/table/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Table, TableEventMap } from '@c2n/table'
+import type { TableColumn, TableColumnEventMap } from '@c2n/table/table-column.js'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-table': DefineComponent<
+      C2Props<Table> & {
+        'row-key'?: unknown
+        'checkbox-selection'?: unknown
+        sort?: unknown
+        'multi-sort'?: unknown
+        'row-height'?: unknown
+        'virtual-threshold'?: unknown
+        'block-size'?: unknown
+        'empty-message'?: unknown
+        'page-size'?: unknown
+        onPageChange?: (event: TableEventMap['page-change']) => void
+        onSortChange?: (event: TableEventMap['sort-change']) => void
+        onRowClick?: (event: TableEventMap['row-click']) => void
+        onCellClick?: (event: TableEventMap['cell-click']) => void
+        onSelectionChange?: (event: TableEventMap['selection-change']) => void
+        onColumnResize?: (event: TableEventMap['column-resize']) => void
+      }
+    >
+    'c2-table-column': DefineComponent<
+      C2Props<TableColumn> & {
+        'min-width'?: unknown
+        'format-options'?: unknown
+        'cell-class'?: unknown
+        'cell-slot'?: unknown
+        onCOLUMN_CHANGE_EVENT?: (event: TableColumnEventMap['COLUMN_CHANGE_EVENT']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}