@aquera/nile-elements 0.1.57-beta-1.9 → 0.1.58-beta-1.0

package/src/nile-table-header-item/nile-table-header-item.ts

@@ -15,6 +15,7 @@ import { customElement, state, property } from 'lit/decorators.js';
 import { styles } from './nile-table-header-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
+import { createResizeHandler } from '../internal/resizable-table-helper';
 
 /**
  * Nile icon component.
@@ -43,6 +44,9 @@ export class NileTableHeaderItem extends NileElement {
   @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =
     '';
 
+  /** Enables the resize functionality. */
+  @property({ type: Boolean, reflect: true }) resizable = false;
+
   @state() sorting_ct = 0;
 
   /* #endregion */
@@ -66,53 +70,98 @@ export class NileTableHeaderItem extends NileElement {
     this.emit('nile-search', { value: e.detail.value });
   }
 
+  private handleResizeStart = createResizeHandler(this, 50);
+
   public render(): TemplateResult {
-    return html` ${this.hasSlotController.test('[default]')
-      ? html`
-      <div class="header__item__wrapper" part="nile__table-header-cell">
-        <div class="headers">
-          <slot> </slot>
-          ${this.havesort && this.sorting_ct % 3 === 0
-            ? html`<nile-icon
-                name="sortdown"
-                size="16"
-                @click=${this.handleSort}
-                class="hover__arrow"
-              ></nile-icon>`
-            : null}
-          ${this.havesort && this.sorting_ct % 3 === 1
-            ? html`<nile-icon
-                name="sortdown"
-                size="16"
-                @click=${this.handleSort}
-              ></nile-icon>`
-            : null}
-          ${this.havesort && this.sorting_ct % 3 === 2
-            ? html`<nile-icon
-                name="sortup"
-                size="16"
-                @click=${this.handleSort}
-              ></nile-icon>`
-            : null}
-          ${this.iconName
-            ? html` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
-            : html``}
-          ${this.havefilter
-            ? html` <nile-popover title="Filter" placement="bottom">
-                <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
-                <nile-input
-                  placeholder="Search"
-                  @nile-input=${this.handleSearch}
-                  part="filter__search"
-                ></nile-input>
-                <slot name="filter__content" part="filter__content"></slot>
-              </nile-popover>`
-            : html``}
-        </div>
-      </div>`
-      : null}`;
+    if (this.resizable) {
+      return html`
+        <div class="header__item__wrapper" part="nile__table-header-cell">
+          <div class="headers">
+            <slot> </slot>
+            ${this.havesort && this.sorting_ct % 3 === 0
+              ? html`<nile-icon
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                  class="hover__arrow"
+                ></nile-icon>`
+              : null}
+            ${this.havesort && this.sorting_ct % 3 === 1
+              ? html`<nile-icon
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
+              : null}
+            ${this.havesort && this.sorting_ct % 3 === 2
+              ? html`<nile-icon
+                  name="sortup"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
+              : null}
+            ${this.iconName
+              ? html` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
+              : html``}
+            ${this.havefilter
+              ? html` <nile-popover title="Filter" placement="bottom">
+                  <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
+                  <nile-input
+                    placeholder="Search"
+                    @nile-input=${this.handleSearch}
+                    part="filter__search"
+                  ></nile-input>
+                  <slot name="filter__content" part="filter__content"></slot>
+                </nile-popover>`
+              : html``}
+          </div>
+          <div class="resizer" @mousedown=${this.handleResizeStart}></div>
+        </div>`;
+    } else {
+      return html`
+        <div class="header__item__wrapper" part="nile__table-header-cell">
+          <div class="headers">
+            <slot> </slot>
+            ${this.havesort && this.sorting_ct % 3 === 0
+              ? html`<nile-icon
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                  class="hover__arrow"
+                ></nile-icon>`
+              : null}
+            ${this.havesort && this.sorting_ct % 3 === 1
+              ? html`<nile-icon
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
+              : null}
+            ${this.havesort && this.sorting_ct % 3 === 2
+              ? html`<nile-icon
+                  name="sortup"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
+              : null}
+            ${this.iconName
+              ? html` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
+              : html``}
+            ${this.havefilter
+              ? html` <nile-popover title="Filter" placement="bottom">
+                  <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
+                  <nile-input
+                    placeholder="Search"
+                    @nile-input=${this.handleSearch}
+                    part="filter__search"
+                  ></nile-input>
+                  <slot name="filter__content" part="filter__content"></slot>
+                </nile-popover>`
+              : html``}
+          </div>
+        </div>`;
+    }
   }
-  /* #endregion */
 }
 
 export default NileTableHeaderItem;

package/vscode-html-custom-data.json

@@ -2838,7 +2838,7 @@
     },
     {
       "name": "nile-select",
-      "description": "Events:\n\n  * `nile-change` {} - Emitted when the control's value changes.\n\n  * `nile-clear` {} - Emitted when the control's value is cleared.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-show` {} - Emitted when the select's menu opens.\n\n  * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the select's menu closes.\n\n  * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n  * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\nSlots:\n\n  * ` ` {} - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.\n\n  * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n  * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n  * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n  * `expand-icon` {} - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internal-search-placeholder` {`string`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - The select's required attribute.\n\nProperties:\n\n  * `styles` - \n\n  * `formControlController` - \n\n  * `hasSlotController` - \n\n  * `typeToSelectString` {`string`} - \n\n  * `typeToSelectTimeout` {`number`} - \n\n  * `popup` - \n\n  * `combobox` {`HTMLSlotElement`} - \n\n  * `displayInput` {`HTMLInputElement`} - \n\n  * `valueInput` {`HTMLInputElement`} - \n\n  * `listbox` {`HTMLSlotElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `displayLabel` {`string`} - \n\n  * `currentOption` - \n\n  * `selectedOptions` {`NileOption[]`} - \n\n  * `oldValue` {`string | string[]`} - \n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchValue` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internalSearchPlaceHolder` {`string`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `oldMaxOptionsVisible` {`number`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `observer` {`MutationObserver | null`} - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string | undefined`} - \n\n  * `min` {`string | number | Date | undefined`} - \n\n  * `max` {`string | number | Date | undefined`} - \n\n  * `step` {`number | \"any\" | undefined`} - \n\n  * `required` {`boolean`} - The select's required attribute.\n\n  * `minlength` {`number | undefined`} - \n\n  * `maxlength` {`number | undefined`} - \n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `nile-change` {} - Emitted when the control's value changes.\n\n  * `nile-clear` {} - Emitted when the control's value is cleared.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-show` {} - Emitted when the select's menu opens.\n\n  * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the select's menu closes.\n\n  * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n  * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\nSlots:\n\n  * ` ` {} - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.\n\n  * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n  * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n  * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n  * `expand-icon` {} - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internal-search-placeholder` {`string`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - The select's required attribute.\n\nProperties:\n\n  * `styles` - \n\n  * `formControlController` - \n\n  * `hasSlotController` - \n\n  * `typeToSelectString` {`string`} - \n\n  * `typeToSelectTimeout` {`number`} - \n\n  * `popup` - \n\n  * `combobox` {`HTMLSlotElement`} - \n\n  * `displayInput` {`HTMLInputElement`} - \n\n  * `valueInput` {`HTMLInputElement`} - \n\n  * `listbox` {`HTMLSlotElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `displayLabel` {`string`} - \n\n  * `currentOption` - \n\n  * `selectedOptions` {`NileOption[]`} - \n\n  * `oldValue` {`string | string[]`} - \n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchValue` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internalSearchPlaceHolder` {`string`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `oldMaxOptionsVisible` {`number`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string | undefined`} - \n\n  * `min` {`string | number | Date | undefined`} - \n\n  * `max` {`string | number | Date | undefined`} - \n\n  * `step` {`number | \"any\" | undefined`} - \n\n  * `required` {`boolean`} - The select's required attribute.\n\n  * `minlength` {`number | undefined`} - \n\n  * `maxlength` {`number | undefined`} - \n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "size",
@@ -3402,7 +3402,7 @@
     },
     {
       "name": "nile-table-body",
-      "description": "nile-table-body component.\n\nAttributes:\n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\nProperties:\n\n  * `defaultSlot` {`HTMLSlotElement`} - The styles for TableBody\n\n  * `_childNodes` {`HTMLElement[]`} - \n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `rows_data` {`any[]`} - \n\n  * `header_rows_data` {`any[]`} - \n\n  * `sort__index` {`number`} - \n\n  * `search__index` {`number`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "nile-table-body component.\n\nAttributes:\n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\nProperties:\n\n  * `defaultSlot` {`HTMLSlotElement`} - The styles for TableBody\n\n  * `_childNodes` {`HTMLElement[]`} - \n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `rows_data` {`any[]`} - \n\n  * `header_rows_data` {`any[]`} - \n\n  * `sort__index` {`number`} - \n\n  * `search__index` {`number`} - \n\n  * `hasResizableColumns` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "type",
@@ -3420,12 +3420,18 @@
     },
     {
       "name": "nile-table-cell-item",
-      "description": "Nile table Cell Item component.\n\nProperties:\n\n  * `hasSlotController` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
-      "attributes": []
+      "description": "Nile table Cell Item component.\n\nAttributes:\n\n  * `resizable` {`boolean`} - Enables the resize functionality.\n\nProperties:\n\n  * `hasSlotController` - \n\n  * `resizable` {`boolean`} - Enables the resize functionality.\n\n  * `handleResizeStart` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "resizable",
+          "description": "`resizable` {`boolean`} - Enables the resize functionality.\n\nProperty: resizable\n\nDefault: false",
+          "valueSet": "v"
+        }
+      ]
     },
     {
       "name": "nile-table-header-item",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `havesort` {`boolean`} - Enables the sort functionality.\n\n  * `havefilter` {`boolean`} - Enables the sort functionality.\n\n  * `icon-name` {`string`} - Places the icon .\n\nProperties:\n\n  * `hasSlotController` - \n\n  * `havesort` {`boolean`} - Enables the sort functionality.\n\n  * `havefilter` {`boolean`} - Enables the sort functionality.\n\n  * `iconName` {`string`} - Places the icon .\n\n  * `sorting_ct` {`number`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nAttributes:\n\n  * `havesort` {`boolean`} - Enables the sort functionality.\n\n  * `havefilter` {`boolean`} - Enables the sort functionality.\n\n  * `icon-name` {`string`} - Places the icon .\n\n  * `resizable` {`boolean`} - Enables the resize functionality.\n\nProperties:\n\n  * `hasSlotController` - \n\n  * `havesort` {`boolean`} - Enables the sort functionality.\n\n  * `havefilter` {`boolean`} - Enables the sort functionality.\n\n  * `iconName` {`string`} - Places the icon .\n\n  * `resizable` {`boolean`} - Enables the resize functionality.\n\n  * `sorting_ct` {`number`} - \n\n  * `handleResizeStart` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "havesort",
@@ -3440,6 +3446,11 @@
         {
           "name": "icon-name",
           "description": "`icon-name` {`string`} - Places the icon .\n\nProperty: iconName\n\nDefault: "
+        },
+        {
+          "name": "resizable",
+          "description": "`resizable` {`boolean`} - Enables the resize functionality.\n\nProperty: resizable\n\nDefault: false",
+          "valueSet": "v"
         }
       ]
     },