carbon-components-angular/docs/storybook/table-table-stories.a0ce8815.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[933],{"./src/table/table.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,Filtering:()=>Filtering,FilteringOverriding:()=>FilteringOverriding,FromComponents:()=>FromComponents,Skeleton:()=>Skeleton,WithDisabledRows:()=>WithDisabledRows,WithDynamicContent:()=>WithDynamicContent,WithExpansion:()=>WithExpansion,WithOverflowMenu:()=>WithOverflowMenu,WithPagination:()=>WithPagination,WithToolbar:()=>WithToolbar,WithToolbarWithoutToolbarAction:()=>WithToolbarWithoutToolbarAction,WithoutData:()=>WithoutData,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _storybook_angular__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),_angular_forms__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),_forms__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/forms/index.ts"),_button__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/button/index.ts"),_icon_icon_module__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/icon/icon.module.ts"),_search__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/search/index.ts"),_pagination__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/pagination/index.ts"),_dialog__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/dialog/index.ts"),_stories__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/table/stories/index.ts"),___WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/table/index.ts");const simpleModel=new ___WEBPACK_IMPORTED_MODULE_8__.G0;simpleModel.data=[[new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"Name 1"}),new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"qwer"})],[new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"Name 3"}),new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"zwer"})],[new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"Name 2"}),new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"swer"})],[new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"Name 4"}),new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"twer"})]],simpleModel.header=[new ___WEBPACK_IMPORTED_MODULE_8__.jr({data:"Name"}),new ___WEBPACK_IMPORTED_MODULE_8__.jr({data:"hwer"})];const emptyModel=new ___WEBPACK_IMPORTED_MODULE_8__.G0;emptyModel.header=[new ___WEBPACK_IMPORTED_MODULE_8__.jr({data:"Name"}),new ___WEBPACK_IMPORTED_MODULE_8__.jr({data:"hwer",style:{width:"auto"}})];const getProps=(more={},type)=>({..."args"===type?{model:simpleModel,title:"Table title",description:"",size:"md",showSelectionColumn:!0,striped:!1,sortable:!0,isDataGrid:!0,stickyHeader:!1,skeleton:!1}:{size:{options:["xs","sm","md","lg","xl"],control:"select"}},...more});const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Table",decorators:[(0,_storybook_angular__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata)({imports:[_forms__WEBPACK_IMPORTED_MODULE_1__.s,_angular_forms__WEBPACK_IMPORTED_MODULE_9__.u5,___WEBPACK_IMPORTED_MODULE_8__.U$,_pagination__WEBPACK_IMPORTED_MODULE_5__.u3,_dialog__WEBPACK_IMPORTED_MODULE_6__.Su,_search__WEBPACK_IMPORTED_MODULE_4__.t,_icon_icon_module__WEBPACK_IMPORTED_MODULE_3__.QX,_button__WEBPACK_IMPORTED_MODULE_2__.hJ],declarations:[_stories__WEBPACK_IMPORTED_MODULE_7__.bj,_stories__WEBPACK_IMPORTED_MODULE_7__.eC,_stories__WEBPACK_IMPORTED_MODULE_7__.Wu,_stories__WEBPACK_IMPORTED_MODULE_7__.jx,_stories__WEBPACK_IMPORTED_MODULE_7__.OD,_stories__WEBPACK_IMPORTED_MODULE_7__.pr,_stories__WEBPACK_IMPORTED_MODULE_7__.v8,_stories__WEBPACK_IMPORTED_MODULE_7__.uX,_stories__WEBPACK_IMPORTED_MODULE_7__.OR]})],argTypes:{model:{control:!1,disabled:!0}}},Basic=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n            --\x3e\n            <app-table\n                [model]="model"\n                [stickyHeader]="stickyHeader"\n                [size]="size"\n                [skeleton]="skeleton"\n                [enableSingleSelect]="enableSingleSelect"\n                [showSelectionColumn]="showSelectionColumn"\n                [striped]="striped"\n                [sortable]="sortable"\n                [isDataGrid]="isDataGrid">\n            </app-table>\n        </cds-table-container>\n    '})).bind({});Basic.args={...getProps({enableSingleSelect:!1},"args")},Basic.argTypes={...getProps({},"argTypes")};const WithoutData=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle id="table-header">{{title}}</h4>\n                <p cdsTableHeaderDescription id="table-description">{{description}}</p>\n            </cds-table-header>\n\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data.component.ts\n            --\x3e\n            <app-no-data-table\n                [model]="model"\n                [size]="size"\n                [skeleton]="skeleton"\n                [showSelectionColumn]="showSelectionColumn"\n                [striped]="striped"\n                ariaLabelledby="table-header"\n                ariaDescribedby="table-description">\n                <tbody><tr><td class="no-data" colspan="3"><div>No data.</div></td></tr></tbody>\n            </app-no-data-table>\n        </cds-table-container>\n    ',styles:["\n        .no-data {\n            width: 100%;\n            height: 150px;\n            text-align: center;\n        }\n    "]})).bind({});WithoutData.args={...getProps({model:emptyModel},"args")};const WithToolbar=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            <cds-table-toolbar\n                [model]="model"\n                [batchText]="batchText"\n                [size]="size"\n                (cancel)="cancelMethod()"\n                #toolbar>\n                <cds-table-toolbar-actions>\n                    <button cdsButton="primary" [tabindex]="toolbar.selected ? 0 : -1">\n                        Delete\n                        <svg cdsIcon="trash-can" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                    <button cdsButton="primary" [tabindex]="toolbar.selected ? 0 : -1">\n                        Save\n                        <svg cdsIcon="save" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                    <button cdsButton="primary" [tabindex]="toolbar.selected ? 0 : -1">\n                        Download\n                        <svg cdsIcon="download" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                </cds-table-toolbar-actions>\n                <cds-table-toolbar-content *ngIf="!toolbar.selected">\n                    <cds-table-toolbar-search\n                        ngDefaultControl\n                        [expandable]="searchExpandable"\n                        [(ngModel)]="searchModel">\n                    </cds-table-toolbar-search>\n                    <cds-overflow-menu\n                        triggerClass="cds--toolbar-action"\n                        [customTrigger]="customTrigger"\n                        placement="bottom"\n                        [offset]="size === \'sm\' ? null : offset">\n                        <cds-overflow-menu-option>Option 1</cds-overflow-menu-option>\n                        <cds-overflow-menu-option>Option 2</cds-overflow-menu-option>\n                        <cds-overflow-menu-option disabled="true">Disabled</cds-overflow-menu-option>\n                        <cds-overflow-menu-option type="danger">Danger option</cds-overflow-menu-option>\n                    </cds-overflow-menu>\n                    <button cdsButton="primary" size="sm" [tabindex]="toolbar.selected ? -1 : 0">\n                        Primary button<svg cdsIcon="add" size="20" class="cds--btn__icon"></svg>\n                    </button>\n                </cds-table-toolbar-content>\n            </cds-table-toolbar>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n            --\x3e\n            <app-table\n                [model]="model"\n                [size]="size"\n                [showSelectionColumn]="showSelectionColumn"\n                [enableSingleSelect]="enableSingleSelect"\n                [striped]="striped"\n                [sortable]="sortable"\n                [skeleton]="skeleton"\n                [stickyHeader]="stickyHeader"\n                [isDataGrid]="isDataGrid">\n            </app-table>\n            <ng-template #customTrigger><svg cdsIcon="settings" size="16"></svg></ng-template>\n        </cds-table-container>\n    '})).bind({});WithToolbar.args={...getProps({description:"With toolbar",searchModel:"Initial search value",searchExpandable:!0,enableSingleSelect:!1,batchText:{SINGLE:"1 item selected",MULTIPLE:"{{count}} items selected"},offset:{x:-9,y:0}},"args")},WithToolbar.argTypes={...getProps({canelMethod:{type:"function",control:!1,defaultValue:()=>{console.log("Custom cancel method")}}},"argTypes")};const WithDisabledRows=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            <cds-table-toolbar [model]="model" [batchText]="batchText" #toolbar>\n                <cds-table-toolbar-actions>\n                    <button cdsButton="primary">\n                        Delete\n                        <svg cdsIcon="delete" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                    <button cdsButton="primary">\n                        Save\n                        <svg cdsIcon="save" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                    <button cdsButton="primary">\n                        Download\n                        <svg cdsIcon="download" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                </cds-table-toolbar-actions>\n                <cds-table-toolbar-content *ngIf="!toolbar.selected">\n                    <cds-table-toolbar-search [expandable]="true"></cds-table-toolbar-search>\n                    <button cdsButton="ghost" class="toolbar-action">\n                        <svg cdsIcon="settings" size="16" class="cds--toolbar-action__icon"></svg>\n                    </button>\n                    <button cdsButton="primary" size="sm">\n                        Primary button<svg cdsIcon="add" size="20" class="cds--btn__icon"></svg>\n                    </button>\n                </cds-table-toolbar-content>\n            </cds-table-toolbar>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data-table.component.ts\n            --\x3e\n            <app-no-data-table\n                [model]="model"\n                [size]="lg"\n                [showSelectionColumn]="true"\n                [striped]="striped"\n                [sortable]="sortable"\n                [isDataGrid]="isDataGrid">\n            </app-no-data-table>\n        </cds-table-container>\n    '})).bind({});WithDisabledRows.storyName="With toolbar and disabled rows",WithDisabledRows.args={...getProps({model:function getModelWithDisabledRows(){const disabledModel=new ___WEBPACK_IMPORTED_MODULE_8__.G0,row1=new ___WEBPACK_IMPORTED_MODULE_8__.SC(new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"Name 1"}),new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"Disabled 1"}));row1.disabled=!0;const row2=new ___WEBPACK_IMPORTED_MODULE_8__.SC(new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"Name 3"}),new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"Disabled 2"}));row2.disabled=!0;const row3=new ___WEBPACK_IMPORTED_MODULE_8__.SC(new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"Name 2"}),new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"Enabled 1"})),row4=new ___WEBPACK_IMPORTED_MODULE_8__.SC(new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"Name 4"}),new ___WEBPACK_IMPORTED_MODULE_8__.r8({data:"Enabled 2"}));return disabledModel.data=[row1,row2,row3,row4],disabledModel}(),size:"md",title:"Table title",description:"With toolbar & disabled rows",striped:!1,sortable:!0,isDataGrid:!0,batchText:{SINGLE:"1 item selected",MULTIPLE:"{{count}} items selected"}},"args")},WithDisabledRows.argTypes={size:{options:["xs","sm","md","lg","xl"],control:"select"}};const WithToolbarWithoutToolbarAction=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle id="table-header">{{title}}</h4>\n                <p cdsTableHeaderDescription id="table-description">{{description}}</p>\n            </cds-table-header>\n            <cds-table-toolbar>\n                <cds-table-toolbar-content>\n                    <cds-table-toolbar-search [expandable]="true"></cds-table-toolbar-search>\n                    <button cdsButton="ghost" class="toolbar-action">\n                        <svg cdsIcon="settings" size="16" class="cds--toolbar-action__icon"></svg>\n                    </button>\n                    <button cdsButton="primary" size="sm">\n                        Primary button<svg cdsIcon="add" size="20" class="cds--btn__icon"></svg>\n                    </button>\n                </cds-table-toolbar-content>\n            </cds-table-toolbar>\n\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n            --\x3e\n            <app-table\n                [model]="model"\n                [size]="size"\n                [showSelectionColumn]="showSelectionColumn"\n                [enableSingleSelect]="enableSingleSelect"\n                [stickyHeader]="stickyHeader"\n                [skeleton]="skeleton"\n                [striped]="striped"\n                [sortable]="sortable"\n                [isDataGrid]="isDataGrid"\n                ariaLabelledby="table-header"\n                ariaDescribedby="table-description">\n            </app-table>\n        </cds-table-container>\n    '})).bind({});WithToolbarWithoutToolbarAction.args={...getProps({description:"With toolbar",enableSingleSeelct:!1},"args")};const FilteringOverriding=(args=>({props:args,template:'\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-function-override-filter-table.component.ts\n        --\x3e\n        <app-function-override-filter-table\n            [stickyHeader]="stickyHeader"\n            [size]="size"\n            [skeleton]="skeleton"\n            [showSelectionColumn]="showSelectionColumn"\n            [striped]="striped"\n            [isDataGrid]="isDataGrid">\n        </app-function-override-filter-table>\n    '})).bind({});FilteringOverriding.storyName="Filtering by overriding isRowFiltered [Recommended]",FilteringOverriding.args={...getProps({},"args")};const Filtering=(args=>({props:args,template:'\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-model-filter-table.component.ts\n        --\x3e\n        <app-model-filter-table\n            [stickyHeader]="stickyHeader"\n            [size]="size"\n            [skeleton]="skeleton"\n            [showSelectionColumn]="showSelectionColumn"\n            [striped]="striped"\n            [isDataGrid]="isDataGrid">\n        </app-model-filter-table>\n    '})).bind({});Filtering.storyName="Filtering by alteration of model data",Filtering.args={...getProps({description:"With toolbar",enableSingleSeelct:!1},"args")};const WithExpansion=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-expansion-table.component.ts\n            --\x3e\n            <app-expansion-table\n                [size]="size"\n                [showSelectionColumn]="showSelectionColumn"\n                [sortable]="sortable"\n                [stickyHeader]="stickyHeader"\n                [skeleton]="skeleton"\n                [striped]="striped"\n                [isDataGrid]="isDataGrid"\n                [showExpandAllToggle]="showExpandAllToggle">\n            </app-expansion-table>\n        </cds-table-container>\n    '})).bind({});WithExpansion.args={...getProps({description:"With expansion"},"args"),showExpandAllToggle:!1};const WithDynamicContent=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-custom-table.component.ts\n            --\x3e\n            <app-custom-table\n                [size]="size"\n                [showSelectionColumn]="showSelectionColumn"\n                [sortable]="sortable"\n                [stickyHeader]="stickyHeader"\n                [skeleton]="skeleton"\n                [striped]="striped"\n                [isDataGrid]="isDataGrid">\n            </app-custom-table>\n        </cds-table-container>\n    '})).bind({});WithDynamicContent.args={...getProps({description:"With dynamic content"},"args")};const WithOverflowMenu=(args=>({props:{...getProps({description:"With overflow menu"},"args")},template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-overflow-table.component.ts\n            --\x3e\n            <app-overflow-table\n                [size]="size"\n                [showSelectionColumn]="showSelectionColumn"\n                [sortable]="sortable"\n                [stickyHeader]="stickyHeader"\n                [skeleton]="skeleton"\n                [striped]="striped"\n                [isDataGrid]="isDataGrid">\n            </app-overflow-table>\n        </cds-table-container>\n    '})).bind({}),WithPagination=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-pagination-table.component.ts\n            --\x3e\n            <app-pagination-table\n                [skeleton]="skeleton"\n                [sortable]="sortable"\n                [totalDataLength]="totalDataLength"\n                [showSelectionColumn]="showSelectionColumn"\n                [stickyHeader]="stickyHeader"\n                [skeleton]="skeleton"\n                [model]="model">\n            </app-pagination-table>\n        </cds-table-container>\n    '})).bind({});WithPagination.args={...getProps({totalDataLength:105,description:"With pagination"},"args")};const FromComponents=(args=>({props:args,template:'\n        <table cdsTable [sortable]="false">\n            <thead cdsTableHead>\n                <tr>\n                    <th\n                        scope="col"\n                        cdsTableHeadCell\n                        *ngFor="let column of model.header"\n                        [column]="column">\n                    </th>\n                </tr>\n            </thead>\n            <tbody cdsTableBody>\n                <tr\n                    *ngFor="let row of model.data"\n                    cdsTableRow\n                    [row]="row">\n                    <td\n                        *ngFor="let item of row; let j = index"\n                        cdsTableData\n                        [item]="item"\n                        [class]="model.header[j].className"\n                        [ngStyle]="model.header[j].style">\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    '})).bind({});FromComponents.args={...getProps({},"args")};const Skeleton=(args=>({props:args,template:'\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-skeleton-table.component.ts\n        --\x3e\n        <app-skeleton-table\n            [skeletonModel]="skeletonModel"\n            [size]="size"\n            [striped]="striped">\n        </app-skeleton-table>\n    '})).bind({});Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n            --\x3e\n            <app-table\n                [model]="model"\n                [stickyHeader]="stickyHeader"\n                [size]="size"\n                [skeleton]="skeleton"\n                [enableSingleSelect]="enableSingleSelect"\n                [showSelectionColumn]="showSelectionColumn"\n                [striped]="striped"\n                [sortable]="sortable"\n                [isDataGrid]="isDataGrid">\n            </app-table>\n        </cds-table-container>\n    `\n})',...Basic.parameters?.docs?.source}}},WithoutData.parameters={...WithoutData.parameters,docs:{...WithoutData.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle id="table-header">{{title}}</h4>\n                <p cdsTableHeaderDescription id="table-description">{{description}}</p>\n            </cds-table-header>\n\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data.component.ts\n            --\x3e\n            <app-no-data-table\n                [model]="model"\n                [size]="size"\n                [skeleton]="skeleton"\n                [showSelectionColumn]="showSelectionColumn"\n                [striped]="striped"\n                ariaLabelledby="table-header"\n                ariaDescribedby="table-description">\n                <tbody><tr><td class="no-data" colspan="3"><div>No data.</div></td></tr></tbody>\n            </app-no-data-table>\n        </cds-table-container>\n    `,\n  styles: [`\n        .no-data {\n            width: 100%;\n            height: 150px;\n            text-align: center;\n        }\n    `]\n})',...WithoutData.parameters?.docs?.source}}},WithToolbar.parameters={...WithToolbar.parameters,docs:{...WithToolbar.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            <cds-table-toolbar\n                [model]="model"\n                [batchText]="batchText"\n                [size]="size"\n                (cancel)="cancelMethod()"\n                #toolbar>\n                <cds-table-toolbar-actions>\n                    <button cdsButton="primary" [tabindex]="toolbar.selected ? 0 : -1">\n                        Delete\n                        <svg cdsIcon="trash-can" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                    <button cdsButton="primary" [tabindex]="toolbar.selected ? 0 : -1">\n                        Save\n                        <svg cdsIcon="save" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                    <button cdsButton="primary" [tabindex]="toolbar.selected ? 0 : -1">\n                        Download\n                        <svg cdsIcon="download" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                </cds-table-toolbar-actions>\n                <cds-table-toolbar-content *ngIf="!toolbar.selected">\n                    <cds-table-toolbar-search\n                        ngDefaultControl\n                        [expandable]="searchExpandable"\n                        [(ngModel)]="searchModel">\n                    </cds-table-toolbar-search>\n                    <cds-overflow-menu\n                        triggerClass="cds--toolbar-action"\n                        [customTrigger]="customTrigger"\n                        placement="bottom"\n                        [offset]="size === \'sm\' ? null : offset">\n                        <cds-overflow-menu-option>Option 1</cds-overflow-menu-option>\n                        <cds-overflow-menu-option>Option 2</cds-overflow-menu-option>\n                        <cds-overflow-menu-option disabled="true">Disabled</cds-overflow-menu-option>\n                        <cds-overflow-menu-option type="danger">Danger option</cds-overflow-menu-option>\n                    </cds-overflow-menu>\n                    <button cdsButton="primary" size="sm" [tabindex]="toolbar.selected ? -1 : 0">\n                        Primary button<svg cdsIcon="add" size="20" class="cds--btn__icon"></svg>\n                    </button>\n                </cds-table-toolbar-content>\n            </cds-table-toolbar>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n            --\x3e\n            <app-table\n                [model]="model"\n                [size]="size"\n                [showSelectionColumn]="showSelectionColumn"\n                [enableSingleSelect]="enableSingleSelect"\n                [striped]="striped"\n                [sortable]="sortable"\n                [skeleton]="skeleton"\n                [stickyHeader]="stickyHeader"\n                [isDataGrid]="isDataGrid">\n            </app-table>\n            <ng-template #customTrigger><svg cdsIcon="settings" size="16"></svg></ng-template>\n        </cds-table-container>\n    `\n})',...WithToolbar.parameters?.docs?.source}}},WithDisabledRows.parameters={...WithDisabledRows.parameters,docs:{...WithDisabledRows.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            <cds-table-toolbar [model]="model" [batchText]="batchText" #toolbar>\n                <cds-table-toolbar-actions>\n                    <button cdsButton="primary">\n                        Delete\n                        <svg cdsIcon="delete" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                    <button cdsButton="primary">\n                        Save\n                        <svg cdsIcon="save" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                    <button cdsButton="primary">\n                        Download\n                        <svg cdsIcon="download" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                </cds-table-toolbar-actions>\n                <cds-table-toolbar-content *ngIf="!toolbar.selected">\n                    <cds-table-toolbar-search [expandable]="true"></cds-table-toolbar-search>\n                    <button cdsButton="ghost" class="toolbar-action">\n                        <svg cdsIcon="settings" size="16" class="cds--toolbar-action__icon"></svg>\n                    </button>\n                    <button cdsButton="primary" size="sm">\n                        Primary button<svg cdsIcon="add" size="20" class="cds--btn__icon"></svg>\n                    </button>\n                </cds-table-toolbar-content>\n            </cds-table-toolbar>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data-table.component.ts\n            --\x3e\n            <app-no-data-table\n                [model]="model"\n                [size]="lg"\n                [showSelectionColumn]="true"\n                [striped]="striped"\n                [sortable]="sortable"\n                [isDataGrid]="isDataGrid">\n            </app-no-data-table>\n        </cds-table-container>\n    `\n})',...WithDisabledRows.parameters?.docs?.source}}},WithToolbarWithoutToolbarAction.parameters={...WithToolbarWithoutToolbarAction.parameters,docs:{...WithToolbarWithoutToolbarAction.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle id="table-header">{{title}}</h4>\n                <p cdsTableHeaderDescription id="table-description">{{description}}</p>\n            </cds-table-header>\n            <cds-table-toolbar>\n                <cds-table-toolbar-content>\n                    <cds-table-toolbar-search [expandable]="true"></cds-table-toolbar-search>\n                    <button cdsButton="ghost" class="toolbar-action">\n                        <svg cdsIcon="settings" size="16" class="cds--toolbar-action__icon"></svg>\n                    </button>\n                    <button cdsButton="primary" size="sm">\n                        Primary button<svg cdsIcon="add" size="20" class="cds--btn__icon"></svg>\n                    </button>\n                </cds-table-toolbar-content>\n            </cds-table-toolbar>\n\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n            --\x3e\n            <app-table\n                [model]="model"\n                [size]="size"\n                [showSelectionColumn]="showSelectionColumn"\n                [enableSingleSelect]="enableSingleSelect"\n                [stickyHeader]="stickyHeader"\n                [skeleton]="skeleton"\n                [striped]="striped"\n                [sortable]="sortable"\n                [isDataGrid]="isDataGrid"\n                ariaLabelledby="table-header"\n                ariaDescribedby="table-description">\n            </app-table>\n        </cds-table-container>\n    `\n})',...WithToolbarWithoutToolbarAction.parameters?.docs?.source}}},FilteringOverriding.parameters={...FilteringOverriding.parameters,docs:{...FilteringOverriding.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-function-override-filter-table.component.ts\n        --\x3e\n        <app-function-override-filter-table\n            [stickyHeader]="stickyHeader"\n            [size]="size"\n            [skeleton]="skeleton"\n            [showSelectionColumn]="showSelectionColumn"\n            [striped]="striped"\n            [isDataGrid]="isDataGrid">\n        </app-function-override-filter-table>\n    `\n})',...FilteringOverriding.parameters?.docs?.source}}},Filtering.parameters={...Filtering.parameters,docs:{...Filtering.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-model-filter-table.component.ts\n        --\x3e\n        <app-model-filter-table\n            [stickyHeader]="stickyHeader"\n            [size]="size"\n            [skeleton]="skeleton"\n            [showSelectionColumn]="showSelectionColumn"\n            [striped]="striped"\n            [isDataGrid]="isDataGrid">\n        </app-model-filter-table>\n    `\n})',...Filtering.parameters?.docs?.source}}},WithExpansion.parameters={...WithExpansion.parameters,docs:{...WithExpansion.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-expansion-table.component.ts\n            --\x3e\n            <app-expansion-table\n                [size]="size"\n                [showSelectionColumn]="showSelectionColumn"\n                [sortable]="sortable"\n                [stickyHeader]="stickyHeader"\n                [skeleton]="skeleton"\n                [striped]="striped"\n                [isDataGrid]="isDataGrid"\n                [showExpandAllToggle]="showExpandAllToggle">\n            </app-expansion-table>\n        </cds-table-container>\n    `\n})',...WithExpansion.parameters?.docs?.source}}},WithDynamicContent.parameters={...WithDynamicContent.parameters,docs:{...WithDynamicContent.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-custom-table.component.ts\n            --\x3e\n            <app-custom-table\n                [size]="size"\n                [showSelectionColumn]="showSelectionColumn"\n                [sortable]="sortable"\n                [stickyHeader]="stickyHeader"\n                [skeleton]="skeleton"\n                [striped]="striped"\n                [isDataGrid]="isDataGrid">\n            </app-custom-table>\n        </cds-table-container>\n    `\n})',...WithDynamicContent.parameters?.docs?.source}}},WithOverflowMenu.parameters={...WithOverflowMenu.parameters,docs:{...WithOverflowMenu.parameters?.docs,source:{originalSource:'args => ({\n  props: {\n    ...getProps({\n      description: "With overflow menu"\n    }, "args")\n  },\n  template: `\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-overflow-table.component.ts\n            --\x3e\n            <app-overflow-table\n                [size]="size"\n                [showSelectionColumn]="showSelectionColumn"\n                [sortable]="sortable"\n                [stickyHeader]="stickyHeader"\n                [skeleton]="skeleton"\n                [striped]="striped"\n                [isDataGrid]="isDataGrid">\n            </app-overflow-table>\n        </cds-table-container>\n    `\n})',...WithOverflowMenu.parameters?.docs?.source}}},WithPagination.parameters={...WithPagination.parameters,docs:{...WithPagination.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-pagination-table.component.ts\n            --\x3e\n            <app-pagination-table\n                [skeleton]="skeleton"\n                [sortable]="sortable"\n                [totalDataLength]="totalDataLength"\n                [showSelectionColumn]="showSelectionColumn"\n                [stickyHeader]="stickyHeader"\n                [skeleton]="skeleton"\n                [model]="model">\n            </app-pagination-table>\n        </cds-table-container>\n    `\n})',...WithPagination.parameters?.docs?.source}}},FromComponents.parameters={...FromComponents.parameters,docs:{...FromComponents.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <table cdsTable [sortable]="false">\n            <thead cdsTableHead>\n                <tr>\n                    <th\n                        scope="col"\n                        cdsTableHeadCell\n                        *ngFor="let column of model.header"\n                        [column]="column">\n                    </th>\n                </tr>\n            </thead>\n            <tbody cdsTableBody>\n                <tr\n                    *ngFor="let row of model.data"\n                    cdsTableRow\n                    [row]="row">\n                    <td\n                        *ngFor="let item of row; let j = index"\n                        cdsTableData\n                        [item]="item"\n                        [class]="model.header[j].className"\n                        [ngStyle]="model.header[j].style">\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    `\n})',...FromComponents.parameters?.docs?.source}}},Skeleton.parameters={...Skeleton.parameters,docs:{...Skeleton.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-skeleton-table.component.ts\n        --\x3e\n        <app-skeleton-table\n            [skeletonModel]="skeletonModel"\n            [size]="size"\n            [striped]="striped">\n        </app-skeleton-table>\n    `\n})',...Skeleton.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","WithoutData","WithToolbar","WithDisabledRows","WithToolbarWithoutToolbarAction","FilteringOverriding","Filtering","WithExpansion","WithDynamicContent","WithOverflowMenu","WithPagination","FromComponents","Skeleton"]}}]);