Lily Design System™

Kanban Table Row

KanbanTableRow is a headless component that renders a <tr> element within a kanban board table. It represents a single row containing kanban items across status columns.

Use this component within KanbanTableHead, KanbanTableBody, or KanbanTableFoot to define rows of kanban board items.

Example

Task 1
Show demo markup 
<tr class="kanban-table-row"><td class="kanban-table-td">Task 1</td></tr>
Usage example 
<script lang="ts">
    import KanbanTableRow from "./KanbanTableRow.svelte";
    import KanbanTableTD from "../KanbanTableTD/KanbanTableTD.svelte";
</script>

<KanbanTableRow>
    <KanbanTableTD>Task A</KanbanTableTD>
    <KanbanTableTD>Task B</KanbanTableTD>
    <KanbanTableTD>Task C</KanbanTableTD>
</KanbanTableRow>
Show Svelte source 
// In your Svelte component:
import KanbanTableRow from "lily-design-system-svelte-headless/components/KanbanTableRow/KanbanTableRow.svelte";

<KanbanTableRow>
  <!-- KanbanTableRow content -->
</KanbanTableRow>

Usage

Row of kanban items across status columns:

<KanbanTableBody>
    <KanbanTableRow>
        <KanbanTableTD label="Fix login bug">Fix login bug</KanbanTableTD>
        <KanbanTableTD label="Add dashboard">Add dashboard</KanbanTableTD>
        <KanbanTableTD label="Setup CI/CD">Setup CI/CD</KanbanTableTD>
    </KanbanTableRow>
</KanbanTableBody>

Props

  • className: string (default: "") -- CSS class name for the row
  • children: slot (required) -- row cells, typically KanbanTableTD components
  • ...restProps: unknown -- additional attributes spread onto the <tr> element

Keyboard Interactions

Standard table row keyboard interactions.

ARIA

No additional ARIA attributes. Row semantics are provided by the <tr> element.

When to Use

  • Use inside KanbanTableHead, KanbanTableBody, or KanbanTableFoot to define a row of kanban items.
  • Use to group KanbanTableTD cells that represent items across status columns.
  • Use for each horizontal row of content in the kanban board.

When Not to Use

  • Do not use outside of a KanbanTable context -- use TableRow or DataTableRow for general tables.
  • Do not use for column headings directly -- place heading content inside KanbanTableTD within the row.

Headless

This headless component renders a <tr> element. The consumer provides all visual styling.

Styles

The consumer provides all CSS styling. The component renders with a .kanban-table-row class for targeting.

Testing

  • Verify the component renders a <tr> element
  • Verify children content is rendered
  • Verify pass-through attributes are applied

Advice

  • Designers: Use visual separators between rows for clarity. Consider hover states for interactive rows.
  • Developers: Place KanbanTableRow within KanbanTableHead, KanbanTableBody, or KanbanTableFoot.

Implementation Notes

  • Renders a <tr> element for table row semantics
  • Accepts className for CSS class targeting
  • Spreads restProps onto the <tr> element for consumer customization

Composition

KanbanTableRow is a child of KanbanTableHead/KanbanTableBody/KanbanTableFoot, following the Table pattern: KanbanTable > KanbanTableHead/KanbanTableBody/KanbanTableFoot > KanbanTableRow > KanbanTableTD.

Related components

  • kanban-table — a kanban board table interactive grid for organizing items by status <table>
  • kanban-table-body — a kanban board table interactive grid tbody for organizing items by status <tbody>
  • kanban-table-foot — a kanban board table interactive grid tfoot for organizing items by status <tfoot>
  • kanban-table-head — a kanban board table interactive grid thead for organizing items by status <thead>
  • kanban-table-td — kanban board table interactive grid data cell for organizing items by status <td>
  • kanban-table-th — a kanban board table interactive grid header cell for organizing items by status <th>
  • table — a table with rows and columns <table>

References

  • MDN tr element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: kanban-table-row
  • PascalCase: KanbanTableRow
  • Description: a kanban board table interactive grid row for organizing items by status <tr>
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <tr>
  • CSS class: .kanban-table-row
  • Interactive: no

ARIA

  • Native <tr> semantics announce the row position within the kanban table
  • Screen readers expose the <tr> row as part of the surrounding <table> grid

Keyboard

Standard table row keyboard interactions.

Props

  • className: string (default: "") -- CSS class name for the row
  • children: slot (required) -- row cells, typically KanbanTableTD components
  • ...restProps: unknown -- additional attributes spread onto the <tr> element