docs(Table): [B2BDS-192] updated table docs and ADR to include colspa…

…n feature
otto-de · Nov 29, 2023 · ef5f4f8 · ef5f4f8
1 parent 2373ba3
commit ef5f4f8
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 5 deletions.
diff --git a/ADRs/007_Table_component.md b/ADRs/007_Table_component.md
@@ -1,6 +1,6 @@
 # 007. Table component
 
-Last update: 19.09.2022
+Last update: 29.11.2023
 
 ## Background
 
@@ -63,6 +63,9 @@ Challenges
 We decided for option two as the ability to pass children components is a must-have. Hopefully if that can be solved 
 in the future we may be able to have a table-data component that encapsulates better the table.
 
+The flexbox model is only adapted for tables that require the colspan feature as not all existing features (text truncation and expansion on hover, expanding column sizes) can be realized while applying flexbox. This also saves performance as dynamic
+calculation of cell width via JavaScript could be a performance issue in larger tables. 
+
 ### Note
 We implemented the table using shadow dom for consistency and to support slots, but most of the classes are 
 declared in the host elements meaning they live still in the light-dom and can be overwritten.

diff --git a/packages/core-components/src/components/table/stories.data.ts b/packages/core-components/src/components/table/stories.data.ts
@@ -32,7 +32,6 @@ export const longSampleData = {
     'Column 4',
     'Column 5',
     'Column 6',
-    'Column 7',
   ],
   rows: [
     [

diff --git a/packages/core-components/src/components/table/table.docs.mdx b/packages/core-components/src/components/table/table.docs.mdx
@@ -74,6 +74,23 @@ example, parent size is 400px, and text is truncated.
 <br />
 <hr />
 
+#### colspan
+
+If the table size is set to colspan, it will behave like an equal sized table. Additionally, a `colspan` property is available
+for individual `b2b-table-cell` or `b2b-table-header` elements that accepts any positive integer and allows you to set the cell
+size in relation to the number of cells in a row. Text will always wrap and never truncate in this case.
+
+```html
+<div id="parent" style="width: 500px">
+  <b2b-table size="colspan">
+    ...
+    <b2b-table-cell colspan="3">...</b2b-table-cell>
+  </b2b-table>
+</div>
+```
+
+<Canvas of={TableStories.ColspanTable} />
+
 ### b2b-table-rowgroup
 
 Rowgroup will let you group rows based on context: `header`, `body` or `footer`.
@@ -270,7 +287,7 @@ it will only go back to its unsorted state automatically, when the user clicks o
 </b2b-table>
 ```
 
-## Events
+#### Events
 
 When the user interacts with sorting, the `b2b-table` will emit a `b2b-sort-change` event that will contain
 information about the sorted header and the direction selected. You can provide the property `sort-id` to the
@@ -443,7 +460,7 @@ _Vue Notation_
 </b2b-table>
 ```
 
-### Sizing
+## Sizing
 
 ### Fixed cell width
 

diff --git a/packages/core-components/src/components/table/table.stories.tsx b/packages/core-components/src/components/table/table.stories.tsx
@@ -49,6 +49,12 @@ const meta: Meta = {
     parentWidth: { table: { disable: true } },
     firstColumnWidth: { table: { disable: true } },
     firstRowHeight: { table: { disable: true } },
+    colspan: { table: { disable: true } },
+    divider: { table: { disable: true } },
+    checked: { table: { disable: true } },
+    indeterminate: { table: { disable: true } },
+    fixed: { table: { disable: true } },
+    sortId: { table: { disable: true } },
   },
   render: ({ ...args }) => html`<div style="width: ${
     args.parentWidth
@@ -383,7 +389,7 @@ export const AccordionTable: Story = {
   </div>`,
 };
 
-export const Selectable: Story = {
+export const SelectableTable: Story = {
   args: {
     ...meta.args,
   },
@@ -444,3 +450,56 @@ export const Selectable: Story = {
     </b2b-table>
   </div>`,
 };
+
+export const ColspanTable: Story = {
+  args: {
+    ...meta.args,
+    size: 'colspan',
+    selectable: false,
+    withDividers: true,
+  },
+  render: ({ ...args }) => html`<div style="width: 500px">
+    <b2b-table size="${args.size}">
+      <b2b-table-rowgroup type="header" selectable="${args.selectable}">
+        <b2b-table-row>
+          <b2b-table-header divider="${args.withDividers}" colspan="2"
+            >2 Columns</b2b-table-header
+          >
+          <b2b-table-header divider="${args.withDividers}"
+            >1 Column</b2b-table-header
+          >
+          <b2b-table-header>1 Column</b2b-table-header>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" selectable="${args.selectable}">
+        <b2b-table-row>
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell colspan="3">3 Columns</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row>
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell>1 Column</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row>
+          <b2b-table-cell divider="${args.withDividers}" colspan="2"
+            >2 Columns</b2b-table-cell
+          >
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell>1 Column</b2b-table-cell>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+    </b2b-table>
+  </div>`,
+};