Bootstrap Data Table Examples: 23 Working Patterns

These 23 Bootstrap data table and CSS table examples cover two different needs: presenting rows clearly and letting people work with records. Start with the comparison below, then open the exact example for a live preview and copyable source.

Every set has plain CSS, Bootstrap 5 and Tailwind variants. Selected examples also include React; those links appear only where that version exists. The searchable datatable uses vanilla JavaScript and in-memory records. It does not include the separate DataTables library or a server-side query service.

Copy individual component code without an email. Confirm your email for a complete ZIP; newsletter signup is optional. Original code is free for personal and commercial projects under the uiCookies license.

Which data table do you need?

All 23 table examples

Searchable Paginated Datatable

• Live search across client name and invoice number
• Five sortable columns with aria-sort on the active header
• Numbered pagination with Previous and Next, current page marked with aria-current

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code · React code

Striped Table with Totals

• Dark header row, zebra stripes and a hover highlight
• Totals row in a real tfoot
• Positive and negative changes coloured green and red at 4.5:1 or better

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code · React code

Dark Service Status Table

• Glowing status dots drawn in CSS, always paired with a status word
• Load bars with the percentage printed beside them
• Named row action buttons, one per service

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code · React code

Responsive Stacked Table

• Rows become labelled cards below 620px with CSS only
• Column names come from data-label via content: attr()
• Order number marked up as a row header

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code · React code

Sticky Header Table

• Header row pinned with position:sticky, no JavaScript
• border-collapse:separate so the header border sticks too
• Tabular numerals for aligned figures

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code · React code

Selectable Rows Table

• Per-row checkboxes with names that include the row
• Select-all that goes indeterminate on a partial selection
• Bulk action bar that appears with the selected count

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code · React code

Expandable Rows Table

• Disclosure buttons with aria-expanded and aria-controls
• Whole row is clickable, the button handles the keyboard
• Height animation with grid-template-rows, no fixed max-height

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code · React code

Plan Comparison Table

• Highlighted recommended column with a header strip
• Ticks and dashes backed by Included and Not included text
• Feature names as row headers with optional notes

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code · React code

Invoice Line Items Table

• Line items with name, description, quantity, rate and amount
• Totals in a second tbody with row-header labels
• Tabular numerals and right-aligned money columns

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code

Minimal Hairline Table

• Hairline rules only, no fills or vertical lines
• Tabular numerals with a right-aligned change column
• Row headers with a secondary subtitle

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code

Data Table Toolbar

• Search that filters rows and announces the result count
• Columns menu that shows and hides table columns
• Density toggle with aria-pressed and compact rows

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code

Sortable Table Headers

• Three header states: none, ascending and descending
• aria-sort on the active header drives the arrow styling
• Sorts dates by datetime, numbers numerically and text alphabetically

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code

Loading, Empty & Error Tables

• Loading table keeps the real header so column widths do not jump
• Skeleton shimmer that stops under prefers-reduced-motion
• Empty state with a primary and a secondary action

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code

Inline Editable Table Cells

• Edit in place with contenteditable cells, no layout shift
• Enter keeps a change, Escape undoes it
• Changed rows marked with an amber tint and edge bar

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code

Frozen First Column Table

• Sticky header row and sticky first column
• Edge shadow on the frozen column
• Scrolls both ways inside a 340px high card

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code

Grouped Rows with Subtotals

• One tbody per group, grand total in tfoot
• Group headers are buttons with aria-expanded
• Collapsed rows use the hidden attribute

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code

Tree Table with Nested Rows

• Depth from one –d custom property per row
• Folders toggle with buttons that carry aria-expanded
• Nested folders keep their own open or closed state

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code

Tables with Inline Charts

• Sparklines, share bars and goal rings in pure CSS
• Each chart reads a single custom property
• Bootstrap share bars built on .progress

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code

Table Row Actions and Bulk Bar

• Row actions revealed on hover and on keyboard focus
• Always visible on touch screens
• Popover menus that a scrolling table cannot clip

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code

Table Pagination Patterns

• Numbered pages with gaps and a current page
• Rows per page select with a range
• Cursor pagination with previous and next only

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code

Resizable Table Columns

• Drag or arrow-key resizing, Shift for bigger steps
• Widths on a colgroup so all rows follow
• Focusable role="separator" dividers with aria-valuenow

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code

Reorderable Table Rows

• Drag and drop with a drop-position line
• Arrow keys move a row from its handle
• Positions renumbered after every move

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code

Saved-View Tables

• Named views remember filters, sorting and page size
• Selection across pages of the current filter
• Indeterminate select-page checkbox and selection count

Code and setup · Live CSS demo CSS, Bootstrap & Tailwind code · Bootstrap code · Tailwind code

Client-side tables versus server-side data

Filtering a JavaScript array is useful when the browser already has the whole authorized dataset. It is not server pagination: changing the page only changes which local records are displayed. For large or private datasets, request an allowed page from your API and keep sorting and filtering consistent with the server response.

• Loading: reserve the table layout and expose a loading status. Cancel or ignore stale responses when filters change quickly.
• Empty: distinguish no matching results from a dataset with no records. Keep the current filter visible and provide a clear reset.
• Error: preserve the user’s filters and offer a retry. Do not replace a failed request with a success message or misleading zero count.
• Bulk actions: define whether selection means this page, all matching records or explicit IDs. Recheck permissions and selection on the server before changing records.
• Export: label whether CSV contains the visible page or the whole filtered result. Escape cell text and handle spreadsheet formulas when exporting user-supplied content.

Responsive and accessible table choices

Use horizontal scrolling when people need to compare the same columns across rows. A stacked layout can work better for short independent records. Avoid hiding essential data solely to fit the screen; give a deliberate way to inspect it.

Keep a real table with a caption and header associations for tabular data. Sorting controls should be buttons, the active header should expose aria-sort, and pagination should identify the current page. Test focus visibility inside scrollable regions, long cell content and every action with the keyboard.

Tools that complement the examples

Tablecraft configures an accessible table and exports the preview as HTML, CSS and JavaScript. Querynest demonstrates typed AND/OR filters. Importbench covers CSV validation and a reversible local import; none of these provides a production database.

Download all 23 table sets · See complete admin dashboards