diff --git a/.storybook/resources/theme-ugly.css b/.storybook/resources/theme-ugly.css index 2e970b78b1..c3b1035e89 100644 --- a/.storybook/resources/theme-ugly.css +++ b/.storybook/resources/theme-ugly.css @@ -154,4 +154,5 @@ --sapContent_ContrastTextColor: blue; --sapButton_Background: powderblue; --sapButton_IconColor: pink; + --sapList_HeaderBackground: plum; } \ No newline at end of file diff --git a/docs/pages/components/table.md b/docs/pages/components/table.md index cdfe164c0f..a4dce940bc 100644 --- a/docs/pages/components/table.md +++ b/docs/pages/components/table.md @@ -9,19 +9,24 @@ folder: components tags: [development] --- -> **UNDER REVIEW**. This component is under review. A new version will be implemented soon. -{: .docs-intro} A table is a set of tabular data. Line items can support data, images and actions. +{: .docs-intro}
## Default Table {% capture table-icon %} + + +
+

Default Table

+ +
- + @@ -30,29 +35,23 @@ A table is a set of tabular data. Line items can support data, images and action - - + + - - + + - - + + @@ -61,17 +60,189 @@ A table is a set of tabular data. Line items can support data, images and action {% endcapture %} {% include display-component.html component=table-icon %} -
+
+ +## Table Without Borders + +Both can be added to `fd-table`, `fd-table__header`, or `fd-table__body`. + +{% capture table-no-borders-icon %} +
+

Table Without Borders

+ +
+
Column Header Column Header Column Header Column Header
- user.name@email.comuser.name@email.com First NameMiddle Name Last Name 01/26/17
- user.name@email.comuser.name@email.com First NameMiddle Name Last Name 01/26/17
- user.name@email.comuser.name@email.com First NameMiddle Name Last Name 01/26/17
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Column HeaderColumn HeaderColumn HeaderColumn Header
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
-## Table with no borders +
+

Table Without Borders On Body

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Column HeaderColumn HeaderColumn HeaderColumn Header
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
+{% endcapture %} +{% include display-component.html component=table-no-borders-icon %} +
-`fd-table--no-borders` can be applied to render a table with no borders +## Table With Footer +Footer can be added by using `fd-table__footer` class with `tfoot` element. +It has to contain same size of columns as tbody and thead {% capture table-icon %} - +
+

Table With Footer Cozy Mode

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Column HeaderColumn HeaderColumn HeaderColumn Header
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
First NameLast Name
+ + +
+

Table With Footer Compact Mode

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Column HeaderColumn HeaderColumn HeaderColumn Header
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
First NameLast Name
+ + +
+

Table With Footer Condensed Mode

+ +
+ - @@ -80,156 +251,741 @@ A table is a set of tabular data. Line items can support data, images and action - - + - - + - - + + + + + + + + +
Column Header Column Header Column Header
- user.name@email.comuser.name@email.com First Name Last Name 01/26/17
- user.name@email.comuser.name@email.com First Name Last Name 01/26/17
- user.name@email.comuser.name@email.com First Name Last Name 01/26/17
First NameLast Name
+ + {% endcapture %} {% include display-component.html component=table-icon %}
-## Table with stripes +## Interactive Rows and Columns +Interactive states of columns and row can be set by adding + +{% capture table-icon %} -`fd-table--striped` can be applied to render a table with zebra stripes +
+

Interactive Table With Hoverable and Activable Cells and Rows

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Hovering AndClickingOn Header's CellWill TriggerColor Change
Clicking on any CellOn This RowWill causeHighlight of Whole Row01/26/17
Clicking On CellWill causeHighlight of cellLast Name01/26/17
Hovering On Any CellWill ChangeBackgroundOf CertainCell
Hovering On Any CellAnd cellsWill ChangeBackground of Whole Row01/26/17
+{% endcapture %} +{% include display-component.html component=table-icon %} -{% capture table-icon %} - +
+ + +## Table With Checkbox +The checkbox input can be used at the beginning of each row to allow for bulk actions. +It is recommended to add the parameter `aria-selected="true"` to the row that is selected. +Also for cells that include a checkbox should contain the `fd-table__cell--checkbox` class. + +{% capture table-checkbox %} + +
+

Table With Checkbox Cozy Mode

+ +
+
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Column HeaderColumn HeaderColumn HeaderColumn Header
+ + + user.name@email.comFirst NameLast Name01/26/17
+ + + user.name@email.comFirst NameLast Name01/26/17
+ + + user.name@email.comFirst NameLast Name01/26/17
+ + + +
+

Table With Checkbox Compact Mode

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Column Header Column Header Column Header Column Header
+ + + user.name@email.comFirst NameLast Name01/26/17
+ + + user.name@email.comFirst NameLast Name01/26/17
+ + + user.name@email.comFirst NameLast Name01/26/17
+ + + +
+

Table With Checkbox Condensed Mode

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Column HeaderColumn HeaderColumn HeaderColumn Header
+ + + user.name@email.comFirst NameLast Name01/26/17
+ + + user.name@email.comFirst NameLast Name01/26/17
+ + + user.name@email.comFirst NameLast Name01/26/17
+{% endcapture %} +{% include display-component.html component=table-checkbox %} + +
+ +## Table With Pagination + +{% capture table-pagination %} +
+

Table With Pagination at The Bottom

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusPriceCountry
Banana + + Available + + 5 EURIndia
Pineapple + + Out of stock + + 2 EURMexico
Orange + + Temporary unavailable + + 6 EURSpain
+
+ Showing 3 of 30 items + +
+{% endcapture %} +{% include display-component.html component=table-pagination %} +
+ +## Table With Advanced Toolbar +Advanced Toolbar can be used to customize table. Certain buttons trigger dialogs, where user can set some data. + +{% capture table-toolbar %} +
+ +
+
+ +
+
+

Table With Advanced Shellbar

+
+ + +
+ + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + +
NameStatusPriceCountry
- user.name@email.comFirst NameLast Name01/26/17Banana + + Available + + 5 EURIndia
- user.name@email.comFirst NameLast Name01/26/17Pineapple + + Out of stock + + 2 EURMexico
- user.name@email.comFirst NameLast Name01/26/17Orange + + Temporary unavailable + + 6 EURSpain
{% endcapture %} -{% include display-component.html component=table-icon %} +{% include display-component.html component=table-toolbar %}
-## Table with checkbox -The checkbox input can be used at the beginning of each row to allow for bulk actions. -It is recommended to add the parameter `aria-selected="true"` to the row that is selected. - -{% capture table-checkbox %} - +## Responsive Table +Responsive table is not that different than basic table, there should be used some modifiers, to remove borders. +For Pop-in example markup is changed, one row is transformed to 2 rows with `fd-table__row--main` and `fd-table__row--secondary` +modifiers. Also some cells should be merged into paragraphs. +{% capture table-responsive %} +
+

Responsive Table

+ +
+
- - - - - + + + + + - - - - - - + + + + + + + - - - - - + + + + + + - - - - - + + + + + +
- - + + + Column HeaderColumn HeaderColumn HeaderColumn HeaderNameStatusPriceCountry
- - - user.name@email.comFirst NameLast Name01/26/17
+ + + Banana + + Available + + 5 EURIndia + +
- - - user.name@email.comFirst NameLast Name01/26/17 + + + Pineapple + + Out of stock + + 2 EURMexico + +
- - - user.name@email.comFirst NameLast Name01/26/17 + + + Orange + + Temporary unavailable + + 6 EURSpain + +
+ +
+
+
+

Responsive Table - Pop-in mode

+ +
+ + + + + + + + + + + + + + + + + + + +
+

Banana

+

India

+ 		+ 5 EUR + + +
+

+ + + Available + +

+

+ + 12.01.12 +

+
+

Very long name for orange, which no one expected, forces text wrapping into another line.

+

Spain

+ 		+ 6 EUR + + +
+

+ + + Out of stock + +

+

+ + 12.01.12 +

+
+
+
+
+
+

Responsive Table - Pop-in Mode with Checkboxes and Navigation Indicator

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + +

Banana

+

India

+ 		+ 5 EUR + + +
+

+ + + Available + +

+

+ + 12.01.12 +

+
+ + + +

Very long name for orange, which no one expected, forces text wrapping into another line.

+

Spain

+ 		+ 6 EUR + + +
+

+ + + Out of stock + +

+

+ + 12.01.12 +

+
+
{% endcapture %} -{% include display-component.html component=table-checkbox %} +{% include display-component.html component=table-responsive %} -
+## Table With Semantic Row Highlighting +To show that an item needs attention, you can show a highlight indicator next to the item. This can be achieved by passing the `fd-table__cell--status-indicator` class to each row. +Other indicators such as semantic states and modes can be added using the `--valid`, `--information`, `--error`, `--warning`modifiers. -## Table with semantic row highlighting -Table rows support semantic row highlighting with the modifiers `fd-table__row--success`, `fd-table__row--warning`, `fd-table__row--error` and `fd-table__row--information` +{% capture table-highlight %} -{% capture table-checkbox %} +
+

Table with Semantic Rows

+ +
- + @@ -239,91 +995,100 @@ Table rows support semantic row highlighting with the modifiers `fd-table__row-- - - + + + - - - + + + + - + - - + + + - - - + + + + - + - - + + + - - - + + + + - + - - + + + - - - + + + + - + - - + + + @@ -331,15 +1096,75 @@ Table rows support semantic row highlighting with the modifiers `fd-table__row--
- - + + + Column Header Column Header
- - - user.name@email.com + + + user.name@email.com First Name Last Name 01/26/17
- - - user.name@email.com
+ + + user.name@email.com First Name Last Name01/26/1701/26/17
- - - user.name@email.com + + + user.name@email.com First Name Last Name 01/26/17
- - - user.name@email.com
+ + + user.name@email.com First Name Last Name01/26/1701/26/17
- - - user.name@email.com + + + user.name@email.com First Name Last Name 01/26/17
- - - user.name@email.com
+ + + user.name@email.com First Name Last Name01/26/1701/26/17
- - - user.name@email.com + + + user.name@email.com First Name Last Name 01/26/17
- - - user.name@email.com
+ + + user.name@email.com First Name Last Name01/26/1701/26/17
- - - user.name@email.com + + + user.name@email.com First Name Last Name 01/26/17
{% endcapture %} -{% include display-component.html component=table-checkbox %} +{% include display-component.html component=table-highlight %}
-## Table with Contextual Menu -When more than three actions exist per row and/or space doesn't allow for actions, -a contextual menu can be substituted in order to display all actions in one menu. + +{% capture table-merge-cells %} +To merge cells, the `--no-horizontal-border` or `--no-vertical-border` modifier should be added. +
+

Table with Merged Cells

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusPriceCountry
Banana + + Available + + 5 EURIndia
Pineapple + + Out of stock + + 2 EURMexico
Orange + + Temporary unavailable + + 6 EURSpain
+{% endcapture %} +{% include display-component.html component=table-merge-cells %} + +
+ +## Table With Contextual Menu +When more than three actions exist per row and/or there isn't enough space for the required actions, +a contextual menu can be substituted to display all actions in one menu. {% capture table-actions %} + + +
+

Table with Contextual Menu

+ +
@@ -351,35 +1176,30 @@ a contextual menu can be substituted in order to display all actions in one menu - + - - + - - + -
user.name@email.comuser.name@email.com First Name 01/26/17 +
- +
-
user.name@email.comuser.name@email.com First Name 01/26/17 +
- +
-
user.name@email.comuser.name@email.com First Name 01/26/17 +
- +
-