@infineon/infineon-design-system-stencil 30.8.0--canary.1658.0b51dae92afc81a0703a9603d6672557cc1387af.0 → 30.8.1--canary.1587.c89110ca140c12e88c8c23fd0e236c681e69d3bc.0

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

@@ -1,4 +1,3 @@
-//default
 const columnDefs = [
     { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },
     { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },
@@ -18,66 +17,59 @@ const rowData = [
     { make: 'Audi', model: '3', price: 72000 },
     { make: 'Landrover', model: 'x', price: 72000 },
 ];
-//table with button col
 const columnDefsWithButtonCol = [
     { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },
     { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },
     { headerName: 'Price', field: 'price' },
     { headerName: 'Age', field: 'age' },
-    { headerName: '', field: 'button' }
+    {
+        headerName: '',
+        field: 'button',
+    }
 ];
 const rowDataWithButtonCol = [
     {
-        make: 'Toyota', model: 'Celica', price: 35000, age: 10, button: 'something about Toyota'
+        make: 'Toyota', model: 'Celica', price: 35000, age: 10, button: {
+            disabled: false,
+            variant: "secondary",
+            size: "s",
+            target: "_blank",
+            href: "https://www.w3schools.com/",
+            theme: "default",
+            type: "button",
+            fullWidth: true,
+            text: "Toyota Button"
+        }
+    },
+    {
+        make: 'Ford', model: 'Mondeo', price: 32000, age: 12, button: {
+            disabled: false,
+            variant: "secondary",
+            size: "s",
+            target: "_blank",
+            href: "https://www.w3schools.com/",
+            theme: "default",
+            type: "button",
+            fullWidth: true,
+            text: "Ford Button"
+        }
     },
-    { make: 'Ford', model: 'Mondeo', price: 32000, age: 12, button: 'something about Ford' },
     {
         make: 'Porsche', model: 'Boxster', price: 72000, button: {
             disabled: false,
             variant: "secondary",
             size: "s",
             target: "_blank",
-            color: "secondary",
-            text: "Button"
-            // ... you can extend this as per the properties of `ifx-button`
+            href: "https://www.w3schools.com/",
+            theme: "default",
+            type: "button",
+            fullWidth: true,
+            text: "Porsche Button"
         }
     }
 ];
-//other example
-// const columnDefsDragAndDrop = [
-//   { valueGetter: '"Drag"', dndSource: true },
-//   { field: 'id' },
-//   { field: 'color' },
-//   { field: 'value1' },
-//   { field: 'value2' },
-// ];
-// var rowIdSequence = 100;
-// function getRowDataDragAndDrop() {
-//   var rowDataDragAndDrop = [];
-//   [
-//     'Red',
-//     'Green',
-//     'Blue',
-//     'Red',
-//     'Green',
-//     'Blue',
-//     'Red',
-//     'Green',
-//     'Blue',
-//   ].forEach(function (color) {
-//     var newDataItem = {
-//       id: rowIdSequence++,
-//       color: color,
-//       value1: Math.floor(Math.random() * 100),
-//       value2: Math.floor(Math.random() * 100),
-//     };
-//     rowDataDragAndDrop.push(newDataItem);
-//   });
-//   return rowDataDragAndDrop;
-// }
 export default {
     title: 'Components/Table (advanced)',
-    // tags: ['autodocs'],
     args: {
         tableHeight: 'auto',
         pagination: false,
@@ -85,6 +77,11 @@ export default {
         currentPage: 1,
         rowHeight: 40,
         showLoading: false,
+        buttonRendererOptions: {
+            onButtonClick: (params, event) => {
+                console.log('Button clicked:', params, event);
+            }
+        }
     },
     argTypes: {
         tableHeight: {
@@ -126,81 +123,32 @@ export default {
                     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}',
                 },
             },
-        }
+        },
+        buttonRendererOptions: {
+            control: 'object',
+            description: 'Options for button cell renderer, including event handlers.',
+            table: {
+                type: {
+                    summary: 'Button Renderer Options',
+                    detail: 'Custom event handlers and other options for the button cell renderer in the table.'
+                },
+            },
+        },
     }
 };
 const DefaultTemplate = (args) => {
-    if (args.filterOrientation === 'none') {
-        const table = `<ifx-table
-    row-height="${args.rowHeight}"
-    cols='${JSON.stringify(args.columnDefs)}'
-    rows='${JSON.stringify(args.rowData)}'
-    table-height="${args.tableHeight}"
-    pagination="${args.pagination}"
-    pagination-page-size="${args.paginationPageSize}"
-    filter-orientation="${args.filterOrientation}">
-</ifx-table>`;
-        return table;
-    }
-    else {
-        //sidebar
-        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>`;
-            }).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">
-          ${filterOptions}
-        </ifx-list>
-      </ifx-filter-accordion>
-    `;
-        }).join('');
-        //topbar
-        const filterComponents = args.columnDefs.map((column, index) => {
-            const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];
-            const options = uniqueColValues.map(option => ({
-                value: option,
-                label: option,
-                selected: false
-            }));
-            // Directly use JSON.stringify without replacing quotes
-            const optionsString = JSON.stringify(options);
-            return `
-        <ifx-set-filter slot="filter-component-${index + 1}"
-            options='${optionsString}' 
-            filter-label='${column.headerName}'
-            filter-name='${column.field}'
-            type='multi-select'
-            search-enabled='true'>
-          </ifx-set-filter>
-          `;
-        }).join('\n');
-        const filterTypeGroupComponent = args.filterOrientation === 'sidebar'
-            ? `<ifx-filter-type-group slot="sidebar-filter">
-        <div slot="filter-search">
-          <ifx-filter-search filter-orientation="sidebar" filter-name="search"></ifx-filter-search>
-        </div>
-        ${filterAccordions}
-    </ifx-filter-type-group>`
-            :
-                `<ifx-filter-bar slot="topbar-filter" max-shown-filters="3">
-        <ifx-filter-search slot="filter-search" filter-orientation="topbar"></ifx-filter-search>
-        ${filterComponents}
-   </ifx-filter-bar>`;
-        const table = `<ifx-table
-    row-height="${args.rowHeight}"
-    cols='${JSON.stringify(args.columnDefs)}'
-    rows='${JSON.stringify(args.rowData)}'
-    table-height="${args.tableHeight}"
-    pagination="${args.pagination}"
-    pagination-page-size="${args.paginationPageSize}"
-    filter-orientation="${args.filterOrientation}">
-    ${filterTypeGroupComponent}
-</ifx-table>`;
-        return table;
-    }
+    const table = `
+    <ifx-table
+      row-height="${args.rowHeight}"
+      cols='${JSON.stringify(args.columnDefs)}'
+      rows='${JSON.stringify(args.rowData)}'
+      table-height="${args.tableHeight}"
+      pagination="${args.pagination}"
+      pagination-page-size="${args.paginationPageSize}"
+      filter-orientation="${args.filterOrientation}"
+      button-renderer-options='${JSON.stringify(args.buttonRendererOptions)}'>
+    </ifx-table>`;
+    return table;
 };
 export const Pagination = DefaultTemplate.bind({});
 Pagination.args = {
@@ -209,32 +157,63 @@ Pagination.args = {
     rowHeight: 'default',
     columnDefs: columnDefs,
     rowData: rowData,
-    filterOrientation: 'none'
+    filterOrientation: 'none',
+    buttonRendererOptions: {
+        onButtonClick: (params, event) => {
+            console.log('Button clicked:', params, event);
+        }
+    }
 };
-export const IncludesButtons = DefaultTemplate.bind({});
+const handleButtonClick = (params, _event) => {
+    console.log('Button clicked:', params.data.make);
+};
+const CustomCellTemplate = (args) => {
+    const table = document.createElement('ifx-table');
+    table.setAttribute('cols', JSON.stringify(args.columnDefs));
+    table.setAttribute('rows', JSON.stringify(args.rowData));
+    table.setAttribute('row-height', args.rowHeight);
+    table.setAttribute('table-height', args.tableHeight);
+    table.setAttribute('pagination', String(args.pagination));
+    table.setAttribute('pagination-page-size', String(args.paginationPageSize));
+    table.setAttribute('filter-orientation', args.filterOrientation);
+    // Set the property directly (not as an attribute)
+    table.buttonRendererOptions = args.buttonRendererOptions;
+    return table;
+};
+export const IncludesButtons = CustomCellTemplate.bind({});
 IncludesButtons.args = {
     rowHeight: 'default',
     columnDefs: columnDefsWithButtonCol,
     rowData: rowDataWithButtonCol,
-    filterOrientation: 'none'
+    filterOrientation: 'none',
+    pagination: false,
+    paginationPageSize: 10,
+    buttonRendererOptions: {
+        onButtonClick: handleButtonClick
+    }
 };
 export const SidebarFilter = DefaultTemplate.bind({});
 SidebarFilter.args = {
     rowHeight: 'default',
     columnDefs: columnDefs,
     rowData: rowData,
-    filterOrientation: 'sidebar'
+    filterOrientation: 'sidebar',
+    buttonRendererOptions: {
+        onButtonClick: (params, event) => {
+            console.log('Button clicked:', params, event);
+        }
+    }
 };
 export const TopbarFilter = DefaultTemplate.bind({});
 TopbarFilter.args = {
     rowHeight: 'default',
     columnDefs: columnDefs,
     rowData: rowData,
-    filterOrientation: 'topbar'
+    filterOrientation: 'topbar',
+    buttonRendererOptions: {
+        onButtonClick: (params, event) => {
+            console.log('Button clicked:', params, event);
+        }
+    }
 };
-// export const DragAndDrop = DefaultTemplate.bind({});
-// DragAndDrop.args = {
-//   columnDefs: columnDefsDragAndDrop,
-//   rowData: getRowDataDragAndDrop(),
-// };
 //# sourceMappingURL=table.stories.js.map

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":"AAAA,MAAM,UAAU,GAAG;IACjB,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;AAEF,MAAM,OAAO,GAAG;IACd,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;IACnD,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE;IACzC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE;IAC9C,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE;IAC7C,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE;IAC9C,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE;IACjD,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE;IAC3C,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE;IAC1C,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE;CAChD,CAAC;AAEF,MAAM,uBAAuB,GAAG;IAC9B,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;IACnC;QACE,UAAU,EAAE,EAAE;QACd,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC;AAGF,MAAM,oBAAoB,GAAG;IAC3B;QACE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE;YAC9D,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,WAAW;YACpB,IAAI,EAAE,GAAG;YACT,MAAM,EAAE,QAAQ;YAChB,IAAI,EAAE,4BAA4B;YAClC,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,IAAI;YACf,IAAI,EAAE,eAAe;SACtB;KACF;IACD;QACE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE;YAC5D,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,WAAW;YACpB,IAAI,EAAE,GAAG;YACT,MAAM,EAAE,QAAQ;YAChB,IAAI,EAAE,4BAA4B;YAClC,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,IAAI;YACf,IAAI,EAAE,aAAa;SACpB;KACF;IACD;QACE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE;YACvD,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,WAAW;YACpB,IAAI,EAAE,GAAG;YACT,MAAM,EAAE,QAAQ;YAChB,IAAI,EAAE,4BAA4B;YAClC,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,IAAI;YACf,IAAI,EAAE,gBAAgB;SACvB;KACF;CACF,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE;QACJ,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,KAAK;QACjB,kBAAkB,EAAE,EAAE;QACtB,WAAW,EAAE,CAAC;QACd,SAAS,EAAE,EAAE;QACb,WAAW,EAAE,KAAK;QAClB,qBAAqB,EAAE;YACrB,aAAa,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;gBAC/B,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;YAChD,CAAC;SACF;KACF;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;oBAClB,MAAM,EAAE,oDAAoD;iBAC7D;aACF;SACF;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,2CAA2C;YACxD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;SACxD;QACD,WAAW,EAAE;YACX,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC;YACtB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,SAAS,EAAE;YACT,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;YAC/B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,iBAAiB,EAAE;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,CAAC;YACtC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,UAAU,EAAE;YACV,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EAAE,2RAA2R;iBACpS;aACF;SACF;QACD,OAAO,EAAE;YACP,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,kBAAkB;oBAC3B,MAAM,EAAE,wTAAwT;iBACjU;aACF;SACF;QACD,qBAAqB,EAAE;YACrB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,6DAA6D;YAC1E,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,yBAAyB;oBAClC,MAAM,EAAE,oFAAoF;iBAC7F;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE;IAC/B,MAAM,KAAK,GAAG;;oBAEI,IAAI,CAAC,SAAS;cACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;cAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;sBACpB,IAAI,CAAC,WAAW;oBAClB,IAAI,CAAC,UAAU;8BACL,IAAI,CAAC,kBAAkB;4BACzB,IAAI,CAAC,iBAAiB;iCACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,qBAAqB,CAAC;iBAC1D,CAAC;IAChB,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAGF,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACnD,UAAU,CAAC,IAAI,GAAG;IAChB,UAAU,EAAE,IAAI;IAChB,kBAAkB,EAAE,EAAE;IACtB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,OAAO;IAChB,iBAAiB,EAAE,MAAM;IACzB,qBAAqB,EAAE;QACrB,aAAa,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC/B,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAChD,CAAC;KACF;CACF,CAAC;AAGF,MAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;IAC3C,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACnD,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,EAAE;IAClC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAElD,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;IAC5D,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IACzD,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACjD,KAAK,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACrD,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;IAC1D,KAAK,CAAC,YAAY,CAAC,sBAAsB,EAAE,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5E,KAAK,CAAC,YAAY,CAAC,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAEjE,kDAAkD;IAClD,KAAK,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAA;IAExD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAIF,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3D,eAAe,CAAC,IAAI,GAAG;IACrB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,uBAAuB;IACnC,OAAO,EAAE,oBAAoB;IAC7B,iBAAiB,EAAE,MAAM;IACzB,UAAU,EAAE,KAAK;IACjB,kBAAkB,EAAE,EAAE;IACtB,qBAAqB,EAAE;QACrB,aAAa,EAAE,iBAAiB;KACjC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtD,aAAa,CAAC,IAAI,GAAG;IACnB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,OAAO;IAChB,iBAAiB,EAAE,SAAS;IAC5B,qBAAqB,EAAE;QACrB,aAAa,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC/B,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAChD,CAAC;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACrD,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,OAAO;IAChB,iBAAiB,EAAE,QAAQ;IAC3B,qBAAqB,EAAE;QACrB,aAAa,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC/B,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAChD,CAAC;KACF;CACF,CAAC","sourcesContent":["const 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\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\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  { \n    headerName: '', \n    field: 'button',\n  }\n];\n\n\nconst rowDataWithButtonCol = [\n  {\n    make: 'Toyota', model: 'Celica', price: 35000, age: 10, button: {\n      disabled: false,\n      variant: \"secondary\",\n      size: \"s\",\n      target: \"_blank\",\n      href: \"https://www.w3schools.com/\",\n      theme: \"default\",\n      type: \"button\",\n      fullWidth: true,\n      text: \"Toyota Button\"\n    }\n  },\n  {\n    make: 'Ford', model: 'Mondeo', price: 32000, age: 12, button: {\n      disabled: false,\n      variant: \"secondary\",\n      size: \"s\",\n      target: \"_blank\",\n      href: \"https://www.w3schools.com/\",\n      theme: \"default\",\n      type: \"button\",\n      fullWidth: true,\n      text: \"Ford Button\"\n    }\n  },\n  {\n    make: 'Porsche', model: 'Boxster', price: 72000, button: {\n      disabled: false,\n      variant: \"secondary\",\n      size: \"s\",\n      target: \"_blank\",\n      href: \"https://www.w3schools.com/\",\n      theme: \"default\",\n      type: \"button\",\n      fullWidth: true,\n      text: \"Porsche Button\"\n    }\n  }\n];\n \nexport default {\n  title: 'Components/Table (advanced)',\n  args: {\n    tableHeight: 'auto',\n    pagination: false,\n    paginationPageSize: 10,\n    currentPage: 1,\n    rowHeight: 40,\n    showLoading: false,\n    buttonRendererOptions: {\n      onButtonClick: (params, event) => {\n        console.log('Button clicked:', params, event);\n      }\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    buttonRendererOptions: {\n      control: 'object',\n      description: 'Options for button cell renderer, including event handlers.',\n      table: {\n        type: {\n          summary: 'Button Renderer Options',\n          detail: 'Custom event handlers and other options for the button cell renderer in the table.'\n        },\n      },\n    },\n  }\n};\n\nconst DefaultTemplate = (args) => {\n  const table = `\n    <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      button-renderer-options='${JSON.stringify(args.buttonRendererOptions)}'>\n    </ifx-table>`;\n  return table;\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  buttonRendererOptions: {\n    onButtonClick: (params, event) => {\n      console.log('Button clicked:', params, event);\n    }\n  }\n};\n\n\nconst handleButtonClick = (params, _event) => {\n  console.log('Button clicked:', params.data.make);\n};\n\nconst CustomCellTemplate = (args) => {\n  const table = document.createElement('ifx-table');\n  \n  table.setAttribute('cols', JSON.stringify(args.columnDefs));\n  table.setAttribute('rows', JSON.stringify(args.rowData));\n  table.setAttribute('row-height', args.rowHeight);\n  table.setAttribute('table-height', args.tableHeight);\n  table.setAttribute('pagination', String(args.pagination));\n  table.setAttribute('pagination-page-size', String(args.paginationPageSize));\n  table.setAttribute('filter-orientation', args.filterOrientation);\n  \n  // Set the property directly (not as an attribute)\n  table.buttonRendererOptions = args.buttonRendererOptions\n\n  return table;\n};\n\n\n\nexport const IncludesButtons = CustomCellTemplate.bind({});\nIncludesButtons.args = {\n  rowHeight: 'default',\n  columnDefs: columnDefsWithButtonCol,\n  rowData: rowDataWithButtonCol,\n  filterOrientation: 'none',\n  pagination: false,\n  paginationPageSize: 10,\n  buttonRendererOptions: {\n    onButtonClick: handleButtonClick\n  }\n};\n\nexport const SidebarFilter = DefaultTemplate.bind({});\nSidebarFilter.args = {\n  rowHeight: 'default',\n  columnDefs: columnDefs,\n  rowData: rowData,\n  filterOrientation: 'sidebar',\n  buttonRendererOptions: {\n    onButtonClick: (params, event) => {\n      console.log('Button clicked:', params, event);\n    }\n  }\n};\n\nexport const TopbarFilter = DefaultTemplate.bind({});\nTopbarFilter.args = {\n  rowHeight: 'default',\n  columnDefs: columnDefs,\n  rowData: rowData,\n  filterOrientation: 'topbar',\n  buttonRendererOptions: {\n    onButtonClick: (params, event) => {\n      console.log('Button clicked:', params, event);\n    }\n  }\n};\n"]}

package/dist/collection/components/table-basic-version/table.css

@@ -8676,6 +8676,16 @@ input[class^=ag-][type=range]:disabled {
   outline: none;
 }
 
+.ifx-ag-grid .ag-header-cell:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: calc(50% - 12px);
+  height: 24px;
+  width: 1px;
+  background-color: #BFBBBB;
+}
+
 .ag-overlay-loading-center {
   border: none;
   background: none;