Klarhimmel UI

Data

Tables, filters and pagination: the parts of every list screen, with their empty, loading and error states.

  • Data table

    A data table: sort buttons that order by what a column holds (text, numbers, dates; aria-sort), a first column that stays in view while the rest scrolls with…

    6 states

  • Filter bar

    A search box and select filters above a list, active filters as removable chips with a clear-all, and a result count read from a list (one entry per filter…

    3 states

  • Pagination

    A pagination row: a summary built from the page, rows per page and the total (it changes with the page and is read out politely), previous and next, numbered…

    4 states