Bootstrap Data Table: When a Plain Table Stops Being Enough
Every Bootstrap data table starts the same way: a <table class="table">, a
loop over some rows, done. And for a surprising number of applications, that
is genuinely all you need.
Then the requirements arrive one at a time. “Can we sort this by date?” “Can I search it?” “It’s slow with this quarter’s data.” Each one looks small, and each one is answerable with a few lines of JavaScript — until, at a fairly predictable point, it isn’t.
This article walks that ladder honestly. For each threshold we show what you can build yourself with plain Bootstrap (or CoreUI, which shares the same table markup and classes) and vanilla JavaScript, where the hand-rolled version starts to leak, and at which rung it stops being reasonable to keep writing table infrastructure by hand. If your table has 50 rows and never will have more, the code below is all you need — no library, no license, nothing to ship but a few kilobytes of your own JavaScript.
CoreUI Data Grid v0.3.0-rc.0 - Right-to-Left Layouts
We are excited to announce the release of CoreUI Data Grid v0.3.0-rc.0. This release brings right-to-left layouts to the whole grid - column order, the live reorder preview, resizing, and keyboard navigation - without an option to flip, a separate stylesheet, or a mirrored build. As always, everything below is available in all four editions - JavaScript, React, Vue, and Angular.
CoreUI Data Grid v0.2.0-rc.0 - Infinite Scroll, Cell Selection, Print & Excel Export
We are excited to announce the release of CoreUI Data Grid v0.2.0-rc.0 - the interaction release. It adds infinite scroll, auto row height, pointer-based drag and drop, row reordering, cell selection with clipboard copy, print, and a dependency-free Excel export. Everything below is available in all four editions - JavaScript, React, Vue, and Angular.