Lattice Grid Buy a licence

demo D270

A board (kanban) view in React

The same rows as cards in status columns: drag or move by keyboard, points per column, a work-in-progress limit, lanes, sprints and a pop-out child grid

createKanban

This shows the same rows as cards in status columns, moved by drag or by keyboard, with points per column, a work-in-progress limit, lanes, sprints and a pop-out child grid. It turns a backlog into a board people can work, without keeping a separate copy of the data.

Building…
Loading a live grid…

This is the React version. The grid mounts through the createLatticeGrid adapter, which takes its configuration as ordinary props and hands back the live grid through a ref. The grid below is the same one every other tab runs.

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/lattice-grid.min.css">

<div id="app"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createLatticeReact } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/modules/react.esm.min.js';
  import { createKanban } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/modules/kanban.esm.min.js';

  const { LatticeKanban } = createLatticeReact({ React, createKanban });

  const columns = [
    { id: 'backlog', title: 'Backlog' },
    { id: 'todo', title: 'To do' },
    { id: 'doing', title: 'In progress', wipLimit: 2, color: '#f0a020' },
    { id: 'review', title: 'In review' },
    { id: 'done', title: 'Done', color: '#2e7d32' },
  ];

  const rows = [/* tasks: id, status, points, sprint, epic, assignee, title, tags */];

  function App() {
    // "In progress" carries a wipLimit, so the board marks it over on the
    // fourth card with no extra wiring; onCardMove ('card:move' as a React
    // prop) is where a move arrives. Refusing an over-limit drop outright
    // takes the live instance (onReady) and its column(id) lookup - see the
    // vanilla tab for that veto.
    return (
      <LatticeKanban
        rowKey="id"
        rows={rows}
        columnProperty="status"
        columns={columns}
        pointsProperty="points"
        showPoints
        orderProperty="order"
        swimlaneProperty="assignee"
        sprintProperty="sprint"
        epicProperty="epic"
        card={{ title: { field: 'title', edit: true }, subtitle: 'assignee', labels: 'tags', badges: 'epic' }}
        style={{ height: '520px' }}
      />
    );
  }

  createRoot(document.getElementById('app')).render(<App />);
</script>

The same rows your team already tracks, laid out as a board

A backlog is a table until someone needs to see the work moving. This board shows the very same rows as cards, grouped into the columns your status field already uses, so a plan reads as lanes of cards a person can pick up and move. Drag a card from one column to the next, or reorder it within a column, and the move is written straight back to the row underneath. Prefer the keyboard? Focus a card, grab it, choose where it lands with the arrows, and drop it, with every move read aloud for a screen reader.

Each column carries its own count and, where you track effort, the sum of its points, so a glance tells you how loaded a stage is. Set a work-in-progress limit on a column and the board turns away a move that would push it over, so a rule you agreed as a team is one the board keeps. Columns you name are always shown, even when empty, and a status that falls outside your set gets its own column rather than being dropped, so nothing goes missing.

Switch to lanes to split the same board by owner, filter to one sprint or the backlog, or search across every card. Open a card and its subtasks pop out as a full working grid you can sort and edit in place, so an epic opens into its stories without leaving the board. Because the board reads changes the same way a grid does, one live feed can drive it beside a grid and a chart at once, and a card can appear, move or update under you without losing your place.

How do I show my data as a kanban board?

Load the board module and call createKanban(element, config). Name the field that decides the columns with columnProperty, list the columns you want in columns (each with a title and an optional work-in-progress limit), and map the card face with card. Point pointsProperty at your effort field for the per-column sum, name swimlaneProperty, sprintProperty and epicProperty to unlock lanes, sprints and epics, and hand children a loader and a grid factory to let a card pop its subtasks out. The board writes a move back through the same edit path your grid uses, so it fits the schema you already have.

Related demos