@infineon/infineon-design-system-stencil 30.1.1--canary.1496.ada7ab553a087bc3fb372b950494343ccb1df41e.0 → 30.1.1--canary.1640.e4770f238d16196b9059daf4898d2d6ef7cdcbdd.0

package/dist/collection/components/table-advanced-version/table.stories.js

@@ -82,51 +82,272 @@ export default {
         tableHeight: 'auto',
         pagination: false,
         paginationPageSize: 10,
-        currentPage: 1,
         rowHeight: 40,
         showLoading: false,
+        maxVisibleItemsOfList: 6,
+        filterNameOfFilterSearch: 'Search',
     },
     argTypes: {
         tableHeight: {
+            description: 'Set the height of the table. Example for fixed height: "400px".',
             table: {
+                defaultValue: { summary: 'auto' },
+                category: 'ifx-table props',
                 type: {
-                    summary: 'Options',
-                    detail: 'Default: "auto"\nExample for fixed height: "400px"',
+                    summary: 'String',
                 }
             },
         },
+        pagination: {
+            description: 'Add pagination to the table.',
+            table: {
+                category: 'ifx-table props',
+                defaultValue: { summary: true },
+                type: {
+                    summary: 'Boolean',
+                }
+            }
+        },
         paginationPageSize: {
-            description: "Results per page: minimum 10 - maximum 30",
-            control: { type: 'number', min: 10, max: 30, step: 10 }
+            description: "Set the number of results per page.",
+            control: { type: 'number', min: 10, max: 30, step: 10 },
+            table: {
+                category: 'ifx-table props',
+                defaultValue: { summary: 10 },
+                type: {
+                    summary: 'Details',
+                    detail: 'Minimum: 10\nMaximum: 30',
+                }
+            }
         },
         showLoading: {
+            description: 'Show loading spinner.',
             options: [true, false],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-table props',
+                defaultValue: { summary: false },
+                type: {
+                    summary: 'boolean',
+                }
+            }
         },
         rowHeight: {
+            description: 'Set the height of the rows.',
             options: ['compact', 'default'],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-table props',
+                defaultValue: { summary: 'default' },
+                type: {
+                    summary: 'Options',
+                    detail: 'Default: 40px\nCompact: 32px',
+                }
+            },
         },
         filterOrientation: {
+            description: 'Filter position options for the table.',
             options: ['sidebar', 'topbar', 'none'],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-table props',
+                defaultValue: { summary: 'sidebar' },
+                type: {
+                    summary: 'Options',
+                    detail: 'Sidebar: filter on the left side\nTopbar: filter on the top\nNone: no filter',
+                },
+            }
         },
         columnDefs: {
+            description: 'Column header options.',
             table: {
+                category: 'ifx-table props',
                 type: {
-                    summary: 'Column header options',
+                    summary: 'Options',
                     detail: 'Standard columns:\nheaderName: "Model", \nfield: "model", \nsortable: true (optional),\nsort: "desc" (optional) => descending sort (show icon)\nunSortIcon: true (optional) => unsorted (show icon)\n\nSpecial columns:\nheaderName: "",\nfield: "button"\nheaderName: "",\nfield: "link"',
                 },
             },
         },
         rowData: {
+            description: 'Row data options.',
             table: {
+                category: 'ifx-table props',
                 type: {
-                    summary: 'Row data options',
+                    summary: 'Options',
                     detail: 'Standard row values:\nmake: "Toyota", \nmodel: "Celica", \nprice: 35000 \n\nSpecial row values (incl buttons):\nmake: "Porsche",\nmodel: "Boxster",\nprice: "72000",\nbutton: { \ndisabled: false (optional),\nvariant: "outline" (optional)\nsize: "s" (optional),\ntext: "Button"\n...other ifx-button properties\n}',
                 },
             },
-        }
+        },
+        filterGroupName: {
+            description: 'Set the filter group name.',
+            control: { type: 'text' },
+            table: {
+                category: 'ifx-filter-accordion props',
+                type: {
+                    summary: 'String',
+                }
+            }
+        },
+        filterNameOfFilterSearch: {
+            name: 'filterName',
+            description: 'Set the filter name.',
+            control: { type: 'text' },
+            table: {
+                category: 'ifx-filter-search props',
+                type: {
+                    summary: 'String',
+                }
+            }
+        },
+        filterLabel: {
+            description: 'Set the filter label.',
+            control: { type: 'text' },
+            table: {
+                category: 'ifx-set-filter props',
+                type: {
+                    summary: 'String',
+                }
+            }
+        },
+        filterName: {
+            description: 'Set the filter name.',
+            control: { type: 'text' },
+            table: {
+                category: 'ifx-set-filter props',
+                type: {
+                    summary: 'String',
+                }
+            }
+        },
+        type: {
+            description: 'Set the type of filter.',
+            options: ['text', 'single-select', 'multi-select'],
+            control: { type: 'radio' },
+            table: {
+                defaultValue: { summary: 'text' },
+                category: 'ifx-set-filter props',
+                type: {
+                    summary: 'text | single-select | multi-select',
+                }
+            }
+        },
+        maxShownFilters: {
+            description: 'Set the maximum number of shown filters.',
+            control: { type: 'number' },
+            table: {
+                defaultValue: {
+                    summary: 4
+                },
+                category: 'ifx-filter-bar props',
+                type: {
+                    summary: 'Number',
+                }
+            }
+        },
+        typeOfList: {
+            name: 'type',
+            description: 'Set the type of list.',
+            control: { type: 'radio' },
+            table: {
+                category: 'ifx-list props',
+                defaultValue: { summary: 'checkbox' },
+                type: {
+                    summary: 'String',
+                },
+            }
+        },
+        maxVisibleItemsOfList: {
+            name: 'maxVisibleItems',
+            description: 'Set the maximum number of visible items in the list.',
+            control: { type: 'number' },
+            table: {
+                defaultValue: {
+                    summary: 6
+                },
+                category: 'ifx-list props',
+                type: {
+                    summary: 'Number',
+                }
+            }
+        },
+        labelOfListEntry: {
+            name: 'label',
+            description: 'Set the label of the list entry.',
+            control: { type: 'text' },
+            table: {
+                category: 'ifx-list-entry props',
+                type: {
+                    summary: 'String',
+                }
+            }
+        },
+        valueOfListEntry: {
+            name: 'value',
+            description: 'Set the value of the list entry.',
+            control: { type: 'boolean' },
+            table: {
+                category: 'ifx-list-entry props',
+                type: {
+                    summary: 'Boolean',
+                }
+            }
+        },
+        ifxSidebarFilterChange: {
+            description: 'Custom event emitted when the filter is changed in the sidebar.',
+            table: {
+                category: 'custom events',
+                type: {
+                    summary: 'Framework integration',
+                    detail: `
+          React: onIfxSidebarFilterChange={handleChange}
+          Vue: @ifxSidebarFilterChange="handleChange"
+          Angular: (ifxSidebarFilterChange)="handleChange()"
+          VanillaJs: .addEventListener("ifxSidebarFilterChange", (event) => {/*handle change*/});`
+                }
+            }
+        },
+        ifxFilterSearchChange: {
+            description: 'Custom event emitted when the filter search is changed.',
+            table: {
+                category: 'custom events',
+                type: {
+                    summary: 'Framework integration',
+                    detail: `
+          React: onIfxFilterSearchChange={handleChange}
+          Vue: @ifxFilterSearchChange="handleChange"
+          Angular: (ifxFilterSearchChange)="handleChange()"
+          VanillaJs: .addEventListener("ifxFilterSearchChange", (event) => {/*handle change*/});`
+                }
+            }
+        },
+        ifxFilterSelect: {
+            description: 'Custom event emitted when the filter is selected.',
+            table: {
+                category: 'custom events',
+                type: {
+                    summary: 'Framework integration',
+                    detail: `
+          React: onIfxFilterSelect={handleSelect}
+          Vue: @ifxFilterSelect="handleSelect"
+          Angular: (ifxFilterSelect)="handleSelect()"
+          VanillaJs: .addEventListener("ifxFilterSelect", (event) => {/*handle select*/});`
+                }
+            }
+        },
+        ifxFilterAccordionChange: {
+            description: 'Custom event emitted when the filter accordion is changed.',
+            table: {
+                category: 'custom events',
+                type: {
+                    summary: 'Framework integration',
+                    detail: `
+          React: onIfxFilterAccordionChange={handleChange}
+          Vue: @ifxFilterAccordionChange="handleChange"
+          Angular: (ifxFilterAccordionChange)="handleChange()"
+          VanillaJs: .addEventListener("ifxFilterAccordionChange", (event) => {/*handle change*/});`
+                }
+            }
+        },
     }
 };
 const DefaultTemplate = (args) => {
@@ -147,11 +368,11 @@ const DefaultTemplate = (args) => {
         const filterAccordions = args.columnDefs.map(column => {
             const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];
             const filterOptions = uniqueColValues.map((option, index) => {
-                return `<ifx-list-entry slot="slot${index}" label="${option}" value="false"></ifx-list-entry>`;
+                return `<ifx-list-entry slot="slot${index}" label="${option}" value="${args.valueOfListEntry}"></ifx-list-entry>`;
             }).join('');
             return `
       <ifx-filter-accordion slot="filter-accordion" filter-group-name="${column.field}">
-        <ifx-list slot="list" type="checkbox" name="${column.field}" max-visible-items="6">
+        <ifx-list slot="list" type="checkbox" name="${column.field}" max-visible-items="${args.maxVisibleItemsOfList}">
           ${filterOptions}
         </ifx-list>
       </ifx-filter-accordion>
@@ -172,7 +393,7 @@ const DefaultTemplate = (args) => {
             options='${optionsString}' 
             filter-label='${column.headerName}'
             filter-name='${column.field}'
-            type='multi-select'
+            type='${args.type}'
             search-enabled='true'>
           </ifx-set-filter>
           `;
@@ -185,7 +406,7 @@ const DefaultTemplate = (args) => {
         ${filterAccordions}
     </ifx-filter-type-group>`
             :
-                `<ifx-filter-bar slot="topbar-filter" max-shown-filters="3">
+                `<ifx-filter-bar slot="topbar-filter" max-shown-filters="${args.maxShownFilters}">
         <ifx-filter-search slot="filter-search" filter-orientation="topbar"></ifx-filter-search>
         ${filterComponents}
    </ifx-filter-bar>`;
@@ -197,6 +418,7 @@ const DefaultTemplate = (args) => {
     pagination="${args.pagination}"
     pagination-page-size="${args.paginationPageSize}"
     filter-orientation="${args.filterOrientation}">
+    
     ${filterTypeGroupComponent}
 </ifx-table>`;
         return table;
@@ -223,7 +445,7 @@ SidebarFilter.args = {
     rowHeight: 'default',
     columnDefs: columnDefs,
     rowData: rowData,
-    filterOrientation: 'sidebar'
+    filterOrientation: 'sidebar',
 };
 export const TopbarFilter = DefaultTemplate.bind({});
 TopbarFilter.args = {

package/dist/collection/components/table-advanced-version/table.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table-advanced-version/table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["//default\nconst columnDefs = [\n  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n  { headerName: 'Price', field: 'price' },\n  { headerName: 'Age', field: 'age' }\n];\n\n\n\nconst rowData = [\n  { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },\n  { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },\n  { make: 'Porsche', model: 'Boxster', price: 72000 },\n  { make: 'Bmw', model: 'x', price: 72000 },\n  { make: 'Mercedes', model: 'y', price: 72000 },\n  { make: 'Ferrari', model: 'z', price: 72000 },\n  { make: 'Chrysler', model: 'a', price: 72000 },\n  { make: 'Range rover', model: 'b', price: 72000 },\n  { make: 'Tesla', model: 'x', price: 72000 },\n  { make: 'Audi', model: '3', price: 72000 },\n  { make: 'Landrover', model: 'x', price: 72000 },\n];\n\n//table with button col\nconst columnDefsWithButtonCol = [\n  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n  { headerName: 'Price', field: 'price' },\n  { headerName: 'Age', field: 'age' },\n  { headerName: '', field: 'button' }\n];\n\nconst rowDataWithButtonCol = [\n  {\n    make: 'Toyota', model: 'Celica', price: 35000, age: 10, button: 'something about Toyota'\n  },\n  { make: 'Ford', model: 'Mondeo', price: 32000, age: 12, button: 'something about Ford' },\n  {\n    make: 'Porsche', model: 'Boxster', price: 72000, button: {\n      disabled: false,\n      variant: \"secondary\",\n      size: \"s\",\n      target: \"_blank\",\n      color: \"secondary\",\n      text: \"Button\"\n      // ... you can extend this as per the properties of `ifx-button`\n    }\n  }\n];\n\n\n\n//other example\n// const columnDefsDragAndDrop = [\n//   { valueGetter: '\"Drag\"', dndSource: true },\n//   { field: 'id' },\n//   { field: 'color' },\n//   { field: 'value1' },\n//   { field: 'value2' },\n// ];\n\n// var rowIdSequence = 100;\n// function getRowDataDragAndDrop() {\n//   var rowDataDragAndDrop = [];\n//   [\n//     'Red',\n//     'Green',\n//     'Blue',\n//     'Red',\n//     'Green',\n//     'Blue',\n//     'Red',\n//     'Green',\n//     'Blue',\n//   ].forEach(function (color) {\n//     var newDataItem = {\n//       id: rowIdSequence++,\n//       color: color,\n//       value1: Math.floor(Math.random() * 100),\n//       value2: Math.floor(Math.random() * 100),\n//     };\n//     rowDataDragAndDrop.push(newDataItem);\n//   });\n//   return rowDataDragAndDrop;\n// }\n\n\nexport default {\n  title: 'Components/Table (advanced)',\n  // tags: ['autodocs'],\n  args: {\n    tableHeight: 'auto',\n    pagination: false,\n    paginationPageSize: 10,\n    currentPage: 1,\n    rowHeight: 40,\n    showLoading: false,\n\n  },\n  argTypes: {\n    tableHeight: {\n      table: {\n        type: {\n          summary: 'Options',\n          detail: 'Default: \"auto\"\\nExample for fixed height: \"400px\"',\n        }\n      },\n    },\n    paginationPageSize: {\n      description: \"Results per page: minimum 10 - maximum 30\",\n      control: { type: 'number', min: 10, max: 30, step: 10 }\n    },\n    showLoading: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    rowHeight: {\n      options: ['compact', 'default'],\n      control: { type: 'radio' },\n    },\n    filterOrientation: {\n      options: ['sidebar', 'topbar', 'none'],\n      control: { type: 'radio' },\n    },\n    columnDefs: {\n      table: {\n        type: {\n          summary: 'Column header options',\n          detail: 'Standard columns:\\nheaderName: \"Model\", \\nfield: \"model\", \\nsortable: true (optional),\\nsort: \"desc\" (optional) => descending sort (show icon)\\nunSortIcon: true (optional) => unsorted (show icon)\\n\\nSpecial columns:\\nheaderName: \"\",\\nfield: \"button\"\\nheaderName: \"\",\\nfield: \"link\"',\n        },\n      },\n    },\n    rowData: {\n      table: {\n        type: {\n          summary: 'Row data options',\n          detail: 'Standard row values:\\nmake: \"Toyota\", \\nmodel: \"Celica\", \\nprice: 35000 \\n\\nSpecial row values (incl buttons):\\nmake: \"Porsche\",\\nmodel: \"Boxster\",\\nprice: \"72000\",\\nbutton: { \\ndisabled: false (optional),\\nvariant: \"outline\" (optional)\\nsize: \"s\" (optional),\\ntext: \"Button\"\\n...other ifx-button properties\\n}',\n        },\n      },\n    }\n  }\n};\n\n\n\nconst DefaultTemplate = (args) => {\n  if (args.filterOrientation === 'none') {\n    const table = `<ifx-table\n    row-height=\"${args.rowHeight}\"\n    cols='${JSON.stringify(args.columnDefs)}'\n    rows='${JSON.stringify(args.rowData)}'\n    table-height=\"${args.tableHeight}\"\n    pagination=\"${args.pagination}\"\n    pagination-page-size=\"${args.paginationPageSize}\"\n    filter-orientation=\"${args.filterOrientation}\">\n</ifx-table>`;\n    return table;\n  } else {\n    //sidebar\n    const filterAccordions = args.columnDefs.map(column => {\n      const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];\n      const filterOptions = uniqueColValues.map((option, index) => {\n        return `<ifx-list-entry slot=\"slot${index}\" label=\"${option}\" value=\"false\"></ifx-list-entry>`;\n      }).join('');\n\n      return `\n      <ifx-filter-accordion slot=\"filter-accordion\" filter-group-name=\"${column.field}\">\n        <ifx-list slot=\"list\" type=\"checkbox\" name=\"${column.field}\" max-visible-items=\"6\">\n          ${filterOptions}\n        </ifx-list>\n      </ifx-filter-accordion>\n    `;\n    }).join('');\n\n//topbar\nconst filterComponents = args.columnDefs.map((column, index) => {\n  const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];\n  const options = uniqueColValues.map(option => ({\n    value: option,\n    label: option,\n    selected: false\n  }));\n\n  // Directly use JSON.stringify without replacing quotes\n  const optionsString = JSON.stringify(options);\n\n  return `\n        <ifx-set-filter slot=\"filter-component-${index + 1}\"\n            options='${optionsString}' \n            filter-label='${column.headerName}'\n            filter-name='${column.field}'\n            type='multi-select'\n            search-enabled='true'>\n          </ifx-set-filter>\n          `;\n          }).join('\\n');\n\n\n\n    const filterTypeGroupComponent = args.filterOrientation === 'sidebar'\n      ? `<ifx-filter-type-group slot=\"sidebar-filter\">\n        <div slot=\"filter-search\">\n          <ifx-filter-search filter-orientation=\"sidebar\" filter-name=\"search\"></ifx-filter-search>\n        </div>\n        ${filterAccordions}\n    </ifx-filter-type-group>`\n      :\n      `<ifx-filter-bar slot=\"topbar-filter\" max-shown-filters=\"3\">\n        <ifx-filter-search slot=\"filter-search\" filter-orientation=\"topbar\"></ifx-filter-search>\n        ${filterComponents}\n   </ifx-filter-bar>`;\n\n    const table = `<ifx-table\n    row-height=\"${args.rowHeight}\"\n    cols='${JSON.stringify(args.columnDefs)}'\n    rows='${JSON.stringify(args.rowData)}'\n    table-height=\"${args.tableHeight}\"\n    pagination=\"${args.pagination}\"\n    pagination-page-size=\"${args.paginationPageSize}\"\n    filter-orientation=\"${args.filterOrientation}\">\n    ${filterTypeGroupComponent}\n</ifx-table>`;\n\n    return table;\n  }\n};\n\n\n\nexport const Pagination = DefaultTemplate.bind({});\nPagination.args = {\n  pagination: true,\n  paginationPageSize: 10,\n  rowHeight: 'default',\n  columnDefs: columnDefs,\n  rowData: rowData,\n  filterOrientation: 'none'\n\n};\n\n\nexport const IncludesButtons = DefaultTemplate.bind({});\nIncludesButtons.args = {\n  rowHeight: 'default',\n  columnDefs: columnDefsWithButtonCol,\n  rowData: rowDataWithButtonCol,\n  filterOrientation: 'none'\n\n};\n\n\nexport const SidebarFilter = DefaultTemplate.bind({});\nSidebarFilter.args = {\n  rowHeight: 'default',\n  columnDefs: columnDefs,\n  rowData: rowData,\n  filterOrientation: 'sidebar'\n};\n\n\nexport const TopbarFilter = DefaultTemplate.bind({});\nTopbarFilter.args = {\n  rowHeight: 'default',\n  columnDefs: columnDefs,\n  rowData: rowData,\n  filterOrientation: 'topbar'\n};\n\n// export const DragAndDrop = DefaultTemplate.bind({});\n// DragAndDrop.args = {\n//   columnDefs: columnDefsDragAndDrop,\n//   rowData: getRowDataDragAndDrop(),\n// };"]}
+{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table-advanced-version/table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["//default\nconst columnDefs = [\n  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n  { headerName: 'Price', field: 'price' },\n  { headerName: 'Age', field: 'age' }\n];\n\n\n\nconst rowData = [\n  { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },\n  { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },\n  { make: 'Porsche', model: 'Boxster', price: 72000 },\n  { make: 'Bmw', model: 'x', price: 72000 },\n  { make: 'Mercedes', model: 'y', price: 72000 },\n  { make: 'Ferrari', model: 'z', price: 72000 },\n  { make: 'Chrysler', model: 'a', price: 72000 },\n  { make: 'Range rover', model: 'b', price: 72000 },\n  { make: 'Tesla', model: 'x', price: 72000 },\n  { make: 'Audi', model: '3', price: 72000 },\n  { make: 'Landrover', model: 'x', price: 72000 },\n];\n\n//table with button col\nconst columnDefsWithButtonCol = [\n  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n  { headerName: 'Price', field: 'price' },\n  { headerName: 'Age', field: 'age' },\n  { headerName: '', field: 'button' }\n];\n\nconst rowDataWithButtonCol = [\n  {\n    make: 'Toyota', model: 'Celica', price: 35000, age: 10, button: 'something about Toyota'\n  },\n  { make: 'Ford', model: 'Mondeo', price: 32000, age: 12, button: 'something about Ford' },\n  {\n    make: 'Porsche', model: 'Boxster', price: 72000, button: {\n      disabled: false,\n      variant: \"secondary\",\n      size: \"s\",\n      target: \"_blank\",\n      color: \"secondary\",\n      text: \"Button\"\n      // ... you can extend this as per the properties of `ifx-button`\n    }\n  }\n];\n\n\n\n//other example\n// const columnDefsDragAndDrop = [\n//   { valueGetter: '\"Drag\"', dndSource: true },\n//   { field: 'id' },\n//   { field: 'color' },\n//   { field: 'value1' },\n//   { field: 'value2' },\n// ];\n\n// var rowIdSequence = 100;\n// function getRowDataDragAndDrop() {\n//   var rowDataDragAndDrop = [];\n//   [\n//     'Red',\n//     'Green',\n//     'Blue',\n//     'Red',\n//     'Green',\n//     'Blue',\n//     'Red',\n//     'Green',\n//     'Blue',\n//   ].forEach(function (color) {\n//     var newDataItem = {\n//       id: rowIdSequence++,\n//       color: color,\n//       value1: Math.floor(Math.random() * 100),\n//       value2: Math.floor(Math.random() * 100),\n//     };\n//     rowDataDragAndDrop.push(newDataItem);\n//   });\n//   return rowDataDragAndDrop;\n// }\n\n\nexport default {\n  title: 'Components/Table (advanced)',\n  // tags: ['autodocs'],\n  args: {\n    tableHeight: 'auto',\n    pagination: false,\n    paginationPageSize: 10,\n    rowHeight: 40,\n    showLoading: false,\n    maxVisibleItemsOfList: 6,\n    filterNameOfFilterSearch: 'Search',\n\n  },\n\n  argTypes: {\n    tableHeight: {\n      description: 'Set the height of the table. Example for fixed height: \"400px\".',\n      table: {\n        defaultValue: { summary: 'auto' },\n        category: 'ifx-table props',\n        type: {\n          summary: 'String',\n        }\n      },\n    },\n    pagination: {\n      description: 'Add pagination to the table.',\n      table: {\n        category: 'ifx-table props',\n        defaultValue: { summary: true },\n        type: {\n          summary: 'Boolean',\n        }\n      }\n    },\n    paginationPageSize: {\n      description: \"Set the number of results per page.\",\n      control: { type: 'number', min: 10, max: 30, step: 10 },\n      table: {\n        category: 'ifx-table props',\n        defaultValue: { summary: 10 },\n        type: {\n          summary: 'Details',\n          detail: 'Minimum: 10\\nMaximum: 30',\n        }\n      }\n    },\n    showLoading: {\n      description: 'Show loading spinner.',\n      options: [true, false],\n      control: { type: 'radio' },\n      table: {\n        category: 'ifx-table props',\n        defaultValue: { summary: false },\n        type: {\n          summary: 'boolean',\n        }\n      }\n    },\n    rowHeight: {\n      description: 'Set the height of the rows.',\n      options: ['compact', 'default'],\n      control: { type: 'radio' },\n      table: {\n        category: 'ifx-table props',\n        defaultValue: { summary: 'default' },\n        type: {\n          summary: 'Options',\n          detail: 'Default: 40px\\nCompact: 32px',\n        }\n      },\n    },\n    filterOrientation: {\n      description: 'Filter position options for the table.',\n      options: ['sidebar', 'topbar', 'none'],\n      control: { type: 'radio' },\n      table: {\n        category: 'ifx-table props',\n        defaultValue: { summary: 'sidebar' },\n        type: {\n          summary: 'Options',\n          detail: 'Sidebar: filter on the left side\\nTopbar: filter on the top\\nNone: no filter',\n        },\n      }\n    },\n    columnDefs: {\n      description: 'Column header options.',\n      table: {\n        category: 'ifx-table props',\n        type: {\n          summary: 'Options',\n          detail: 'Standard columns:\\nheaderName: \"Model\", \\nfield: \"model\", \\nsortable: true (optional),\\nsort: \"desc\" (optional) => descending sort (show icon)\\nunSortIcon: true (optional) => unsorted (show icon)\\n\\nSpecial columns:\\nheaderName: \"\",\\nfield: \"button\"\\nheaderName: \"\",\\nfield: \"link\"',\n        },\n      },\n    },\n    rowData: {\n      description: 'Row data options.',\n      table: {\n        category: 'ifx-table props',\n        type: {\n          summary: 'Options',\n          detail: 'Standard row values:\\nmake: \"Toyota\", \\nmodel: \"Celica\", \\nprice: 35000 \\n\\nSpecial row values (incl buttons):\\nmake: \"Porsche\",\\nmodel: \"Boxster\",\\nprice: \"72000\",\\nbutton: { \\ndisabled: false (optional),\\nvariant: \"outline\" (optional)\\nsize: \"s\" (optional),\\ntext: \"Button\"\\n...other ifx-button properties\\n}',\n        },\n      },\n    },\n    filterGroupName: {\n      description: 'Set the filter group name.',\n      control: { type: 'text' },\n      table: {\n        category: 'ifx-filter-accordion props',\n        type: {\n          summary: 'String',\n        }\n      }\n    },\n    filterNameOfFilterSearch: {\n      name: 'filterName',\n      description: 'Set the filter name.',\n      control: { type: 'text' },\n      table: {\n        category: 'ifx-filter-search props',\n        type: {\n          summary: 'String',\n        }\n      }\n    },\n    filterLabel: {\n      description: 'Set the filter label.',\n      control: { type: 'text' },\n      table: {\n        category: 'ifx-set-filter props',\n        type: {\n          summary: 'String',\n        }\n      }\n    },\n    filterName: {\n      description: 'Set the filter name.',\n      control: { type: 'text' },\n      table: {\n        category: 'ifx-set-filter props',\n        type: {\n          summary: 'String',\n        }\n      }\n    },\n    type: {\n      description: 'Set the type of filter.',\n      options: ['text', 'single-select', 'multi-select'],\n      control: { type: 'radio' },\n      table: {\n        defaultValue: { summary: 'text' },\n        category: 'ifx-set-filter props',\n        type: {\n          summary: 'text | single-select | multi-select',\n        }\n      }\n    },\n    maxShownFilters: {\n      description: 'Set the maximum number of shown filters.',\n      control: { type: 'number' },\n      table: {\n        defaultValue: {\n          summary: 4\n        },\n        category: 'ifx-filter-bar props',\n        type: {\n          summary: 'Number',\n        }\n      }\n    },\n    typeOfList: {\n      name: 'type',\n      description: 'Set the type of list.',\n      control: { type: 'radio' },\n      table: {\n        category: 'ifx-list props',\n        defaultValue: { summary: 'checkbox' },\n        type: {\n          summary: 'String',\n        },\n      }\n    },\n    maxVisibleItemsOfList: {\n      name: 'maxVisibleItems',\n      description: 'Set the maximum number of visible items in the list.',\n      control: { type: 'number' },\n      table: {\n        defaultValue: {\n          summary: 6\n        },\n        category: 'ifx-list props',\n        type: {\n          summary: 'Number',\n        }\n      }\n    },\n    labelOfListEntry: {\n      name: 'label',\n      description: 'Set the label of the list entry.',\n      control: { type: 'text' },\n      table: {\n        category: 'ifx-list-entry props',\n        type: {\n          summary: 'String',\n        }\n      }\n    },\n    valueOfListEntry: {\n      name: 'value',\n      description: 'Set the value of the list entry.',\n      control: { type: 'boolean' },\n      table: {\n        category: 'ifx-list-entry props',\n        type: {\n          summary: 'Boolean',\n        }\n      }\n    },\n    ifxSidebarFilterChange: {\n      description: 'Custom event emitted when the filter is changed in the sidebar.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: `\n          React: onIfxSidebarFilterChange={handleChange}\n          Vue: @ifxSidebarFilterChange=\"handleChange\"\n          Angular: (ifxSidebarFilterChange)=\"handleChange()\"\n          VanillaJs: .addEventListener(\"ifxSidebarFilterChange\", (event) => {/*handle change*/});`\n        }\n      }\n    },\n    ifxFilterSearchChange: {\n      description: 'Custom event emitted when the filter search is changed.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: `\n          React: onIfxFilterSearchChange={handleChange}\n          Vue: @ifxFilterSearchChange=\"handleChange\"\n          Angular: (ifxFilterSearchChange)=\"handleChange()\"\n          VanillaJs: .addEventListener(\"ifxFilterSearchChange\", (event) => {/*handle change*/});`\n        }\n      }\n    },\n    ifxFilterSelect: {\n      description: 'Custom event emitted when the filter is selected.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: `\n          React: onIfxFilterSelect={handleSelect}\n          Vue: @ifxFilterSelect=\"handleSelect\"\n          Angular: (ifxFilterSelect)=\"handleSelect()\"\n          VanillaJs: .addEventListener(\"ifxFilterSelect\", (event) => {/*handle select*/});`\n        }\n      }\n    },\n    ifxFilterAccordionChange: {\n      description: 'Custom event emitted when the filter accordion is changed.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: `\n          React: onIfxFilterAccordionChange={handleChange}\n          Vue: @ifxFilterAccordionChange=\"handleChange\"\n          Angular: (ifxFilterAccordionChange)=\"handleChange()\"\n          VanillaJs: .addEventListener(\"ifxFilterAccordionChange\", (event) => {/*handle change*/});`\n        }\n      }\n    },\n  }\n};\n\nconst DefaultTemplate = (args) => {\n  if (args.filterOrientation === 'none') {\n    const table = `<ifx-table\n    row-height=\"${args.rowHeight}\"\n    cols='${JSON.stringify(args.columnDefs)}'\n    rows='${JSON.stringify(args.rowData)}'\n    table-height=\"${args.tableHeight}\"\n    pagination=\"${args.pagination}\"\n    pagination-page-size=\"${args.paginationPageSize}\"\n    filter-orientation=\"${args.filterOrientation}\">\n</ifx-table>`;\n    return table;\n  } else {\n    //sidebar\n    const filterAccordions = args.columnDefs.map(column => {\n      const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];\n      const filterOptions = uniqueColValues.map((option, index) => {\n        return `<ifx-list-entry slot=\"slot${index}\" label=\"${option}\" value=\"${args.valueOfListEntry}\"></ifx-list-entry>`;\n      }).join('');\n\n      return `\n      <ifx-filter-accordion slot=\"filter-accordion\" filter-group-name=\"${column.field}\">\n        <ifx-list slot=\"list\" type=\"checkbox\" name=\"${column.field}\" max-visible-items=\"${args.maxVisibleItemsOfList}\">\n          ${filterOptions}\n        </ifx-list>\n      </ifx-filter-accordion>\n    `;\n    }).join('');\n\n    //topbar\n    const filterComponents = args.columnDefs.map((column, index) => {\n      const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];\n      const options = uniqueColValues.map(option => ({\n        value: option,\n        label: option,\n        selected: false\n      }));\n\n      // Directly use JSON.stringify without replacing quotes\n      const optionsString = JSON.stringify(options);\n\n      return `\n        <ifx-set-filter slot=\"filter-component-${index + 1}\"\n            options='${optionsString}' \n            filter-label='${column.headerName}'\n            filter-name='${column.field}'\n            type='${args.type}'\n            search-enabled='true'>\n          </ifx-set-filter>\n          `;\n    }).join('\\n');\n\n\n\n    const filterTypeGroupComponent = args.filterOrientation === 'sidebar'\n      ? `<ifx-filter-type-group slot=\"sidebar-filter\">\n        <div slot=\"filter-search\">\n          <ifx-filter-search filter-orientation=\"sidebar\" filter-name=\"search\"></ifx-filter-search>\n        </div>\n        ${filterAccordions}\n    </ifx-filter-type-group>`\n      :\n      `<ifx-filter-bar slot=\"topbar-filter\" max-shown-filters=\"${args.maxShownFilters}\">\n        <ifx-filter-search slot=\"filter-search\" filter-orientation=\"topbar\"></ifx-filter-search>\n        ${filterComponents}\n   </ifx-filter-bar>`;\n\n    const table = `<ifx-table\n    row-height=\"${args.rowHeight}\"\n    cols='${JSON.stringify(args.columnDefs)}'\n    rows='${JSON.stringify(args.rowData)}'\n    table-height=\"${args.tableHeight}\"\n    pagination=\"${args.pagination}\"\n    pagination-page-size=\"${args.paginationPageSize}\"\n    filter-orientation=\"${args.filterOrientation}\">\n    \n    ${filterTypeGroupComponent}\n</ifx-table>`;\n\n    return table;\n  }\n};\n\n\n\nexport const Pagination = DefaultTemplate.bind({});\nPagination.args = {\n  pagination: true,\n  paginationPageSize: 10,\n  rowHeight: 'default',\n  columnDefs: columnDefs,\n  rowData: rowData,\n  filterOrientation: 'none'\n\n};\n\n\nexport const IncludesButtons = DefaultTemplate.bind({});\nIncludesButtons.args = {\n  rowHeight: 'default',\n  columnDefs: columnDefsWithButtonCol,\n  rowData: rowDataWithButtonCol,\n  filterOrientation: 'none'\n\n};\n\n\nexport const SidebarFilter = DefaultTemplate.bind({});\nSidebarFilter.args = {\n  rowHeight: 'default',\n  columnDefs: columnDefs,\n  rowData: rowData,\n  filterOrientation: 'sidebar',\n};\n\n\nexport const TopbarFilter = DefaultTemplate.bind({});\nTopbarFilter.args = {\n  rowHeight: 'default',\n  columnDefs: columnDefs,\n  rowData: rowData,\n  filterOrientation: 'topbar'\n};\n\n// export const DragAndDrop = DefaultTemplate.bind({});\n// DragAndDrop.args = {\n//   columnDefs: columnDefsDragAndDrop,\n//   rowData: getRowDataDragAndDrop(),\n// };"]}

package/dist/collection/components/table-basic-version/table.stories.js

@@ -15,11 +15,14 @@ export default {
     // tags: ['autodocs'],
     args: {
         tableHeight: 'auto',
-        rowHeight: 40,
+        rowHeight: 'default',
     },
     argTypes: {
         tableHeight: {
+            description: 'Controls the height of the table.',
             table: {
+                category: 'ifx-table props',
+                defaultValue: { summary: 'auto' },
                 type: {
                     summary: 'Options',
                     detail: 'Default: "auto"\nExample for fixed height: "400px"',
@@ -27,11 +30,21 @@ export default {
             },
         },
         rowHeight: {
+            description: 'Controls the height of the rows.',
+            table: {
+                category: 'ifx-table props',
+                defaultValue: { summary: 'default' },
+                type: {
+                    summary: 'Options',
+                    detail: 'Default: 40\nCompact: 32\nOptions: 40, 32',
+                },
+            },
             options: ['compact', 'default'],
             control: { type: 'radio' },
         },
         cols: {
             table: {
+                category: 'ifx-table props',
                 type: {
                     summary: 'Column header options',
                     detail: 'Standard columns:\nheaderName: "Model", \nfield: "model", \nsortable: true (optional),\nsort: "desc" (optional) => descending sort (show icon)\nunSortIcon: true (optional) => unsorted (show icon)\n\nSpecial columns:\nheaderName: "",\nfield: "button"\nheaderName: "",\nfield: "link"',
@@ -40,6 +53,7 @@ export default {
         },
         rows: {
             table: {
+                category: 'ifx-table props',
                 type: {
                     summary: 'Row data options',
                     detail: 'Standard row values:\nmake: "Toyota", \nmodel: "Celica", \nprice: 35000 \n\nSpecial row values (incl buttons):\nmake: "Porsche",\nmodel: "Boxster",\nprice: "72000",\nbutton: { \ndisabled: false (optional),\nvariant: "outline" (optional)\nsize: "s" (optional),\ntext: "Button"\n...other ifx-button properties\n}',
@@ -57,6 +71,8 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {
     cols: cols,
     rows: rows,
+    tableHeight: 'auto',
+    rowHeight: 'default',
 };
 export const FixedHeight = DefaultTemplate.bind({});
 FixedHeight.args = {

package/dist/collection/components/table-basic-version/table.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table-basic-version/table.stories.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,MAAM,IAAI,GAAG;IACX,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE;IACrF,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE;IACzE,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IACvC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;CACpC,CAAC;AACF,MAAM,IAAI,GAAG;IACX,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE;IAC1D,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE;IACxD,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE;CACpD,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,sBAAsB;IACtB,IAAI,EAAE;QACJ,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,EAAE;KACd;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;oBAClB,MAAM,EAAE,oDAAoD;iBAC7D;aACF;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;YAC/B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,2RAA2R;iBAC9R;aACF;SACF;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,kBAAkB;oBAC3B,MAAM,EACJ,wTAAwT;iBAC3T;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC;QACxB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;gBACjB,IAAI,CAAC,WAAW;mBACb,CAAC;AAEpB,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,WAAW,CAAC,IAAI,GAAG;IACjB,WAAW,EAAE,OAAO;IACpB,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,IAAI;CACX,CAAC","sourcesContent":["//default\nconst cols = [\n  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n  { headerName: 'Price', field: 'price' },\n  { headerName: 'Age', field: 'age' },\n];\nconst rows = [\n  { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },\n  { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },\n  { make: 'Porsche', model: 'Boxster', price: 72000 },\n];\n\nexport default {\n  title: 'Components/Table (basic)',\n  // tags: ['autodocs'],\n  args: {\n    tableHeight: 'auto',\n    rowHeight: 40,\n  },\n  argTypes: {\n    tableHeight: {\n      table: {\n        type: {\n          summary: 'Options',\n          detail: 'Default: \"auto\"\\nExample for fixed height: \"400px\"',\n        },\n      },\n    },\n    rowHeight: {\n      options: ['compact', 'default'],\n      control: { type: 'radio' },\n    },\n    cols: {\n      table: {\n        type: {\n          summary: 'Column header options',\n          detail:\n            'Standard columns:\\nheaderName: \"Model\", \\nfield: \"model\", \\nsortable: true (optional),\\nsort: \"desc\" (optional) => descending sort (show icon)\\nunSortIcon: true (optional) => unsorted (show icon)\\n\\nSpecial columns:\\nheaderName: \"\",\\nfield: \"button\"\\nheaderName: \"\",\\nfield: \"link\"',\n        },\n      },\n    },\n    rows: {\n      table: {\n        type: {\n          summary: 'Row data options',\n          detail:\n            'Standard row values:\\nmake: \"Toyota\", \\nmodel: \"Celica\", \\nprice: 35000 \\n\\nSpecial row values (incl buttons):\\nmake: \"Porsche\",\\nmodel: \"Boxster\",\\nprice: \"72000\",\\nbutton: { \\ndisabled: false (optional),\\nvariant: \"outline\" (optional)\\nsize: \"s\" (optional),\\ntext: \"Button\"\\n...other ifx-button properties\\n}',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-basic-table \ncols='${JSON.stringify(args.cols)}' \nrows='${JSON.stringify(args.rows)}'\ntable-height='${args.tableHeight}'>\n</ifx-basic-table>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {\n  cols: cols,\n  rows: rows,\n};\n\nexport const FixedHeight = DefaultTemplate.bind({});\nFixedHeight.args = {\n  tableHeight: '400px',\n  cols: cols,\n  rows: rows,\n};\n"]}
+{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table-basic-version/table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["//default\nconst cols = [\n  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n  { headerName: 'Price', field: 'price' },\n  { headerName: 'Age', field: 'age' },\n];\nconst rows = [\n  { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },\n  { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },\n  { make: 'Porsche', model: 'Boxster', price: 72000 },\n];\n\nexport default {\n  title: 'Components/Table (basic)',\n  // tags: ['autodocs'],\n  args: {\n    tableHeight: 'auto',\n    rowHeight: 'default',\n  },\n  argTypes: {\n    tableHeight: {\n      description: 'Controls the height of the table.',\n      table: {\n        category: 'ifx-table props',\n        defaultValue: { summary: 'auto' },\n        type: {\n          summary: 'Options',\n          detail: 'Default: \"auto\"\\nExample for fixed height: \"400px\"',\n        },\n      },\n    },\n    rowHeight: {\n      description: 'Controls the height of the rows.',\n      table: {\n        category: 'ifx-table props',\n        defaultValue: { summary: 'default' },\n        type: {\n          summary: 'Options',\n          detail: 'Default: 40\\nCompact: 32\\nOptions: 40, 32',\n        },\n      },\n      options: ['compact', 'default'],\n      control: { type: 'radio' },\n    },\n    cols: {\n      table: {\n        category: 'ifx-table props',\n        type: {\n          summary: 'Column header options',\n          detail:\n            'Standard columns:\\nheaderName: \"Model\", \\nfield: \"model\", \\nsortable: true (optional),\\nsort: \"desc\" (optional) => descending sort (show icon)\\nunSortIcon: true (optional) => unsorted (show icon)\\n\\nSpecial columns:\\nheaderName: \"\",\\nfield: \"button\"\\nheaderName: \"\",\\nfield: \"link\"',\n        },\n      },\n    },\n    rows: {\n      table: {\n        category: 'ifx-table props',\n        type: {\n          summary: 'Row data options',\n          detail:\n            'Standard row values:\\nmake: \"Toyota\", \\nmodel: \"Celica\", \\nprice: 35000 \\n\\nSpecial row values (incl buttons):\\nmake: \"Porsche\",\\nmodel: \"Boxster\",\\nprice: \"72000\",\\nbutton: { \\ndisabled: false (optional),\\nvariant: \"outline\" (optional)\\nsize: \"s\" (optional),\\ntext: \"Button\"\\n...other ifx-button properties\\n}',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-basic-table \ncols='${JSON.stringify(args.cols)}' \nrows='${JSON.stringify(args.rows)}'\ntable-height='${args.tableHeight}'>\n</ifx-basic-table>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {\n  cols: cols,\n  rows: rows,\n  tableHeight: 'auto',\n  rowHeight: 'default',\n};\n\nexport const FixedHeight = DefaultTemplate.bind({});\nFixedHeight.args = {\n  tableHeight: '400px',\n  cols: cols,\n  rows: rows,\n};\n"]}