feat: table component

* feat: Remove console log in story * feat: Change map to foreach for querySelectorAll * feat: Change story title to Table
Trendyol · Jan 31, 2024 · bcd17df · bcd17df
1 parent 107b9cb
commit bcd17df
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 31 deletions.
diff --git a/src/components/table/bl-table.stories.mdx b/src/components/table/bl-table.stories.mdx
@@ -3,7 +3,7 @@ import {Meta, Canvas, ArgsTable, Story} from '@storybook/addon-docs';
 import { UPDATE_STORY_ARGS } from "@storybook/core-events";
 
 <Meta
-		title="Components/Table/bl-table"
+		title="Components/Table/Table"
 		component="bl-table"
 		argTypes={{
 			headers: {
@@ -29,7 +29,6 @@ export const TableTemplate = (args, {id}) => {
   const tableData = sortedData || data;
 	const onSort = (event) => {
 		const [sortKey, sortDirection] = event.detail;
-		console.log("onSort", event.detail);
     const columnType = sortKey==="id" ? "number" : "string";
 		updateArgs({
 			...args,
@@ -48,7 +47,6 @@ export const TableTemplate = (args, {id}) => {
 		});
 	}
 	const onRowSelect = (event) => {
-		console.log("onRowSelect", event.detail);
 		updateArgs({
 			...args,
 			selectValue: event.detail,
@@ -59,11 +57,11 @@ export const TableTemplate = (args, {id}) => {
       <div style="height: 400px;">
           <bl-table
                   select-value=${JSON.stringify(selectValue)}
-                  ?selectable=${true}
-                  ?multiple=${true}
-                  ?sortable=${true}
-                  ?sticky-first-column=${true}
-                  ?sticky-last-column=${true}
+                  ?selectable=${args.selectable}
+                  ?multiple=${args.multiple}
+                  ?sortable=${args.sortable}
+                  ?sticky-first-column=${args.stickyFirstColumn}
+                  ?sticky-last-column=${args.stickyLastColumn}
                   @bl-table-sort=${onSort}
                   @bl-table-row-select=${onRowSelect}
           >
@@ -103,11 +101,15 @@ export const TableTemplate = (args, {id}) => {
 
 # Table Component
 
-Checkbox Group is a component to take multiple selections from user with a list of options. It needs to be used with `bl-checkbox` component.
-If you set a list of `values`, options with those values will be selected.
+Table is a component to visualize a data set in rows and columns. It needs to be used with `bl-table-header`, `bl-table-body`, `bl-table-row`, `bl-table-header-cell`, `bl-table-cell` component.
 
 <Canvas>
   <Story name="Basic Usage" args={{
+    selectable: true,
+    multiple: true,
+    sortable: true,
+    stickyFirstColumn: true,
+    stickyLastColumn: true,
     headers: [
       {key: "id", sortKey: "id", text: "ID", minWidth: '100px', sticky:'left'},
       {key: "first_name", sortKey: "first_name", text: "First Name", minWidth: "100px"},
@@ -147,6 +149,10 @@ If you set a list of `values`, options with those values will be selected.
 	    {id:20,first_name:"Almire",last_name:"Slinn",email:"aslinnj@wiley.com",gender:"Female",ip_address:"195.56.102.224"},
     ],
     stickyHeader:true
+  }} argTypes={{
+    headers: {table: {disable: true}},
+    data: {table: {disable: true}},
+    rows: {table: {disable: true}}
   }}>
     {TableTemplate.bind({})}
   </Story>

diff --git a/src/components/table/bl-table.ts b/src/components/table/bl-table.ts
@@ -1,4 +1,4 @@
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import "element-internals-polyfill";
 import { event, EventDispatcher } from "../../utilities/event";
@@ -14,7 +14,7 @@ export const blRowSelectChangeEventName = "bl-table-row-select";
 
 /**
  * @tag bl-table
- * @summary Baklava Button component
+ * @summary Baklava Table component
  *
  */
 @customElement(blTableTag)
@@ -33,11 +33,9 @@ export default class BlTable extends LitElement {
   set selectValue(value: string[]) {
     this._selectValue = value;
     this.updateComplete.then(() => {
-      Array.from(this.querySelectorAll("bl-table-header-cell,bl-table-cell,bl-table-row")).map(
-        com => {
-          (com as BlTableHeaderCell | BlTableCell | BlTableRow).requestUpdate();
-        }
-      );
+      this.querySelectorAll("bl-table-header-cell,bl-table-cell,bl-table-row").forEach(com => {
+        (com as BlTableHeaderCell | BlTableCell | BlTableRow).requestUpdate();
+      });
     });
   }
 
@@ -107,6 +105,20 @@ export default class BlTable extends LitElement {
 
   @state() private _sortDirection: string = "";
 
+  protected updated(_changedProperties: PropertyValues) {
+    if (
+      _changedProperties.has("selectable") ||
+      _changedProperties.has("multiple") ||
+      _changedProperties.has("stickyFirstColumn") ||
+      _changedProperties.has("stickyLastColumn") ||
+      _changedProperties.has("sortable")
+    ) {
+      this.querySelectorAll("bl-table-header-cell,bl-table-cell,bl-table-row").forEach(com => {
+        (com as BlTableHeaderCell | BlTableCell | BlTableRow).requestUpdate();
+      });
+    }
+  }
+
   get tableRows() {
     return this.querySelectorAll("bl-table-body bl-table-row");
   }
@@ -150,21 +162,29 @@ export default class BlTable extends LitElement {
     );
   }
 
+  changeHeaderCheckbox(selected: boolean) {
+    if (selected) {
+      this.selectValue = Array.from(this.tableRows)
+        .filter(tr => !(tr as BlTableRow).disabled)
+        .map(tr => (tr as BlTableRow).selectionKey);
+    } else {
+      this.selectValue = [];
+    }
+  }
+
+  changeRowCheckbox(selected: boolean, selectionKey: string) {
+    if (this.isRowSelected(selectionKey) && !selected) {
+      this.selectValue = this.selectValue.filter(v => v !== selectionKey);
+    } else if (!this.isRowSelected(selectionKey) && selected) {
+      this.selectValue = [...this.selectValue, selectionKey];
+    }
+  }
+
   onSelectionChange(isHeader = false, selected: boolean, selectionKey: string) {
     if (isHeader) {
-      if (selected) {
-        this.selectValue = Array.from(this.tableRows)
-          .filter(tr => !(tr as BlTableRow).disabled)
-          .map(tr => (tr as BlTableRow).selectionKey);
-      } else {
-        this.selectValue = [];
-      }
+      this.changeHeaderCheckbox(selected);
     } else {
-      if (this.selectValue.includes(selectionKey) && !selected) {
-        this.selectValue = this.selectValue.filter(v => v !== selectionKey);
-      } else if (!this.selectValue.includes(selectionKey) && selected) {
-        this.selectValue = [...this.selectValue, selectionKey];
-      }
+      this.changeRowCheckbox(selected, selectionKey);
     }
 
     this.onRowSelect(this.selectValue);
@@ -174,7 +194,7 @@ export default class BlTable extends LitElement {
     this._sortDirection = sortDirection;
     this.onSort([this.sortKey, this.sortDirection]);
     this.updateComplete.then(() => {
-      Array.from(this.querySelectorAll("bl-table-header-cell")).map(com => {
+      this.querySelectorAll("bl-table-header-cell").forEach(com => {
         (com as BlTableHeaderCell).requestUpdate();
       });
     });

diff --git a/src/components/table/table-cell/bl-table-cell.ts b/src/components/table/table-cell/bl-table-cell.ts
@@ -21,7 +21,7 @@ export default class BlTableCell extends LitElement {
    * Disable selection
    */
   @property({ type: Boolean, reflect: true, attribute: "disable-selection" })
-  disableSelection: boolean = false;
+  disableSelection = false;
 
   private get _table() {
     return this.closest("bl-table") ?? null;