Mixins / foldkit-mixins-ui

Table

namespace · packages/mixins-ui/src/table.ts:1

export * as Table from './table.js'

In the guides

Members

Table.TABLE_HOVER

const · packages/mixins-ui/src/table.ts:57

const TABLE_HOVER: 'table-hover'

The name of the rows' highlight: its place is --fk-table-hover-x, -y, -w, -h.

Table.TableColumn

interface · packages/mixins-ui/src/table.ts:28

interface TableColumn<Row> {
  readonly header: string
  readonly numeric?: boolean | undefined
  readonly value: (row: Row) => string
}

One column: its heading, and each row's value for it.

Table.TableSlots

const · packages/mixins-ui/src/table.ts:14

const TableSlots: Slots.Contract<{ readonly frame: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly highlight: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly caption: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly head: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly headerRow: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Inte …;

A data table publishes its regions as slots; it owns no state, messages, or bundles. Sorting, selection, and paging stay where the data lives (see foldkit-data-grid); this is the plain table underneath them. Drawn with fluid, it stands in a frame with one highlight behind the rows, which follows the pointer to the nearest one: a highlight cannot be a child of a tbody, so it is the frame's.

Table.TableView

interface · packages/mixins-ui/src/table.ts:40

interface TableView<Row, Message = never> {
  readonly columns: ReadonlyArray<TableColumn<Row>>
  readonly rows: ReadonlyArray<Row>
  readonly caption?: string | undefined
  readonly style?: NamedStyle<typeof TableSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
  readonly fluid?: boolean | undefined
}

A plain table in one call: columns with per-row values, the rows, an optional caption, a style for its slots, and mixins beside the style. No upstream component stands behind it.

Table.view

function · packages/mixins-ui/src/table.ts:72

function view<Row, Message = never>(
  options: TableView<Row, Message>,
  h: HtmlBuilder<Message>,
): Html