DataTable Component

[muratcorlu]

Figma

[muratcorlu]

DataTable Component Design Meeting Report

Date: 04.01.2023 13:00 (UTC+3)

• First version of data table component will cover requirements for a basic, static table component. It will not have dynamic functionalities like sorting, filtering data, or customizing columns by end users. This is for keeping this component as simple and non-opinionated as possible in the beginning, to iterate and not block any different technical implementations of data tables. Those features can be considered in the future.
• Data table will be self-resistant for being usable in different available widths. (Using horizontal scrolls when it's needed.
• Header row and some starting columns can be set as sticky.
• There may be an option to show/hide some columns regarding the available area for the table.
• Column headers can have optional sorting, filter, tooltip buttons. These will be provided to have those buttons in an easy and standard way, not for actual sorting/filter implementation.
• Selected, hover, passive or zebra styles will be provided for rows.
• A loading state will be provided for table

[stovein]

We created a candidate ADR for DataTable component with @bariskaraca @bdogukandagli

Implementation

General usage example:

<bl-table .items="${this.items}" sticky-header>
  <bl-table-column
    sticky="start"
    auto-width
  >
    <slot name="header">Header</slot>
    <slot name="value">Value</slot>
  </bl-table-column>
  <bl-table-column name="Email" value="email" auto-width >
  <bl-table-column name="Address" value="address" width="120px" >
  <bl-table-column name="Profession" value="profession" width="10%" >
  <bl-table-column name="Address" value="address" auto-width >
  <bl-table-column
    sticky="end"
    name="Actions"
    auto-width
  >
    <slot name="value">
      <bl-button>EDIT</bl-button>
    </slot>
  </bl-table-column>
</bl-table>

Rules

• DataTable

API Reference:

bl-table component

DataTable component is for showing a list of data as a table.

Attributes

Attribute	Description	Default Value
items (array of objects)	Data to be shown	[]
sticky-header (boolean)	Sets table header to be sticky	false
selectable (boolean)	Sets table rows to be selectable	false
select-value (array of strings)	Selected rows index value as string	null

Slots

Name	Description	Default Content
default slot	List of bl-table-column components	-

Events

Event	Description
bl-table-select-row	Will be triggered once user make a row selection

bl-table-column component

Attributes

Attribute	Description	Default Value
name (string)	Header text	-
value (string)	Value text	-
sticky ('start' | 'end' | null)	Columns sticky position	null
auto-width (boolean)	Sets width automatically (default table behaviour)	true
width (string)	Column width	-

Slots

Name	Description	Default Content
header slot	Header free slot instead of text, overrides text prop when exists	-
value slot	Value free slot instead of text, overrides text prop when exists	-

[muratcorlu]

• Data should not be passed as an object, instead we should use elements similar to native tr, td elements to put rows and cells to the table. In Baklava we try to keep close to web standards so users in different frameworks can easily customise and extend the functionality. Also we should able to write a basic table without needing to write JavaScript.
• Visual properties should be set via CSS properties as much as possible like width, auto-width, sticky

[stovein]

We are ok with second point, but why we created an ADR like this was because we had few technical uncertainties that we could not provide a styling like in Figma. After sorting this problem in a meeting with Murat we decided to make api look like a native html element that is flexible and can be used without javascript and improve over that.

New ADR is as follows:

Implementation

General usage example:

<bl-table>
  <slot name="header">
    <bl-table-row>
      <bl-table-header>
        Header 1
      </bl-table-header>
      <bl-table-header>
        Header 2
      </bl-table-header>
    </bl-table-row>
  </slot>
  <slot name="data">
    <bl-table-row>
      <bl-table-cell>row 1 data 1</bl-table-cell>
      <bl-table-cell>row 1 data 2</bl-table-cell>
    </bl-table-row>
    <bl-table-row>
      <bl-table-cell>row 2 data 1</bl-table-cell>
      <bl-table-cell>row 2 data 2</bl-table-cell>
    </bl-table-row>
  </slot>
</bl-table>

Rules

• DataTable

API Reference:

bl-table component

DataTable component is for showing a list of data as a table.

Attributes

Attribute	Description	Default Value
selectable (boolean)	Sets table rows to be selectable	false
select-value (array of strings)	Selected rows index value as string	null

Slots

Name	Description	Default Content
"header" slot	List of bl-table-row components	-
"data" slot	List of bl-table-row components	-

Events

Event	Description
bl-table-select-row	Will be triggered once user make a row selection

bl-table-row component

Slots

Name	Description	Default Content
default slot	includes bl-table-header or bl-table-cell	-

bl-table-header component

Slots

Name	Description	Default Content
default slot	html header content	-

bl-table-cell component

Slots

Name	Description	Default Content
default slot	html data content	-

[ozkersemih]

Firstly, thanks for your work. I have a few questions.

1. What is the motivation of using slots? I guess these slots will be used in internal logic of table component. I wonder how will we use it.
2. I didn't see attributes about being sticky in your last ADR (I see it on first ADR structure). Did we decide to add them for next stage of development? Aren't we gonna use it in first version of DataTable?
3. Should we consider adding tooltip attribute for headers or should developers add their own tooltip(info icon) with free content?
4. Should we consider adding attribute about setting fixed width/height for columns/rows?

[stovein]

We are currently considering a few adr changes too,

1. We will remove slots, having another component for header instead of slots will have better usability.
2. Instead of providing sticy with attributes, we decided to have them via css, so there are no attributes,
3. We are planning to make an mvp header, in a basic html we mostly won't need any tooltips, thats why we are planning to having free content in slots so that developers can add tooltips. (If there is an audience about having an attribute like helpText will help better we can consider it)
4. Again, extra styling contexts will not be added as a component feature since it can be done via css, and we will try to avoid any development that can hinder css usage.

[ozkersemih]

1. Ok
2. So, there will be custom css variables to make a column/row be sticky?
3. Ok
4. But component under shadow dom, I think we cant set width/height for cases like that. If we want to set width so we will have custom css variable about that also?

Can you add custom css variables that you think to add?

[stovein]

For now in ADR, I am not planning to set sticky and width variables/attributes, but while developing I will ttry to have a sticky attribute or css variable either in or in directly since. making a table header is tricky I will try to provide with an option instead of making developer do it from 0, but for width case, if th elements in shadow dom affect its column, I am planning to leave it as normal css styling that can be overwritten from api.

If we are satisfied with new ADR I think starting the development process will be better and add some styling attributes or change namings while on the go while see it working.

Implementation

General usage example:

<bl-table>
  <bl-table-header>
    <bl-table-row>
      <bl-table-header-cell>
        Header 1
      </bl-table-header-cell>
      <bl-table-header-cell>
        Header 2
      </bl-table-header-cell>
    </bl-table-row>
  </bl-table-header>
  <bl-table-body>
    <bl-table-row>
      <bl-table-cell>row 1 data 1</bl-table-cell>
      <bl-table-cell>row 1 data 2</bl-table-cell>
    </bl-table-row>
    <bl-table-row>
      <bl-table-cell>row 2 data 1</bl-table-cell>
      <bl-table-cell>row 2 data 2</bl-table-cell>
    </bl-table-row>
  </bl-table-body>
</bl-table>

Rules

• DataTable

API Reference:

bl-table component

DataTable component is for showing a list of data as a table.

Attributes

Attribute	Description	Default Value
selectable (boolean)	Sets table rows to be selectable	false
select-value (array of strings)	Selected rows index value as string	null

Events

Event	Description
bl-table-select-row	Will be triggered once user make a row selection

bl-table-row component

Slots

Name	Description	Default Content
default slot	includes bl-table-header or bl-table-cell	-

bl-table-header component

Slots

Name	Description	Default Content
default slot	same as thead	-

bl-table-body component

Slots

Name	Description	Default Content
default slot	same as tbody	-

bl-table-header-cell component

Slots

Name	Description	Default Content
default slot	html header content	-

bl-table-cell component

Slots

Name	Description	Default Content
default slot	html data content	-

[Enes5519]

I talked with @buseselvi about how sort should behave, and it turned out like this: When you click on the Sort icon, it will follow the path as desc. When you click it one more time, it will follow the path as asc. If he clicks once more, it will return as default sort.

[anilcosar]

Hi @muratcorlu, Is there any progress for this component ? I can't find this component

[erbilnas]

We haven't talked about and decided on a start date.

[bariskaraca]

We edited ADR for this component, and last ADR is as follows:

---

Implementation

---

General usage example:

<bl-table
    selectable
    multiple
    select-value="list of selected row indexes"
>
    <bl-table-header sticky>
        <bl-table-row>
            <bl-table-header-cell
                sortable
                sort-key
                sort-direction
            >
                Header 1
            </bl-table-header-cell>
            <bl-table-header-cell>
                Header 2
            </bl-table-header-cell>
        </bl-table-row>
    </bl-table-header>
    <bl-table-body>
        <bl-table-row disable-selection>
            <bl-table-cell>
                row 1 data 1
            </bl-table-cell>
            <bl-table-cell>row 1 data 2</bl-table-cell>
        </bl-table-row>
        <bl-table-row>
            <bl-table-cell>row 2 data 1</bl-table-cell>
            <bl-table-cell>row 2 data 2</bl-table-cell>
        </bl-table-row>
    </bl-table-body>
</bl-table>

---

API Reference:

bl-table component

Properties

Property	Description	Default Value
selectable (boolean)	Sets table rows to be selectable	false
multiple (boolean)	Set multiple table rows as selectable	false
select-value (number[] | null)	Selected rows index value as number	null

Events

Event	Description
bl-table-sort	Will be triggered once user change table sort
bl-table-row-select	Will be triggered once user make a row selection/unselection

---

bl-table-header component

Properties

Property	Description	Default Value
sticky (boolean)	Sets table header as sticky	false

---

bl-table-header-cell

Properties

Property	Description	Default Value
sticky ("start" | "end" | null)	Sets table column as sticky	null
sortable (boolean)	Sets table column as sortable	false
sort-key (string | number | null)	Set key value for column	null
sort-direction ("asc" | "desc" | null)	Set sorting type for sorted column	null

CSS Attributes

Attribute	Description
bl-table-header-cell-width (number)	Set table header cell width

---

bl-table-row component

Properties

Property	Description	Default Value
disable-selection (boolean)	Sets table row selection checkbox as disable state.	false

[leventozen]

We're all set! Please ensure we maintain regular communication as you begin the implementation process.

[github-actions[bot]]

:tada: This issue has been resolved in version 3.0.0-beta.4 :tada:

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This issue has been resolved in version 3.1.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: