feat(@clayui/core): adds the implementation of the new data-oriented composition for Table #5679

matuzalemsteles · 2023-09-21T01:15:27Z

Closes LPS-192998

This PR implements new components for Table to make room for new OOTB features for developers, so we can continue improving the UX and making the component more useful and prevent developers from having to implement more features on top of that.

The idea here is to bring a data-oriented composition using the Collection pattern that we already use in other Clay components, this already brings the UX benefits that we have in other components and we can also implement the features such as list virtualization that we need to implement the treegrid pattern and the column resizer.

Instead of implementing this on top of the Table currently, we are recreating the component parts in a new composition to avoid backward compatibility or mechanisms that have to identify when using the old or new composition to use the right component. So to use the new composition use the Table from @clayui/core and we leave the component in @clayui/table in deprecation mode.

This is the new UX and composition of the component, it is not yet public. I will make it public only after we implement all the new features, such as treegrid support and column resizer with OOTB accessibility.

<Table>
  <Head items={columns}>
    {(column) => <Column key={column.id}>{column.name}</Column>}
  </Head>

  <Body items={rows}>
    {(row) => (
      <Row items={columns}>
        {(column) => <Column>{row[column.id]}</Column>}
      </Row>
    )}
  </Body>
</Table>

Just like in other components that use collection, the list can be static or dynamic, for example <Row /> can be a static list when the column is not dynamic.

<Table>
  <Head items={columns}>
    <Column key="name">Name</Column>
    <Column key="type">Type</Column>
  </Head>

  <Body items={rows}>
    {(row) => (
      <Row>
        <Column>{row.name}</Column>
        <Column>{row.type}</Column>
      </Row>
    )}
  </Body>
</Table>

…composition for Table Instead of implementing this on top of the Table currently, we are recreating the component parts in a new composition to avoid backward compatibility or mechanisms that have to identify when using the old or new composition to use the right component. So to use the new composition use the Table from `@clayui/core` and we leave the component in `@clayui/table` in deprecation mode.

matuzalemsteles · 2023-09-21T01:18:16Z

cc @ethib137 let me know what you think.

ethib137

This is looking great @matuzalemsteles ! Is it fully working with collections now?

ethib137 · 2023-09-21T17:13:23Z

packages/clay-core/src/table/Column.tsx

+} & React.ThHTMLAttributes<HTMLTableCellElement> &
+	React.TdHTMLAttributes<HTMLTableCellElement>;
+
+export const Column = React.forwardRef<HTMLTableCellElement, Props>(


Is there a reason why we use 'Column' instead of 'Cell' as the name?

In fact, there isn't much of a reason, just using a slightly more "popular/common" nomenclature.

Hey @matuzalemsteles can you point me towards where you've seen column used? If we were to think about this like google sheets, this component renders a single cell such as A1, right? In the context of google sheets a column would refer to A:A or all the cells in a column.

Checking a few other libraries, MaterialUI uses TableCell, NextUI uses TableColumn only for cells in the header and TableCell for cells in the body.

Additionally, FDS uses TableCell and TableHeadCell. Also, most of the classnames being applied to this component are prefixed table-cell-*.

So what do you think, does Cell make more sense, or do you still see more reasons for Column?

@ethib137 These are good points, I hadn't thought about this side of Google Sheets. I really think that the case of Google sheets makes sense mainly because you deal with cells specifically although you call a column like A which groups several cells I would say that this is different for Table where sheets have the concept of cells much stronger because the cell can have a relationship between different cells, not necessarily related only to the specific column but can, for example, be diagonal and column is only used as a reference, which is different in a table where the cell has to be associated with a column to have context, which is not true in Google Sheets since the nature of the cell can have its own context and it is a more flexible term we can say like this.

But yes, calling cells for body elements makes sense, I don't like it particularly because the cell seems to not necessarily be "associated" with a column directly... For example Column is also a common name for components not necessarily related to a table , for example a group of elements to be rendered horizontally or vertically. For example:

Braid Design System

Base Web They don't necessarily use Column as a composition, there are some components as part of their Table that use the term column but their composition is very different.

Adobe Spectrum - They use the same Column pattern for the header and Cell for the body.

Polaris - Their composition is a little confusing but I would say that they use the same naming pattern of Column for header and cell for cell, in other table components the cell is not mentioned as part of the APIs, only rows.

Evergreen - Here they already use Cell for anywhere but you can understand that the cell is not necessarily associated with a column so it seems that it can be rendered in different ways which makes sense here.

Carbon - Composition follows the same pattern of having Column for header but they only call it Header, and Cell just for the body.

Radix - Composition is based on HeaderCell and Cell for the body only.

I don't really like the idea of creating a Column component to be used only in the Head and a Cell for only the body, I want to reduce the number of components for the composition and make the component more intelligent, which is also one of the reasons because I went with Column instead of just Cell for naming.

Anyway, we can go with Cell because we are already using this term in several places, so it will be simpler for current developers to associate this.

Sounds good. Thanks @matuzalemsteles . Can you create a ticket for making this change?

matuzalemsteles · 2023-09-21T20:44:42Z

Is it fully working with collections now?

Yes, but we are not yet using all the features it provides. For example, I haven't enabled virtualization yet because I will do that when I'm working on the treegrid implementation. Another feature we probably won't use is infinite scroll since table is typically used with pagination, so I'll enable when we have use cases for that.

matuzalemsteles · 2023-09-21T20:45:45Z

I'm going to merge this to continue working on the other tasks. But if we need to make any changes we can send it in another PR anyway.

ethib137 approved these changes Sep 21, 2023

View reviewed changes

matuzalemsteles merged commit b6f8f1c into liferay:master Sep 21, 2023
2 checks passed

matuzalemsteles mentioned this pull request Sep 21, 2023

Implement the Collection pattern in components #5032

Open

15 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(@clayui/core): adds the implementation of the new data-oriented composition for Table #5679

feat(@clayui/core): adds the implementation of the new data-oriented composition for Table #5679

matuzalemsteles commented Sep 21, 2023

matuzalemsteles commented Sep 21, 2023

ethib137 left a comment

ethib137 Sep 21, 2023

matuzalemsteles Sep 21, 2023

ethib137 Sep 22, 2023

matuzalemsteles Sep 22, 2023

ethib137 Sep 25, 2023

matuzalemsteles commented Sep 21, 2023

matuzalemsteles commented Sep 21, 2023

feat(@clayui/core): adds the implementation of the new data-oriented composition for Table #5679

feat(@clayui/core): adds the implementation of the new data-oriented composition for Table #5679

Conversation

matuzalemsteles commented Sep 21, 2023

matuzalemsteles commented Sep 21, 2023

ethib137 left a comment

Choose a reason for hiding this comment

ethib137 Sep 21, 2023

Choose a reason for hiding this comment

matuzalemsteles Sep 21, 2023

Choose a reason for hiding this comment

ethib137 Sep 22, 2023

Choose a reason for hiding this comment

matuzalemsteles Sep 22, 2023

Choose a reason for hiding this comment

ethib137 Sep 25, 2023

Choose a reason for hiding this comment

matuzalemsteles commented Sep 21, 2023

matuzalemsteles commented Sep 21, 2023