Contrib.social

What do we do with table rows and table cells data structure?

Open on Drupal.org →
Created on 9 December 2023, about 1 year ago
Updated 20 June 2024, 6 months ago

Problem/Motivation

Slowly, to be compatible with SDC and with industry standard practices, we are converting:

  • every fields to slots: they are not typed and they host renderable, sometimes in (nested) sequences, and renderbales only
  • every settings to props: typed data structure only, without any renderable

It was very easy to do, except for 2 data structures:

  • menu, breadcrumb, pagers... : this field was not a slot, so we did: ✨ Add links setting type Needs review
  • table rows: we did nothing until now

We need to decide something because it is currently a mess.

Bootstrap 5

 rows:
      preview:
        - cells:
            - content: "Cell 1"
            - content: "Cell 2"
            - content: "Cell 3"

https://git.drupalcode.org/project/ui_suite_bootstrap/-/blob/5.0.x/templ...

Having such data structure is not easily "site buildable": it will not fit as a layout or as view rows for example.

USWDS 3

Same as Bootstrap 5: https://git.drupalcode.org/project/ui_suite_uswds/-/blob/3.0.x/templates...

DSFR & Protocol

Don't even try. Everything is in the presenter template:

Proposal 1: row and cell components

Let's try to adapt the Drupal Core table template data structure to components.

A table component may look like that:

  • attributes: the mandatory attributes object of the component
  • caption: a slot
  • colgroups.*.attributes: Attribute object
  • sticky: A boolean prop
  • empty: A slot
  • no_striping: A boolean prop
  • header_columns: An integer prop
  • header: A slot with a sequence of cellcomponents
  • rows: A slot with a sequence of rowcomponents
  • footer: A slot with a sequence of rowcomponents

cell component:

  • tag: An enum (select) prop
  • attributes: the mandatory attributes object of the component
  • content: A slot
  • field: A string (textfield) or machine name prop (only when used in header)
  • sort: An enum (select) prop (only when used in header)
  • active_table_sort: A boolean prop (only when used in rows or footer)

row component:

  • attributes: the mandatory attributes object of the component
  • data: A "table/matrix data" prop type, this doesn't exist yet
  • no_striping: A boolean prop
  • cells: A slot with a sequence of cell components

Proposal 2: something inspired by links setting type

A conversion of Drupal Core table template may now look like that:

  • attributes: the mandatory attributes object of the component
  • caption: a slot
  • colgroups.*.attributes: Attribute object
  • sticky: A boolean prop
  • empty: A slot
  • no_striping: A boolean prop
  • header_columns: An integer prop
  • header: A flat row prop
  • rows: A 2 levels row prop
  • footer: A 2 levels row prop

The structure of this row prop must be defined, but we may follow what is currently in the presenter template Drupal API.

Next steps

Let's talk about that.

🌱 Plan
Status

Fixed

Version

1.0

Component

Miscellaneous

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024