Closed muratcorlu closed 7 months ago
Date: 04.01.2023 13:00 (UTC+3)
We created a candidate ADR for DataTable component with @bariskaraca @bdogukandagli
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>
bl-table
componentDataTable component is for showing a list of data as a table.
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 |
Name | Description | Default Content |
---|---|---|
default slot |
List of bl-table-column components |
- |
Event | Description |
---|---|
bl-table-select-row |
Will be triggered once user make a row selection |
bl-table-column
componentAttribute | 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 | - |
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 | - |
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.width
, auto-width
, sticky
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:
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>
DataTable component is for showing a list of data as a table.
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 |
Name | Description | Default Content |
---|---|---|
"header" slot | List of bl-table-row components | - |
"data" slot | List of bl-table-row components | - |
Event | Description |
---|---|
bl-table-select-row | Will be triggered once user make a row selection |
Name | Description | Default Content |
---|---|---|
default slot | includes bl-table-header or bl-table-cell | - |
Name | Description | Default Content |
---|---|---|
default slot | html header content | - |
Name | Description | Default Content |
---|---|---|
default slot | html data content | - |
Firstly, thanks for your work. I have a few questions.
We are currently considering a few adr changes too,
Can you add custom css variables that you think to add?
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
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.
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>
DataTable component is for showing a list of data as a table.
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 |
Event | Description |
---|---|
bl-table-select-row | Will be triggered once user make a row selection |
Name | Description | Default Content |
---|---|---|
default slot | includes bl-table-header or bl-table-cell | - |
Name | Description | Default Content |
---|---|---|
default slot | same as thead | - |
Name | Description | Default Content |
---|---|---|
default slot | same as tbody | - |
Name | Description | Default Content |
---|---|---|
default slot | html header content | - |
Name | Description | Default Content |
---|---|---|
default slot | html data content | - |
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.
Hi @muratcorlu, Is there any progress for this component ? I can't find this component
We haven't talked about and decided on a start date.
We edited ADR for this component, and last ADR is as follows:
<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>
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 |
Properties
Property | Description | Default Value |
---|---|---|
sticky (boolean ) |
Sets table header as sticky | false |
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 |
Properties
Property | Description | Default Value |
---|---|---|
disable-selection (boolean ) |
Sets table row selection checkbox as disable state. | false |
We're all set! Please ensure we maintain regular communication as you begin the implementation process.
:tada: This issue has been resolved in version 3.0.0-beta.4 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This issue has been resolved in version 3.1.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
Figma