Sortable Tables – CSS Only

Javascript sucks.

Example Sortable Table
What’s going on here?
More Examples

In an effort to eschew Javascript as much as possible but still have sortable tables, it requires a bit of CSS styling to get it to work. In addition there are some limitations. Using this as a starting guide, I adapted it to create these type of labels and stylings dynamically using Liquid.

Example Sortable Table

Name
↓
↑

Published
↓
↑

Views
↓
↑

“Conditions for CSS Variables”2016-10-2110368Controlling the Specificity2016-12-212431Counters and Stones2018-01-044463Flexible Overflow2017-11-286585Keyboard-Only Focus2017-06-274597Label-to-Input States2017-05-312829

Limitations:

Sort Only One Table at a Time: Clicking sort on one table causes the other to revert back to the original order.
Can’t Sort Strings: There could be some hack using Liquid to get all the strings and sort them somehow, but it’s too complicated for now.
Can’t Sort Scientific Notation: Sorting scientific notation floating point numbers does not work. CSS does not interpret the scientific notation floats as numbers.
Styling looks Crummy: At the moment, styling the columns to fit the content better is an issue. At the moment, I’m styling them as 1fr that is 1 fractional unit.
Confuses screen readers: Sorting does not modify the DOM, so it can confuse screen readers as the DOM order is not the displayed order.

What’s going on here?

Data is loaded from a .yaml file and the subsequent data is used to populate <style> tags and fill out the html table. Here’s what the data looks like:

Yaml Data

name: “TEST”

headers:

  name:

    name: Name

    sortable: False

    type: string

    text_align: left

  published:

    name: Published

    sortable: True

    type: date

    text_align: center

  views:

    name: Views

    sortable: True

    type: value

    text_align: right

rows:

  – name: <a href=”/”>”Conditions for CSS Variables”</a>

    published: 2016-10-21

    views: 10368

  – name: <a href=”https://kizu.ru/en/fun/controlling-the-specificity/”>Controlling the Specificity</a>

    published: 2016-12-21

    views: 2431

  – name: <a href=”https://kizu.ru/en/blog/counters-and-stones/”>Counters and Stones</a>

    published: 2018-01-04

    views: 4463

  – name: <a href=”https://kizu.ru/en/blog/flexible-overflow/”>Flexible Overflow</a>

    published: 2017-11-28

    views: 6585

  – name: <a href=”https://kizu.ru/en/blog/keyboard-only-focus/”>Keyboard-Only Focus</a>

    published: 2017-06-27

    views: 4597

  – name: <a href=”https://kizu.ru/en/blog/label-to-input/”>Label-to-Input States</a>

    published: 2017-05-31

    views: 2829

Jekyll Include file using Liquid Templating

Inside a page, the data is then fed to a Jekyll include. This file uses Liquid templating quite extensively. The include creates the CSS styling tags specific to this table, making sure that they don’t conflict with other tables on the same page with similar names or headers. Then the table is created and each row has the appropriate inline styling to tell CSS how to sort the table.

<style> generated specifically for the table

{%-assign table_data = include.table_data -%}
{%-capture table_name-%}{%-if include.id -%}id_{{include.id|handleize}}–{%-endif-%}table_{{table_data.name|handleize}}{%-endcapture-%}

#sort-ascending-{{table_name}}:checked + .table .table-orderer[for=sort-ascending-{{table_name}}],
#sort-ascending-{{table_name}}:not(:checked) + .table .table-orderer[for=sort-descending-{{table_name}}] {
display: none !important;
}

{%for header_kv in table_data.headers %}
{%-assign header = header_kv[1]-%}
{%-capture name-%}{{table_name}}-header_{{header_kv[0]|handleize}}{%-endcapture-%}
{%-if header.hidden-%}{%-continue-%}{%-endif-%}
.table-col-{{name}} {
text-align:{%-if header.text_align and header.text_align!=empty-%}{{header.text_align}}{%-else-%}inherit{%-endif-%};
}
{%-unless header.sortable-%}{%-continue-%}{%-endunless-%}
#sort-by-{{name}}:checked ~ .table > .table-body > .table-row {
–order: var(–order-by-{{name}})
}
#sort-by-{{name}}:checked ~ .table .table-sorter[for=sort-by-{{name}}] ~ .table-orderer {
display: inline;
}
{%endfor%}
#sort-ascending-{{table_name}}:checked + .table {
–sort-order: 1;
}

HTML div generated for the table

<div class=“table-wrapper”>

  {%-for header_kv in table_data.headers -%}

    {%-assign header = header_kv[1]-%}

    {%-if header.hidden-%}{%-continue-%}{%-endif-%}

    {%-unless header.sortable-%}{%-continue-%}{%-endunless-%}

    {%-capture name-%}{{table_name}}-header_{{header_kv[0]|handleize}}{%-endcapture-%}

    <input type=“radio” name=“sort” id=“sort-by-{{name}}” checked=“checked” />

  {%-endfor-%}

  <input type=“radio” name=“sort-order” id=“sort-descending-{{table_name}}” checked=“checked” />

  <input type=“radio” name=“sort-order” id=“sort-ascending-{{table_name}}” />

  <table class=“table”>

    <thead class=“table-head”>

      <tr class=“table-row” style=“text-align: center;”>

        {%-for header_kv in table_data.headers -%}

          {%-assign header = header_kv[1]-%}

          {%-if header.hidden-%}{%-continue-%}{%-endif-%}

          {%-capture name-%}{{table_name}}-header_{{header_kv[0]|handleize}}{%-endcapture-%}

          <th class=“table-cell” style=“text-align: center;”>

            <label class=“table-sorter” for=“sort-by-{{name}}”>

              {{header.name}}

            </label>

            <label class=“table-orderer” for=“sort-ascending-{{table_name}}”>

              ↓

            </label>

            <label class=“table-orderer” for=“sort-descending-{{table_name}}”>

              ↑

            </label>

          </th>

        {%-endfor-%}

      </tr>

    </thead>

    <tbody class=“table-body”>

      {%-for row in table_data.rows-%}

        {%-capture row_style-%}

          {%-for item_kv in row-%}

            {%-assign item_name = item_kv[0]-%}

            {%-assign header = table_data.headers[item_name]-%}

            {%-if header.hidden-%}{%-continue-%}{%-endif-%}

            {%-unless header.sortable-%}{%-continue-%}{%-endunless-%}

            {%-capture order_by -%}

              {% case header.type %}

              {% when ‘value’ %}

                {{item_kv[1]}}

              {% when ‘date’ %}

                {{item_kv[1] | date: “%s” }}

              {% else %}

                0

              {% endcase %}

            {%-endcapture-%}

            {%-capture name-%}{{table_name}}-header_{{item_name|handleize}}{%-endcapture-%}

            –order-by-{{name}}: {{order_by}};

          {%-endfor-%}

        {%-endcapture-%}

        <tr class=“table-row” style=“{{row_style}}”>

          {%-for item_kv in row-%}

            {%-assign header_key = item_kv[0]-%}

            {%-assign header = table_data.headers[header_key]-%}

            {%-if header.hidden-%}{%-continue-%}{%-endif-%}

            {%-capture name-%}{{table_name}}-header_{{header_key|handleize}}{%-endcapture-%}

            <td class=“table-cell table-col-{{name}}”>{{item_kv[1]}}</td>

          {%-endfor-%}

        </tr>

      {%-endfor-%}

    </tbody>

  </table>

</div>

More Examples

Example Table Duplicates

This table is here to show that the same table doesn’t confuse the CSS sorting of the other table. However sorting one table does remove focus from the other table column header. This could probably be fixed using some CSS magic, however CSS is not my strong suit.

Name
↓
↑

Published
↓
↑

Views
↓
↑

Duplicate Table

Name
↓
↑

Published
↓
↑

Views
↓
↑

Table of Chemical Elements

This is more of a stress test for the table sorting using CSS. Note that unfortunately, the CSS does not sort the scientific notation values properly (see Abundance column).

Atomic Number
↓
↑

Symbol
↓
↑

Element
↓
↑

Density (g/cm^3)
↓
↑

Melting Point
↓
↑

Specific Heat Capacity (J/g/K)
↓
↑

Abundance in Earth’s crust (mg/kg)
↓
↑

1HHydrogen8.988e-0514.0114.30414002HeHelium0.0001785—5.1930.0083LiLithium0.534453.693.582204BeBeryllium1.8515601.8252.85BBoron2.3423491.026106CCarbon2.267>4000 (pressure dependent)0.7092007NNitrogen0.001250663.151.04198OOxygen0.00142954.360.9184610009FFluorine0.00169653.530.82458510NeNeon0.000899924.561.030.00511NaSodium0.971370.871.2282360012MgMagnesium1.7389231.0232330013AlAluminium2.698933.470.8978230014SiSilicon2.329616870.70528200015PPhosphorus1.82317.30.769105016SSulfur2.067388.360.7135017ClChlorine0.003214171.60.47914518ArArgon0.001783783.80.523.519KPotassium0.862336.530.7572090020CaCalcium1.5411150.6474150021ScScandium2.98918140.5682222TiTitanium4.5419410.523565023VVanadium6.1121830.48912024CrChromium7.1521800.44910225MnManganese7.4415190.47995026FeIron7.87418110.4495630027CoCobalt8.8617680.4212528NiNickel8.91217280.4448429CuCopper8.961357.770.3856030ZnZinc7.134692.880.3887031GaGallium5.907302.91460.3711932GeGermanium5.3231211.40.321.533AsArsenic5.77610900.3291.834SeSelenium4.8094530.3210.0535BrBromine3.122265.80.4742.436KrKrypton0.003733115.790.2481e−437RbRubidium1.532312.460.3639038SrStrontium2.6410500.30137039YYttrium4.46917990.2983340ZrZirconium6.50621280.27816541NbNiobium8.5727500.2652042MoMolybdenum10.2228960.2511.243TcTechnetium11.52430–3e−944RuRuthenium12.3726070.2380.00145RhRhodium12.4122370.2430.00146PdPalladium12.021828.050.2440.01547AgSilver10.5011234.930.2350.07548CdCadmium8.69594.220.2320.15949InIndium7.31429.750.2330.2550SnTin7.287505.080.2282.351SbAntimony6.685903.780.2070.252TeTellurium6.232722.660.2020.00153IIodine4.93386.850.2140.4554XeXenon0.005887161.40.1583e−555CsCaesium1.873301.590.242356BaBarium3.59410000.20442557LaLanthanum6.14511930.1953958CeCerium6.7710680.19266.559PrPraseodymium6.77312080.1939.260NdNeodymium7.00712970.1941.561PmPromethium7.261315–2e−1962SmSamarium7.5213450.1977.0563EuEuropium5.24310990.182264GdGadolinium7.89515850.2366.265TbTerbium8.22916290.1821.266DyDysprosium8.5516800.175.267HoHolmium8.79517340.1651.368ErErbium9.06618020.1683.569TmThulium9.32118180.160.5270YbYtterbium6.96510970.1553.271LuLutetium9.8419250.1540.872HfHafnium13.3125060.144373TaTantalum16.65432900.14274WTungsten19.2536950.1321.375ReRhenium21.0234590.1377e−476OsOsmium22.5933060.130.00277IrIridium22.5627190.1310.00178PtPlatinum21.462041.40.1330.00579AuGold19.2821337.330.1290.00480HgMercury13.5336234.430.140.08581TlThallium11.855770.1290.8582PbLead11.342600.610.1291483BiBismuth9.807544.70.1220.00984PoPolonium9.32527–2e−1085AtAstatine7575–3e−2086RnRadon0.009732020.0944e−1387FrFrancium1.87281–1e−1888RaRadium5.59730.0949e−789AcActinium10.0713230.125.5e−1090ThThorium11.7221150.1139.691PaProtactinium15.371841–1.4e−692UUranium18.951405.30.1162.793NpNeptunium20.45917–3e−1294PuPlutonium19.85912.5–3e−1195AmAmericium13.691449–096CmCurium13.511613–097BkBerkelium14.791259–098CfCalifornium15.11173–099EsEinsteinium8.841133–0100FmFermium9.71125–0101MdMendelevium10.31100–0102falseNobelium9.91100–0103LrLawrencium15.61900–0104RfRutherfordium23.22400–0105DbDubnium29.3––0106SgSeaborgium35.0––0107BhBohrium37.1––0108HsHassium40.7––0109MtMeitnerium37.4––0110DsDarmstadtium34.8––0111RgRoentgenium28.7––0112CnCopernicium14.0283–0113NhNihonium16700–0114FlFlerovium9.928200–0115McMoscovium13.5700–0116LvLivermorium12.9700–0117TsTennessine7.2700–0118OgOganesson7325–0

Interactive, sortable table using only HTML and CSS

css, webdev

Rickifact.com