the board view
A board view of the data you already have.
A backlog is a table until someone needs to watch the work move. The board shows the same rows as cards, grouped into the columns your status field already uses, so a plan reads as lanes a person can pick up and move. Drag a card, or move it from the keyboard, and the change is written straight back to the row underneath.
not a second copy of your data
The board is a view, not another store.
A board bolted on beside a grid usually means a second copy of the same rows, kept in step by hand until it drifts. This board reads the rows you already have and writes a move back the way an edit in the grid does, so the board and the table are always the same truth seen two ways.
Your schema, no rename required
Every part of the board is named in config: the field that becomes the columns, the points field, and the fields for lanes, sprints and epics. Point them at what your rows already call those things and the board fits your data rather than asking your data to fit it.
One feed can drive it live
The board takes changes the same way a grid does, so one live source can fill it beside a grid and a chart at once. A card can appear, move or update under the reader while it keeps its scroll, its selection and any card it has open.
what the board gives you
Everything a real board needs, in the box.
Columns from your status field
The columns come from a field you name. Columns you list 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.
Points and work-in-progress limits
Each column carries its card count and, where you track effort, the sum of its points. Set a limit on a column and the board flags it when the cards go over, and a move that would breach it can be turned away, so a rule the team agreed is one the board can keep.
Drag or keyboard, written back
Move a card between columns or reorder it within one, by drag or from the keyboard, and the new column and position are written back to the row. Multi-select moves a set together, and a move can be vetoed before it lands.
Swimlanes, sprints and epics
Split the board into lanes by any field, filter to one sprint or the backlog, or narrow to an epic and roll it up into its count, points and progress toward done. The same board does all three from the fields you name.
A card that opens into a grid
Open a card and its children pop out as a full working grid you can sort and edit in place, so an epic opens into its stories and a story into its tasks without ever leaving the board.
Edit in place, add a card
Double-click a card to edit a field where you opted one in, or add a card to a column and type straight into it. Edits run through the grid's own validation, so a board-only screen still keeps the rules the columns carry.
Every part of it is reachable from the keyboard and named for a screen reader, the board scrolls smoothly through thousands of cards, and its layout, filters and selection can be saved and brought back, so a reopened board comes back as it was.
a board over plain rows
The wiring reads the way the board looks.
Drop in two script tags, then hand createKanban your rows and the
fields it should read. Name the field that becomes the columns, list the columns you want, map
what each card shows, and the board is up. Turn on lanes, sprints and epics by naming their
fields, and hand a card a loader and a grid to let it pop its children out.
The board is a separate, opt-in module with a global of its own. It changes nothing in the grid core and a page that never shows a board never loads it.
<!-- the grid and the board module, as globals -->
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid/lattice-grid.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid/modules/kanban.min.js"></script>
<script>
var createKanban = LatticeGridKanban.createKanban;
// The board reads the rows you already have. Name the field that decides the
// columns, list the columns, and map what each card shows.
var board = createKanban(document.querySelector('#board'), {
rows: tasks,
rowKey: 'id',
columnProperty: 'status',
columns: [
{ id: 'todo', title: 'To do' },
{ id: 'doing', title: 'In progress', wipLimit: 3 },
{ id: 'done', title: 'Done' }
],
pointsProperty: 'points', // the per-column points sum
showPoints: true,
swimlaneProperty: 'assignee', // switch to lanes by owner
sprintProperty: 'sprint', // a sprint view and switcher
card: { title: 'title', subtitle: 'assignee', labels: 'tags' },
onCardMove: function (m) { save(m.keys, m.to); } // a move, written back
});
</script>Build the board on localhost, free.
Development on localhost needs no licence key, so you can point the board at your rows and see it move before you decide anything. Licence per domain when you ship.
The board API The project plan view Drive it from one feed Documentation