The list shows one line per record: the selection checkbox, a title, the properties you choose and the row actions. It uses the same records, query, selection and actions as the table, and opening a line behaves like clicking a table row.

Try the list

Choose React or Vue: each tab runs its framework. Each line shows the project name, then its status, category, budget and start date. Open View settings › Card settings to change the title and properties, show labels or wrap titles, or switch Display mode to Table to compare. Below 768px, mobileMaxProperties keeps two properties. The preview uses the store-opening projects shared by every view guide; see the example setup for project-config.ts and the in-memory host.

Expand ↗

Sample data. Changes stay in this preview.

list-view.ts

import { defineTableConfig } from "@/components/ui/yayaw-table";
import { projectConfig } from "./project-config";

export const exampleConfig = defineTableConfig({
  ...projectConfig,
  table: {
    ...projectConfig.table,
    displayModes: ["list", "table"],
    defaultDisplayMode: "list",
    list: {
      titleColumn: "name",
      cardColumnIds: ["status", "category", "budget", "start"],
      showCardLabels: false,
      mobileMaxProperties: 2,
    },
  },
});

Expand ↗

Sample data. Changes stay in this preview.

list-view.ts

import { defineTableConfig } from "@/components/ui/yayaw-table-vue";
import { projectConfig } from "./project-config";

export const exampleConfig = defineTableConfig({
  ...projectConfig,
  table: {
    ...projectConfig.table,
    displayModes: ["list", "table"],
    defaultDisplayMode: "list",
    list: {
      titleColumn: "name",
      cardColumnIds: ["status", "category", "budget", "start"],
      showCardLabels: false,
      mobileMaxProperties: 2,
    },
  },
});

Configuration

Add "list" to displayModes and describe the line with table.list. The configuration is identical in React and Vue.

list-config.ts

export const listConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "list", "kanban"],
    list: {
      titleColumn: "name",
      cardColumnIds: ["status", "price"],
      showCardLabels: false,
    },
  },
});

Option	Default	Description
`titleColumn`	First data column	Column shown as the line title.
`cardColumnIds`	Every other data column	Properties shown after the title, in this order.
`showCardLabels`	`false`	Show each property's column name before its value.
`wrap`	`false`	Let the title wrap onto several lines instead of truncating it.
`showActions`	`true`	Show the row actions menu at the end of each line.
`propertyAlign`	`"end"`	`"start"` places the properties right after the title.
`maxProperties`	All	Properties shown at most.
`mobileMaxProperties`	All	Properties shown at most below 768px; the lower limit wins.

Line settings

Open View → Card settings to choose the title and the visible properties, show labels, wrap titles, place properties, limit them (also separately on mobile), or hide row actions. Choices are saved with views and in the <tableId>-list URL key; Reset returns to table.list.

Grouping

The list follows the table's first grouping level. Each section is headed "Column: value" with its number of records, records without a value appear under "No value", and the grouped column is left out of the properties. Like Gallery and Kanban, the list shows the current page.

Reorder lines

When the view is sorted by Manual order (see sorting), drag a line by its ⋮⋮ handle with the mouse, a finger or a pen, or focus it and press Alt+↑ / Alt+↓. Lines move within their group. The new position shows at once and is saved through actions.reorder; if saving fails, the error is shown and the server order comes back.

Density

The list follows the table density (View → Density, XS to 2XL): lines use the same heights and padding as table rows, and the choice is saved with the view.

List