@ebrains/components 2.4.0 → 3.0.0

package/dist/collection/components/eds-table/eds-table.js

@@ -1,14 +1,15 @@
 /**
  * <eds-table
       table-data='[
-        { "Property": "username", "Type": "string", "Required": "Yes" },
-        { "Property": "password", "Type": "string", "Required": "Yes" },
-        { "Property": "email", "Type": "string", "Required": "No" }
+        { "Property": "username", "Type": "string", "Required": "Yes", "Docs": "<a href=\"/docs\">View Docs</a>" },
+        { "Property": "password", "Type": "string", "Required": "Yes", "Docs": "<a href=\"/docs\">View Docs</a>" },
+        { "Property": "email", "Type": "string", "Required": "No", "Docs": "<a href=\"/docs\">View Docs</a>" }
       ]'
       config='{
         "Type": { "format": "uppercase" },
         "Property": { "format": "code" },
-        "Required": { "hidden": true }
+        "Required": { "hidden": true },
+        "Docs": { "format": "html" }
       }'
       actions='[
         { "name": "view",  "label": "View"  },
@@ -33,10 +34,17 @@ import { parseData } from "../../utils/sharedUtils";
  * `EdsTable` is a customizable data table component with support for dynamic data fetching, column configuration, pagination, and search functionality.
  *
  * Key Features:
- * - Configurable columns with options to hide or apply text formatting (uppercase, bold, or code).
+ * - Configurable columns with options to hide or apply text formatting (uppercase, bold, code, or html).
  * - Pagination support with adjustable rows per page.
  * - Searchable content for easier data filtering.
  *
+ * Column Format Options:
+ * - 'uppercase': Converts text to uppercase
+ * - 'bold': Wraps text in <strong> tag
+ * - 'code': Wraps text in <code> tag
+ * - 'html': Renders raw HTML content (use for web components, links, etc.)
+ * - 'svg': (deprecated, use 'html') Renders raw HTML content
+ *
  * This component is versatile for displaying data with flexible configuration, and integrates with pagination and search functionalities.
  */
 export class EdsTable {
@@ -88,6 +96,17 @@ export class EdsTable {
                 action: this.sortDirection
             });
         };
+        this.handleViewChange = (event) => {
+            this.view = event.detail.value ? 'card' : 'table';
+            this.viewchange.emit({ view: this.view });
+            sendAnalytics({
+                category: 'ui-component',
+                parentContext: null,
+                tag: `${this.hostEl.tagName.toLowerCase()}/view-toggle`,
+                name: this.view,
+                action: 'view-change'
+            });
+        };
         this.data = null;
         this.config = {};
         this.rowsPerPage = 10;
@@ -99,6 +118,8 @@ export class EdsTable {
         this.actionTemplate = undefined;
         this.sortingEnabled = false;
         this.theme = 'color';
+        this.view = 'table';
+        this.showViewToggle = false;
         this.parsedActions = [];
         this.dataColumns = [];
         this.tbData = [];
@@ -214,7 +235,8 @@ export class EdsTable {
     renderCell(value, column) {
         var _a;
         const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
-        return format === 'uppercase' ? (value === null || value === void 0 ? void 0 : value.toString().toUpperCase()) : format === 'svg' ? (h("div", { innerHTML: value })) : format === 'bold' ? (h("strong", null, value)) : format === 'code' ? (h("code", null, value)) : (value);
+        return format === 'uppercase' ? (value === null || value === void 0 ? void 0 : value.toString().toUpperCase()) : format === 'html' || format === 'svg' ? ( // 'svg' is deprecated, use 'html'
+        h("div", { innerHTML: value })) : format === 'bold' ? (h("strong", null, value)) : format === 'code' ? (h("code", null, value)) : (value);
     }
     /**
      * Renders one action (button or checkbox) for a specific action‐name.
@@ -234,7 +256,10 @@ export class EdsTable {
         }
         // Let all action buttons be focusable naturally
         const showLabel = act.showLabel === true;
-        const btn = (h("eds-button", { icon: act.icon, label: showLabel ? act.label : null, iconPos: "left", pill: true, size: "small", intent: "ghost", tabIndex: 0, onClick: () => this.emitAction(act.name, row) }));
+        const isBrandTheme = this.theme === 'brand';
+        // Use custom intent if provided, otherwise fall back to theme-based default
+        const buttonIntent = act.intent || (isBrandTheme ? 'primary' : 'ghost');
+        const btn = (h("eds-button", { icon: act.icon, label: showLabel ? act.label : null, iconPos: act.pos || 'left', pill: true, size: "small", intent: buttonIntent, tabIndex: 0, onClick: () => this.emitAction(act.name, row) }));
         return showLabel ? btn : h("eds-tooltip", { content: act.label }, btn);
     }
     emitAction(actionName, row, checked) {
@@ -254,7 +279,7 @@ export class EdsTable {
         var _a, _b;
         // Grab all data‐keys from the first row (if any) as before:
         this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
-        // Instead of pushing each action.name, add just a single “actions” column
+        // Instead of pushing each action.name, add just a single "actions" column
         if (((_b = (_a = this.parsedActions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 && this.tbData.length > 0) {
             this.columns.push('actions');
         }
@@ -301,41 +326,48 @@ export class EdsTable {
             return this.sortDirection === 'asc' ? comparison : -comparison;
         });
     }
-    render() {
-        const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
-        const visibleColumnsCount = this.getVisibleColumnsCount();
+    renderCardView(rows) {
+        // Get data columns (exclude 'actions' column)
+        const dataColumns = this.columns.filter((col) => { var _a; return col !== 'actions' && !((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden); });
+        return (h("div", { class: "card-grid" }, rows.map((row) => (h("div", { class: "data-card" }, h("div", { class: "card-content" }, dataColumns.map((col) => (h("div", { class: "card-field" }, h("span", { class: "card-label" }, this.capitalize(col)), h("span", { class: "card-value" }, this.renderCell(row[col], col)))))), this.parsedActions.length > 0 && (h("div", { class: "card-actions" }, this.parsedActions.map((act) => (h("span", null, this.renderSingleActionCell(act.name, row)))))))))));
+    }
+    renderTableView(paginatedRows, currentContainerWidth, visibleColumnsCount) {
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
-        const paginatedRows = this.getPaginatedRows();
-        const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        return (h("div", { key: '0601cea60a05d044a717219e6ff6385ef915defa' }, this.searchEnabled && (h("div", { key: 'de1affaf192dc5e63b16d534d2f518c206ab7010' }, h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), h("div", { key: '49f71b5a2481d719cb8fe0547f05a5ae83ad5541', class: "mt-20" }, h("table", { key: 'b63ca6615ed681c741fb2d3ff2675f9cc061d194', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '817b534cca3c2492b69b3816a41b54ec850847ab' }, h("tr", { key: '6cb8735ac56c3fe2acc4a257815bc0d07009118c', class: `m-0 p-0 border border-softer table-row-${this.theme}` }, this.columns.map((col) => {
-            var _a;
+        return (h("div", { class: `mt-20 ${this.theme === 'brand' ? 'brand-table-wrapper' : ''}` }, h("table", { class: `${this.theme === 'brand' ? '' : 'block overflow-x-auto'} mt-6 p-0 ${this.theme === 'brand' ? 'brand-table' : ''}` }, h("thead", { class: this.theme === 'brand' ? 'brand-thead' : '' }, h("tr", { class: `m-0 p-0 border border-softer table-row-${this.theme} ${this.theme === 'brand' ? 'brand-header-row' : ''}` }, this.columns
+            .filter((col) => { var _a; return col === 'actions' || !((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden); })
+            .map((col) => {
             if (col === 'actions') {
-                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }));
-            }
-            if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
-                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, h("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.25rem' } }, h("span", null, this.capitalize(col)), this.sortingEnabled && (h("eds-icon-wrapper", { icon: this.sortColumn === col
-                        ? this.sortDirection === 'asc'
-                            ? 'chevron-up'
-                            : 'chevron-down'
-                        : 'chevron-down', "aria-label": `Sort by ${col}`, onClick: () => this.handleSort(col), style: { cursor: 'pointer' } })))));
+                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: this.theme === 'brand' ? {} : { minWidth: `${columnWidth - 4}px` } }));
             }
-            return null;
-        }))), h("tbody", { key: '3c8630ed1f47720688bfcdb78c5dbfc84cb238cf' }, paginatedRows.map((row) => (h("tr", { class: `m-0 p-0 border border-softer table-row-${this.theme}` }, this.columns.map((col) => {
-            var _a;
+            return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: this.theme === 'brand' ? {} : { minWidth: `${columnWidth - 4}px` } }, h("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.25rem' } }, h("span", null, this.capitalize(col)), this.sortingEnabled && (h("eds-icon-wrapper", { name: this.sortColumn === col
+                    ? this.sortDirection === 'asc'
+                        ? 'chevron-up'
+                        : 'chevron-down'
+                    : 'chevron-down', "aria-label": `Sort by ${col}`, onClick: () => this.handleSort(col), style: { cursor: 'pointer' } })))));
+        }))), h("tbody", null, paginatedRows.map((row) => (h("tr", { class: `m-0 p-0 border border-softer table-row-${this.theme} ${this.theme === 'brand' ? 'brand-row' : ''}` }, this.columns
+            .filter((col) => { var _a; return col === 'actions' || !((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden); })
+            .map((col) => {
             if (col === 'actions') {
-                return (h("td", { class: "text-center border border-softer m-0 f-ui-02 break-words actions-cell", style: { minWidth: `${columnWidth - 4}px` } }, h("div", { role: "toolbar", "aria-label": "Row actions", onKeyDown: this.onActionKeyDown, style: {
+                return (h("td", { class: "text-center border border-softer m-0 f-ui-01 break-words actions-cell", style: this.theme === 'brand' ? {} : { minWidth: `${columnWidth - 4}px` } }, h("div", { role: "toolbar", "aria-label": "Row actions", onKeyDown: this.onActionKeyDown, style: {
                         display: 'flex',
                         gap: '0.5rem',
                         justifyContent: 'center',
                         flexWrap: 'wrap'
                     } }, this.parsedActions.map((act) => (h("span", { style: { whiteSpace: 'nowrap' } }, this.renderSingleActionCell(act.name, row)))))));
             }
-            if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
-                // Regular data cell
-                return (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[col], col)));
-            }
-            return null;
-        }))))))), this.shouldEnablePagination() && (h("div", { key: '09faef418edc676bb2b60c2439e0652a92fe023d', class: "mt-20" }, h("eds-pagination", { key: '9403d33a37505c73fe3bec652ef93f533bdb4f03', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+            // Regular data cell
+            return (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-02 break-words", style: this.theme === 'brand' ? {} : { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[col], col)));
+        }))))))));
+    }
+    render() {
+        const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
+        const visibleColumnsCount = this.getVisibleColumnsCount();
+        const paginatedRows = this.getPaginatedRows();
+        const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
+        const showControls = this.showViewToggle || this.searchEnabled;
+        return (h("div", { key: 'ca547566767c7bccd7b894dad5819ed74e9e281d' }, showControls && (h("div", { key: '47c6fa14c2dbe499617dc31df1fd578bde473c6f', class: "controls-container flex-col flex-md-row items-start items-md-center justify-between gap-16 mb-16" }, this.showViewToggle && (h("div", { key: '7f63fd07e67eaca9abc9d0700d7824e0f474dc23', class: "view-toggle-wrapper" }, h("eds-switch", { key: 'f52b744b0e83295c1641f338212bae5843970ab9', variant: "segmented", labelOff: "Table View", labelOn: "Card View", checked: this.view === 'card', onUiswitch: this.handleViewChange }))), this.searchEnabled && (h("div", { key: '5ebb3620be6161a1d7e1881cb5d33f5aac2e12a4', class: `search-wrapper w-full ${this.showViewToggle ? 'w-md-400' : ''}` }, h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))))), this.view === 'card'
+            ? this.renderCardView(paginatedRows)
+            : this.renderTableView(paginatedRows, currentContainerWidth, visibleColumnsCount), this.shouldEnablePagination() && (h("div", { key: 'bed5232d5ff9d7cac22ac2537876a388f35c85a6', class: "mt-20" }, h("eds-pagination", { key: 'ec91525689028f6cfe2721e290f5c5c7097ab67a', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     static get is() { return "eds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -373,8 +405,8 @@ export class EdsTable {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "| string\n    | {\n        [key: string]: {\n          hidden?: boolean;\n          format?: 'uppercase' | 'bold' | 'code';\n        };\n      }",
-                    "resolved": "string | { [key: string]: { hidden?: boolean; format?: \"bold\" | \"code\" | \"uppercase\"; }; }",
+                    "original": "| string\n    | {\n        [key: string]: {\n          hidden?: boolean;\n          format?: 'uppercase' | 'bold' | 'code' | 'html' | 'svg';\n        };\n      }",
+                    "resolved": "string | { [key: string]: { hidden?: boolean; format?: \"code\" | \"bold\" | \"html\" | \"svg\" | \"uppercase\"; }; }",
                     "references": {}
                 },
                 "required": false,
@@ -485,7 +517,7 @@ export class EdsTable {
                     "references": {
                         "TableAction": {
                             "location": "local",
-                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-table/eds-table.tsx",
+                            "path": "/Users/nikolaosgeorgomanolis/Documents/EBRAINS/Projects/ebrains-ui-ecosystem/packages/components/src/components/eds-table/eds-table.tsx",
                             "id": "../../../packages/components/src/components/eds-table/eds-table.tsx::TableAction"
                         }
                     }
@@ -494,7 +526,7 @@ export class EdsTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Array of actions to render in each row. Can be passed as a JSON string or as a `TableAction[]`.\n\nEach action object may include:\n - `name`       (string; required)  \u2014 unique action key, e.g. `\"view\"`, `\"delete\"`.\n - `label`      (string; required)  \u2014 text shown on the button, or used as the tooltip/aria-label when icon-only.\n - `type`       (\"button\" | \"checkbox\"; optional) \u2014 whether to render a standard button (default) or a checkbox.\n - `icon`       (string; optional)  \u2014 name of the icon to display in icon-only mode.\n - `field`      (string; optional)  \u2014 for checkboxes, the row field whose truthiness binds the checked state (defaults to `name`).\n - `showLabel`  (boolean; optional) \u2014 if `true`, render the full `label` instead of an icon + tooltip.\n\nWhen you pass JSON, make sure field names match exactly:\n```html\nactions='[\n  { \"name\":\"view\",  \"label\":\"View\",  \"icon\":\"eye\" },\n  { \"name\":\"edit\",  \"label\":\"Edit\",  \"icon\":\"pencil\", \"showLabel\":true },\n  { \"name\":\"del\",   \"label\":\"Delete\",\"type\":\"checkbox\", \"field\":\"selected\" }\n]'\n```"
+                    "text": "Array of actions to render in each row. Can be passed as a JSON string or as a `TableAction[]`.\n\nEach action object may include:\n - `name`       (string; required)  \u2014 unique action key, e.g. `\"view\"`, `\"delete\"`.\n - `label`      (string; required)  \u2014 text shown on the button, or used as the tooltip/aria-label when icon-only.\n - `type`       (\"button\" | \"checkbox\"; optional) \u2014 whether to render a standard button (default) or a checkbox.\n - `icon`       (string; optional)  \u2014 name of the icon to display in icon-only mode.\n - `field`      (string; optional)  \u2014 for checkboxes, the row field whose truthiness binds the checked state (defaults to `name`).\n - `showLabel`  (boolean; optional) \u2014 if `true`, render the full `label` instead of an icon + tooltip.\n - `intent`     (\"brand\" | \"primary\" | \"secondary\" | \"neutral\" | \"ghost\" | \"brandInverse\" | \"secondaryInverse\" | \"ghostInverse\"; optional) \u2014 button intent/style.\n\nWhen you pass JSON, make sure field names match exactly:\n```html\nactions='[\n  { \"name\":\"view\",  \"label\":\"View\",  \"icon\":\"eye\", \"intent\":\"brand\" },\n  { \"name\":\"edit\",  \"label\":\"Edit\",  \"icon\":\"pencil\", \"showLabel\":true, \"intent\":\"primary\" },\n  { \"name\":\"del\",   \"label\":\"Delete\",\"type\":\"checkbox\", \"field\":\"selected\" }\n]'\n```"
                 },
                 "attribute": "actions",
                 "reflect": false,
@@ -543,19 +575,55 @@ export class EdsTable {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'color'",
-                    "resolved": "\"color\" | \"default\"",
+                    "original": "'default' | 'color' | 'brand'",
+                    "resolved": "\"brand\" | \"color\" | \"default\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Theme for table styling - 'default' or 'color' for alternating row colors"
+                    "text": "Theme for table styling:\n- 'default': Simple rows with no background\n- 'color': Alternating row colors\n- 'brand': Modern brand styling with hover effects and green accents"
                 },
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "'color'"
+            },
+            "view": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'table' | 'card'",
+                    "resolved": "\"card\" | \"table\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "View mode for displaying data:\n- 'table': Traditional table layout (default)\n- 'card': Card grid layout"
+                },
+                "attribute": "view",
+                "reflect": false,
+                "defaultValue": "'table'"
+            },
+            "showViewToggle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show view toggle control (segmented switch for Table/Card views)"
+                },
+                "attribute": "show-view-toggle",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -590,6 +658,21 @@ export class EdsTable {
                     "resolved": "{ action: string; row: any; checked: boolean; }",
                     "references": {}
                 }
+            }, {
+                "method": "viewchange",
+                "name": "viewchange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when view mode changes"
+                },
+                "complexType": {
+                    "original": "{ view: 'table' | 'card' }",
+                    "resolved": "{ view: \"card\" | \"table\"; }",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "hostEl"; }

package/dist/collection/components/eds-table/eds-table.stories.js

@@ -1,5 +1,3 @@
-import { html } from "lit-html";
-import { action } from "@storybook/addon-actions";
 export default {
     title: 'Components/Table',
     component: 'eds-table',
@@ -24,7 +22,29 @@ export default {
             control: { type: 'boolean' },
             description: 'Enable search input for filtering'
         },
-        columnSize: { control: 'select', options: ['default', 'medium', 'large'] },
+        sortingEnabled: {
+            control: { type: 'boolean' },
+            description: 'Enable column sorting'
+        },
+        columnSize: {
+            control: 'select',
+            options: ['default', 'medium', 'large'],
+            description: 'Column sizing mode'
+        },
+        theme: {
+            control: 'select',
+            options: ['default', 'color', 'brand'],
+            description: 'Table theme: default (no bg), color (alternating rows), brand (modern with hover/accents)'
+        },
+        view: {
+            control: 'select',
+            options: ['table', 'card'],
+            description: 'View mode: traditional table or card grid layout'
+        },
+        showViewToggle: {
+            control: { type: 'boolean' },
+            description: 'Show segmented switch to toggle between Table and Card view'
+        },
         actions: {
             control: 'object',
             description: 'Array of row‐action definitions'
@@ -44,10 +64,13 @@ export default {
         rowsPerPage: 5,
         paginationEnabled: true,
         searchEnabled: true,
+        sortingEnabled: false,
         columnSize: 'default',
+        theme: 'color',
+        view: 'table',
+        showViewToggle: false,
         actions: [
-            { name: 'view', label: 'View' },
-            { name: 'edit', label: 'Edit' }
+            { name: 'view', label: 'View' }
         ]
     }
 };
@@ -64,19 +87,6 @@ const sampleData = [
     { name: 'Ian', age: 27, occupation: 'Developer' },
     { name: 'Jackie', age: 33, occupation: 'Consultant' }
 ];
-// 1) Define Template *first*
-const Template = (args) => html `
-  <eds-table
-    table-data="${JSON.stringify(args.data)}"
-    config="${JSON.stringify(args.config)}"
-    rows-per-page="${args.rowsPerPage}"
-    pagination-enabled="${args.paginationEnabled}"
-    search-enabled="${args.searchEnabled}"
-    column-size="${args.columnSize}"
-    actions="${JSON.stringify(args.actions)}"
-    @rowaction=${(e) => action('rowaction')(e.detail)}
-  ></eds-table>
-`;
 export const Default = {
     render: (args) => `
     <eds-table
@@ -85,7 +95,11 @@ export const Default = {
       rows-per-page="${args.rowsPerPage}"
       pagination-enabled="${args.paginationEnabled}"
       search-enabled="${args.searchEnabled}"
+      sorting-enabled="${args.sortingEnabled}"
       column-size="${args.columnSize}"
+      theme="${args.theme}"
+      view="${args.view}"
+      show-view-toggle="${args.showViewToggle}"
     ></eds-table>
   `,
     args: {
@@ -97,21 +111,105 @@ export const Default = {
         rowsPerPage: 5,
         paginationEnabled: true,
         searchEnabled: true,
-        columnSize: 'default'
+        sortingEnabled: false,
+        columnSize: 'default',
+        theme: 'color',
+        view: 'table',
+        showViewToggle: false
+    }
+};
+export const BrandTheme = {
+    render: (args) => `
+    <eds-table
+      table-data='${JSON.stringify(args.data)}'
+      config='${JSON.stringify(args.config)}'
+      rows-per-page="${args.rowsPerPage}"
+      pagination-enabled="${args.paginationEnabled}"
+      search-enabled="${args.searchEnabled}"
+      sorting-enabled="${args.sortingEnabled}"
+      theme="brand"
+      actions='${JSON.stringify(args.actions)}'
+    ></eds-table>
+  `,
+    args: {
+        data: sampleData,
+        config: {
+            name: { format: 'bold' },
+            occupation: { format: 'uppercase' }
+        },
+        rowsPerPage: 5,
+        paginationEnabled: true,
+        searchEnabled: true,
+        sortingEnabled: true,
+        actions: [
+            { name: 'view', label: 'View', icon: 'view', intent: 'brand' }
+        ]
+    }
+};
+export const DefaultTheme = {
+    render: (args) => `
+    <eds-table
+      table-data='${JSON.stringify(args.data)}'
+      config='${JSON.stringify(args.config)}'
+      rows-per-page="${args.rowsPerPage}"
+      theme="default"
+    ></eds-table>
+  `,
+    args: {
+        data: sampleData,
+        config: {
+            name: { format: 'bold' }
+        },
+        rowsPerPage: 10
     }
 };
-export const WithActions = {
-    render: (args) => html `
-    <div>
-      ${Template(args)}
-      <div style="margin-top: 1rem; padding: 1rem; background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 4px;">
-        Click a “View” or “Edit” to fire the <code>rowaction</code> event. See the Storybook “Actions” tab for full
-        event details and payloads.
-      </div>
-    </div>
+export const CardView = {
+    render: (args) => `
+    <eds-table
+      table-data='${JSON.stringify(args.data)}'
+      config='${JSON.stringify(args.config)}'
+      rows-per-page="${args.rowsPerPage}"
+      view="card"
+      show-view-toggle="true"
+      theme="${args.theme}"
+      actions='${JSON.stringify(args.actions)}'
+    ></eds-table>
   `,
-    args: Object.assign(Object.assign({}, Default.args), { actions: [
-            { name: 'view', label: 'View', icon: 'view' },
-            { name: 'edit', label: 'Edit' }
-        ] })
+    args: {
+        data: sampleData,
+        config: {
+            name: { format: 'bold' }
+        },
+        rowsPerPage: 6,
+        theme: 'brand',
+        actions: [
+            { name: 'view', label: 'View', showLabel: true, intent: 'brand' }
+        ]
+    }
+};
+export const WithViewToggle = {
+    render: (args) => `
+    <eds-table
+      table-data='${JSON.stringify(args.data)}'
+      config='${JSON.stringify(args.config)}'
+      rows-per-page="${args.rowsPerPage}"
+      search-enabled="true"
+      show-view-toggle="true"
+      sorting-enabled="true"
+      theme="brand"
+      actions='${JSON.stringify(args.actions)}'
+    ></eds-table>
+  `,
+    args: {
+        data: sampleData,
+        config: {
+            name: { format: 'bold' },
+            occupation: { format: 'uppercase' }
+        },
+        rowsPerPage: 5,
+        actions: [
+            { name: 'view', label: 'View', icon: 'view', intent: 'brand' },
+            { name: 'delete', label: 'Delete', type: 'checkbox' }
+        ]
+    }
 };