Skip to content
Moodle Design Systemby Didactika
Moodle 5.3 LTS
v0.1
EN
Bootstrap components
Didactika theme v0.1

Tables

Data in rows and columns that people compare, scan and sort.

A table is for data that has several attributes per row and that people compare. For a list of one thing per line, use a list group.

When to use it

Use it

  • A header row with short column names; numbers aligned to the right.
  • Highlight the row under the pointer (table-hover) when rows are actionable.
  • Wrap wide tables in table-responsive so the page never scrolls sideways.
  • Keep the actions of a row in the same place and always visible.

Don't

  • Use a table for layout.
  • Colour rows without a text that says why.
  • Hide columns that are needed to understand the row.

Anatomy

A table with a caption, a header (thead, th scope="col") and a body (tbody) whose first cell can be the row header (th scope="row"). Rows and cells can take a contextual colour.

Variants and states

A data table
AssignmentDueStatusGrade
Essay: climate12 NovGraded8.5
Lab report 219 NovSubmitted—
Quiz: equations26 NovNot started—
Final project10 DecNot started—

Toolbar, selection, actions and pager

How Didactika builds a table that people work with: a toolbar over it (search, filters and the main action), a bar that appears when rows are selected, a checkbox column, sortable headers, the actions of a row at the end and always visible, and the pager of a list under it. All of it lives in one card.

Toolbar, selection and actions
2 selected
Category Status
Algebra IMathematics128 Open
Physics IISciences94 Open
Chemistry labSciences71 Draft
World historyHumanities156 Closed
1–4 of 4

Compact, with people and progress

Compact
ParticipantRoleLast accessProgress
ALAda LovelaceTeacher2 minutes ago
100%
GHGrace HopperStudentYesterday
72%
ATAlan TuringStudent3 days ago
38%

Sortable headers

A sortable header is a button inside the th. Only one column is sorted at a time, and the aria-sort of its th (ascending, descending or none) says which: there is one arrow: in the sorted column it is solid, in the primary colour, and points up (ascending) or down (descending); in the others it is faint and points down until the pointer or the keyboard reaches them.

Sortable headers
Algebra IAna Ruiz12874%
Physics IILuis Gil9458%
Chemistry labEva Marín7191%
World historyMarta Soto5266%

Row styles

Row styles
StripedParticipants
Algebra I128
Physics II94
Chemistry71
Bordered, smallParticipants
Algebra I128
Physics II94
Row coloursMeaning
table-successCompleted
table-warningNeeds attention
table-dangerFailed
table-activeSelected

Combinations

Combination Use it for
Table × toolbar Search and filters on the left, the main action on the right; the toolbar sits inside the same card as the table.
Table × selection A checkbox column; when rows are selected a bar shows how many and the actions that apply to them.
Table × row actions Icon buttons at the end of the row (edit, hide, delete), always visible, never hidden until hover.
Table × pager The pager of a list in the foot: rows per page, range and arrows.
Table × status A soft badge with a dot for the state of each row.
Compact × people Small padding, an avatar with a name, a role in a badge and a thin progress bar.

What Didactika changes and why

What we changed Why it helps
Full width, a small capital header and quiet lines The header is a label, not a title; the eye goes to the data.
The actions of a row are always visible Hiding them until hover makes them invisible on touch screens and for keyboard users, and moves the layout.
The selected row is tinted It is clear what an action will apply to before it is pressed.
The toolbar, the table and the pager are one card They are one object; the user sees one thing to work with.
Sortable headers are buttons with an icon They announce the order and are reachable by keyboard.

Classes

Class What it does
table Base
table-striped, table-hover, table-bordered Stripes, row hover and borders
table-sm Compact
table-active, table-success… Colour of a row or cell
table-responsive Scrolls inside its box on small screens
align-middle Vertical alignment
table-toolbar, table-toolbar-start, table-toolbar-end The bar over a table (Didactika)
table-toolbar-selection The bar that appears when rows are selected (Didactika)
table-select The narrow column of the checkbox (Didactika)
table-actions The cell with the actions of a row (Didactika)
table-sort A sortable header (Didactika)
table-foot The foot of a table, for the pager (Didactika)

In this version

Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable.

Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet.

Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet.

Accessibility

  • Use th with scope, and a caption (it can be visually hidden).
  • Do not use a table for layout.
  • A coloured row also says it with text.
  • Sortable columns announce the order (aria-sort).