Cards

Two built-in displays draw one card per row instead of a grid row: the kanban board (the kanban option) and the cards grid (offered by listing { id: "cards" } in displays, beside { id: "table" } to keep the grid). Both draw the same card, configured once with the table view's card option. Left out, a card shows the row's label (labelKey) with its first few listable columns, in the cards grid and on the board alike (the board leaves out the column it groups on, which a card's place already tells).

The playground's Rows ordered by hand page uses the built-in cards display with a custom card.component. Each roadmap card keeps its move handle and actions.

The separate Cards (Custom Display) page replaces the whole display through registerTableViewDisplay. Switching between its cards and grid preserves the Task search and the 15 matching records. This is different from replacing only the card content.

Usage

static tasks = TableView(taskDataAPI, {
  labelKey: "name",
  kanban: { groupByField: "status" },
  displays: [{ id: "table" }, { id: "cards" }],
  card: { fields: ["priority", "assignee"] },
});

To draw the whole card yourself, name a frontend component instead:

static roadmap = TableView(roadmapFeatureDataAPI, {
  labelKey: "name",
  displays: [{ id: "table" }, { id: "cards" }],
  card: { component: CustomComponent("FeatureRecordCard") },
});

Options

A card component

The component receives the same props in both displays (TableViewCardProps), so one card serves the board and the grid:

A card can draw itself with DmsRecordCard, the v2 record card — icon well, mono title and subtitle, badge, description, tags, a mono note and footer buttons that act without opening the card (see UI toolkit):

<script setup lang="ts">
interface FeatureRow {
  name: string;
  owner: string;
  area: string;
}

interface Props {
  row: FeatureRow;
  selected: boolean;
  actions: { canEditRow: (row: FeatureRow) => boolean; edit: (row: FeatureRow) => void };
  open: () => void;
}

const props = defineProps<Props>();

const cardActions = computed(() =>
  props.actions.canEditRow(props.row)
    ? [{ label: "Edit", icon: "i-ph-pencil-simple", onClick: () => props.actions.edit(props.row) }]
    : [],
);
</script>

<template>
  <DmsRecordCard
    icon="i-ph-sparkle"
    :title="props.row.name"
    :subtitle="props.row.owner"
    :tags="[props.row.area]"
    :actions="cardActions"
    :selected="props.selected"
    interactive
    @open="props.open()"
  />
</template>

Kanban aliases

The kanban takes no card options of its own: card draws its cards.