the board view
JavaScript Kanban Board View for a Data Grid
A board on the same rows as your grid: drag cards between columns, hold a column to its WIP limit, split it into swimlanes, and give every card labels, owners, due dates and progress. Plain JavaScript, htmx or your framework.
Try the board Free on localhost
not a second copy of your data
The board is a view, not another store.
The 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 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.
Card ageing: see which work has sat too long.
A feature of the board, not the whole of it. Every open card is timed from the moment it entered its column, and the ones running long are marked amber, then red.
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 and drag the lanes into the order you want, 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 of it 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.
The card face, yours to shape
The built-in card carries a title, a subtitle, a cover image, a progress bar and a metric from the fields you map, or you can hand the board your own markup and own the whole card. Either way drag, keyboard move and in-place editing keep working, and edits run through the grid's own validation, so a board-only screen 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.
On a phone or tablet, press and hold a card to pick it up, then drag it to its new column or lane. A quick swipe still scrolls the board, and a mouse drag works as it always did.
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. See its size next to every other module in the module map.
<!-- the grid and the board module, as globals -->
<script src="https://cdn.latticegrid.dev/lattice-grid@1.110.1/lattice-grid.min.js"></script>
<script src="https://cdn.latticegrid.dev/lattice-grid@1.110.1/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>demos
Run it, then change it.
Kanban board
Cards in status columns, with points, limits, lanes and sprints.
Flow metrics
A cumulative-flow diagram, cycle time and throughput from the board’s own movements.
Card aging
Which cards have sat too long in a column.
Gantt chart
The same kind of rows as a schedule.
docs
The API, a how-to and the htmx page.
Board API
createKanban: columns, lanes, sprints and epics.
Build a board from grid rows
One grid, one board, a move written back to the row.
Kanban with htmx
A board on a server-rendered page, with no build step.
Drive it from one feed
One live source filling a board, a grid and a chart.
Also in the licence
- GridThe data grid with derived grids, statistics and Explain built in.
- DashboardsKPI tiles, charts and the Designer, on the same rows.
- GanttDependencies, critical path and resource load.
- CalendarA schedule view over a date column.
- SchedulerPeople and machines allocated to work.
- FormsForms, the record editor, the app shell, and the context menu, sidebar and toolbar.