@orangelogic/design-system 2.19.0-pr77202.21

package/library/packages/atoms/src/components/table/modules/HoverMenu.d.ts

@@ -0,0 +1,13 @@
+import { IHoverMenu } from '../../../../../types/src/table';
+import { RowComponent, Tabulator } from '../tabulator-tables';
+import { default as Module } from '../tabulator-tables/core/Module';
+
+export default class HoverMenu extends Module implements IHoverMenu {
+    static readonly moduleName = "hoverMenu";
+    hoverMenuField: string;
+    constructor(table: Tabulator);
+    initialize(): void;
+    handleRowMouseEnter(e: Event, row: RowComponent): void;
+    handleRowMouseLeave(e: Event, row: RowComponent): void;
+    layoutRow(row: RowComponent): void;
+}

package/library/packages/atoms/src/components/table/table.d.ts

@@ -0,0 +1,622 @@
+import { default as CxCheckbox } from '../checkbox/checkbox.ts';
+import { default as CxIconButton } from '../icon-button/icon-button.ts';
+import { default as CxLineClamp } from '../line-clamp/line-clamp.ts';
+import { default as CxSpace } from '../space/space.ts';
+import { default as CxTag } from '../tag/tag.ts';
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { PaginationCounter } from '../../../../types/src/pagination';
+import { HoverMenuOptions, ColumnDefinition, Options, OptionsColumns, OptionsSpreadsheet, SheetDefinition } from '../../../../types/src/table';
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { CxTableRowActions, CxTableToolbar } from './components';
+import { RowComponent, TabulatorFull as Tabulator } from './tabulator-tables';
+
+/**
+ * @summary Tables are used to display data in a structured format.
+ *
+ * @csspart table - The table element.
+ *
+ * @cssproperty [--width=100%] - The width of the table.
+ * @cssproperty [--height=100%] - The height of the table. By setting a height on the table, the Virtual DOM is enabled and the render speed is improved.
+ * @cssproperty [--min-height=200px] - The minimum height of the table.
+ * @cssproperty [--max-height=100%] - The maximum height of the table.
+ * @cssproperty [--color=var(--cx-color-neutral-700)] - The color of the table.
+ * @cssproperty [--background-color=var(--cx-color-neutral-400)] - The background color of the table.
+ * @cssproperty [--border-width=var(--cx-input-border-width)] - The width of the table border.
+ * @cssproperty [--border-color=var(--cx-input-border-color)] - The color of the table border.
+ * @cssproperty [--font-size=var(--cx-font-size-medium)] - The font size of the table.
+ * @cssproperty [--row-background-color=var(--cx-color-neutral-0)] - The background color of the table rows.
+ * @cssproperty [--row-even-background-color=var(--cx-color-neutral-100)] - The background color of the even table rows.
+ * @cssproperty [--row-hover-background-color=var(--cx-color-neutral-50)] - The background color of the table rows on hover.
+ * @cssproperty [--row-even-hover-background-color=var(--cx-color-neutral-100)] - The background color of the even table rows on hover.
+ * @cssproperty [--frozen-border-color=var(--cx-color-neutral-200)] - The color of the frozen table rows border.
+ * @cssproperty [--header-background-color=var(--cx-color-neutral-50)] - The background color of the table header.
+ * @cssproperty [--header-hover-background-color=var(--cx-color-neutral-200)] - The background color of the table header on hover.
+ * @cssproperty [--header-font-weight=var(--cx-font-weight-regular)] - The font weight of the table header.
+ * @cssproperty [--header-font-size=var(--cx-font-size-small)] - The font size of the table header.
+ * @cssproperty [--header-color=var(--cx-color-neutral-800)] - The color of the table header.
+ * @cssproperty [--header-border-color=var(--cx-color-neutral-200)] - The color of the table header border.
+ * @cssproperty [--header-height=auto] - The height of the table header.
+ * @cssproperty [--header-horizontal-padding=var(--cx-spacing-2x-small)] - The horizontal padding of the table header.
+ * @cssproperty [--cell-border-color=var(--cx-color-neutral-200)] - The color of the table cell border.
+ * @cssproperty [--cell-horizontal-padding=var(--cx-spacing-2x-small)] - The horizontal padding of the table cell.
+ * @cssproperty [--group-count-color=var(--cx-color-danger-500)] - The color of the table group count.
+ * @cssproperty [--group-row-background-color=var(--cx-color-neutral-300)] - The background color of the table group row.
+ * @cssproperty [--group-row-hover-background-color=var(--cx-color-neutral-400)] - The background color of the table group row on hover.
+ * @cssproperty [--group-row-border-color=var(--cx-color-neutral-200)] - The color of the table group row border.
+ * @cssproperty [--row-header-border-color=var(--cx-color-neutral-200)] - The color of the table row header border.
+ * @cssproperty [--placeholder-color=var(--cx-color-neutral-800)] - The color of the table placeholder.
+ * @cssproperty [--placeholder-font-weight=var(--cx-font-weight-regular)] - The font weight of the table placeholder.
+ * @cssproperty [--placeholder-font-size=var(--cx-font-size-medium-large)] - The font size of the table placeholder.
+ * @cssproperty [--hover-menu-background-color=var(--cx-color-neutral-50)] - The background color of the table hover menu.
+ *
+ * @event {{ args: any[] }} cx-table.[event_name] - Emitted when the event with such name is emitted on the table.
+ * Must register the event listener on the table element to receive the event.
+ * E.g: `cx-table.rowMoved` will fire when `rowMoved` event is emitted.
+ */
+export default class CxTable extends CortexElement {
+    #private;
+    static readonly styles: CSSResultGroup;
+    private readonly localize;
+    static readonly dependencies: {
+        'cx-checkbox': typeof CxCheckbox;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-line-clamp': typeof CxLineClamp;
+        'cx-space': typeof CxSpace;
+        'cx-table-row-actions': typeof CxTableRowActions;
+        'cx-table-toolbar': typeof CxTableToolbar;
+        'cx-tag': typeof CxTag;
+    };
+    private resizeObserver;
+    private table;
+    private tableToolbar;
+    movableRows: boolean;
+    movableColumns: boolean;
+    data: Options['data'];
+    /**
+     * The height of each table row. If undefined, the row height will be automatically calculated based on the content.
+     */
+    rowHeight: number | undefined;
+    /**
+     * The layout of the table. Options include:
+     * - `fitData`: Resizes the tables columns to fit the data held in each column, unless you specify a width or minWidth in the column constructor. If the width of all columns exceeds the width of the containing element, a scroll bar will appear.
+     * - `fitColumns`: Resizes columns so they fit perfectly in the available table width.
+     * - `fitDataFill`: Functions in the same way as the fitData mode, but ensures that rows are always at least the full width of the table.
+     * - `fitDataStretch`: Functions in the same way as the fitDataFill mode, but instead of stretching the empty row to fill the table it stretches the last visible column.
+     * - `fitDataTable`: Sets the column widths in the same way as the fitData mode, but it will also then resize the width of the table to match the total width of the columns
+     */
+    layout: Options['layout'];
+    /**
+     * The configuration for the columns in the table.
+     */
+    columns: OptionsColumns['columns'];
+    /**
+     * Footer element to display for the table.
+     */
+    footerElement: Options['footerElement'] | undefined;
+    /**
+     * Responsive layout will automatically hide/show columns to fit the width of the Tabulator element. This allows for clean rendering of tables on smaller mobile devices, showing important data while avoiding horizontal scroll bars. You can enable responsive layouts using the responsiveLayout option.
+     *
+     * There are two responsive layout modes available:
+     *
+     * hide - hide columns that no longer fit in the table
+     * collapse - collapse columns that no longer fit on the table into a list under the row
+     *
+     * Hide Extra Columns
+     * By default, columns will be hidden from right to left as the width of the table decreases. You can choose exactly how columns are hidden using the responsive property in the column definition object.
+     *
+     * When responsive layout is enabled, all columns are given a default responsive value of 1. The higher you set this value the sooner that column will be hidden as the table width decreases. If two columns have the same responsive value then they are hidden from right to left (as defined in the column definition array, ignoring user moving of the columns). If you set the value to 0 then the column will never be hidden regardless of how narrow the table gets.
+     */
+    responsiveLayout: Options['responsiveLayout'];
+    /**
+     * If you set the responsiveLayout option to collapse the values from hidden columns will be displayed in a title/value list under the row.
+     *
+     * In this mode an object containing the title of each hidden column and its value is generated and then used to generate a list displayed in a div .tabulator-responsive-collapse under the row data.
+     *
+     * The inbuilt collapse formatter creates a table to neatly display the hidden columns. If you would like to format the data in your own way you can use the responsiveLayoutCollapseFormatter, it take an object of the column values as an argument and must return the HTML content of the div.
+     *
+     * This function should return an empty string if there is no data to display.
+     */
+    responsiveLayoutCollapseFormatter: Options['responsiveLayoutCollapseFormatter'] | undefined;
+    /**
+     * By default any formatter set on the column is applied to the value that will appear in the list. while this works for most formatters it can cause issues with the progress formatter which relies on being inside a cell.
+     *
+     * If you would like to disable column formatting in the collapsed list, you can use the responsiveLayoutCollapseUseFormatters option:
+     */
+    responsiveLayoutCollapseUseFormatters: Options['responsiveLayoutCollapseUseFormatters'] | undefined;
+    /**
+     * Sometimes it can be useful to add a visual header to the start of a row.
+     * The `rowHeader` option allows you to define a column definition for a stylized header column at the start of the row.
+     *
+     * This can be great for adding row number, movable row handles or row selections, and keeps the controls visually separated from the table data.
+     */
+    rowHeader: Options['rowHeader'] | undefined;
+    /**
+     * Text direction of the table.
+     */
+    textDirection: Options['textDirection'] | undefined;
+    /**
+     * Collapsed lists are displayed to the user by default, if you would prefer they start closed so the user can open them you can use the responsiveLayoutCollapseStartOpen option.
+     */
+    responsiveLayoutCollapseStartOpen: Options['responsiveLayoutCollapseStartOpen'] | undefined;
+    /**
+     * The number of pixels rendered above and below the visible rows to ensure a smooth scrolling experience.
+     */
+    renderVerticalBuffer: Options['renderVerticalBuffer'];
+    /**
+     * If 'basic', virtual DOM is disabled.
+     */
+    renderVertical: Options['renderVertical'];
+    /**
+     * The columnDefaults option allows you to set default configs for all columns in the table.
+     */
+    columnDefaults: Partial<ColumnDefinition>;
+    /**
+     * Whether to display a search box
+     */
+    canSearch: boolean;
+    /**
+     * Fields to search in the table.
+     */
+    searchFields: string[];
+    /**
+     * Whether to display a create new button
+     */
+    canAdd: boolean;
+    /**
+     * The label of the create new button
+     */
+    addLabel: string;
+    /**
+     * Whether to display a export CSV button
+     */
+    canExportCsv: boolean;
+    /**
+     * Whether to display a export XML button
+     */
+    canExportXml: boolean;
+    /**
+     * Whether to display a export custom button
+     */
+    canExportCustom: boolean;
+    /**
+     * The URL to load the data from.
+     */
+    ajaxURL: string | undefined;
+    /**
+     * If you need more control over the url of the request that you can get from the ajaxURL and ajaxParams properties, the you can use the ajaxURLGenerator property to pass in a callback that will generate the URL for you.
+     *
+     * The callback should return a string representing the URL to be requested.
+     */
+    ajaxURLGenerator: ((url: string, config: any, params: any) => string) | undefined;
+    /**
+     * Parameters to be passed to remote Ajax data loading request.
+     */
+    ajaxParams: Record<string, string> | undefined;
+    ajaxResponse: Options['ajaxResponse'] | undefined;
+    /**
+     * Lookup list to link fields expected by the server to their function
+     * ```typescript
+     * default: {
+     *   "page": "page",
+     *   "size": "size",
+     *   "sorters": "sorters",
+     *   "filters": "filters",
+     * }
+     * ```
+     */
+    dataSendParams: Record<string, string> | undefined;
+    /**
+     * Lookup list to link expected data fields from the server to their function
+     * ```typescript
+     * default: {
+     *   "current_page": "current_page",
+     *   "last_page": "last_page",
+     *   "data": "data",
+     *   }
+     * ```
+     */
+    dataReceiveParams: Record<string, string> | undefined;
+    /**
+     * Tabulator will automatically attempt to redraw the data contained in the table if the containing element for the table is resized. To disable this functionality, use no-auto-resize.
+     */
+    noAutoResize: boolean;
+    /**
+     * You can allow the user to manually resize rows by dragging the top or bottom border of a row. To enable this functionality, set the resizableRows property to true.
+     */
+    resizableRows: boolean;
+    /**
+     * When the resizableColumnFit table definition option is set to true, when you resize a column, its adjacent column is resized in the opposite direction to keep the total width of the columns the same.
+     */
+    resizableColumnFit: boolean;
+    /**
+     * Allows the user to control the height of columns in the table by dragging the border of the column.
+     * These guides will only appear if the `resizableRows` option is enabled.
+     */
+    resizableColumnGuide: boolean;
+    /**
+     * Allows the user to control the height of rows in the table by dragging the bottom border of the row.
+     * These guides will only appear on columns with the `resizable` option enabled in their column definition.
+     */
+    resizableRowGuide: boolean;
+    /**
+     * Number of frozen rows at the top of the table, or
+     * An array of value that will freeze a row if frozenRowsField matches the value inside, or
+     * A function that returns a boolean value to determine if a row should be frozen.
+     */
+    frozenRows: number | string[] | ((row: RowComponent) => boolean) | undefined;
+    /**
+     * The field to use for matching frozenRows values.
+     */
+    frozenRowsField: string;
+    /**
+     * The placeholder text to display when the table is empty.
+     */
+    placeholder: string;
+    /**
+     * String/function to select field to group rows by.
+     */
+    groupBy: string | string[] | ((data: any) => any) | Array<string | ((data: any) => any)> | undefined;
+    /**
+     * Contents of the group headers
+     */
+    groupHeader: Options['groupHeader'] | undefined;
+    /**
+     * Whether to display the item count in the group header.
+     */
+    groupHeaderCount: boolean;
+    /**
+     * The amount of pixels to indent group rows per level
+     */
+    groupIndent: number;
+    /**
+     * When printing you may want to apply a different group header from the one usually used in the table.
+     * You can now do this using the groupHeaderPrint table option, which takes the same inputs as the standard groupHeader property
+     */
+    groupHeaderPrint: Options['groupHeaderPrint'];
+    /**
+     * When copying to clipboard you may want to apply a different group header from the one usually used in the table.
+     * You can now do this using the groupHeaderClipboard table option, which takes the same inputs as the standard groupHeader property.
+     */
+    groupHeaderClipboard: Options['groupHeaderClipboard'] | undefined;
+    /**
+     * When downloading you may want to apply a different group header from the one usually used in the table.
+     * You can now do this using the groupHeaderDownload table option, which takes the same inputs as the standard groupHeader property.
+     */
+    groupHeaderDownload: Options['groupHeaderDownload'] | undefined;
+    /**
+     * When the getHtml function is called you may want to apply a different group header from the one usually used in the table.
+     * You can now do this using the groupHeaderHtmlOutput table option, which takes the same inputs as the standard groupHeader property.
+     */
+    groupHeaderHtmlOutput: Options['groupHeaderHtmlOutput'];
+    /**
+     * Whether the group should start open or closed.
+     */
+    groupStartOpen: Options['groupStartOpen'];
+    /**
+     * When rows are grouped by field, group with values in this array will start open.
+     */
+    groupStartOpenValues: string[] | null | undefined;
+    /**
+     * The element to use for the group toggle. If false, prevent clicking anywhere in the group toggling the group.
+     */
+    groupToggleElement: 'arrow' | 'header' | false;
+    /**
+     * By default Tabulator will create groups for rows based on the values contained in the row data. if you want to explicitly define which field values groups should be created for at each level, you can use the groupValues option.
+     *
+     * This option takes an array of value arrays, each item in the first array should be a list of acceptable field values for groups at that level
+     */
+    groupValues: any[][];
+    /**
+     * Enabling the groupUpdateOnCellEdit option will cause a row to be regrouped when the cell it is grouped by is edited.
+     */
+    groupUpdateOnCellEdit: boolean;
+    /**
+     * If true, the table will be rendered as a tree.
+     */
+    dataTree: boolean;
+    /**
+     * If dataTree is true, this will be the field that contains the child data.
+     */
+    dataTreeChildField: string;
+    /**
+     * If dataTree is true, this will be the field that contains the loading state.
+     */
+    dataTreeLoadingField: string;
+    /**
+     * If dataTree is true, this will be the field that contains the has more state.
+     */
+    dataTreeHasMoreField: string;
+    /**
+     * If false, only the top level rows are filtered and the child rows left unfiltered.
+     */
+    dataTreeFilter: boolean;
+    /**
+     * If false, only the top level rows are sorted and the child rows left unsorted.
+     */
+    dataTreeSort: boolean;
+    /**
+     * By default the toggle element will be inserted into the first column on the table. If you want the toggle element
+     * to be inserted in a different column you can pass the field name of the column to the dataTreeElementColumn setup option
+     */
+    dataTreeElementColumn: boolean | string | undefined;
+    /**
+     * The branch element is the right angled line running from parent to child to indicate its position in the tree.
+     * If false, the branch element will not be displayed.
+     * Alternatively, can provide a HTML string to use as the branch element.
+     */
+    dataTreeBranchElement: boolean | string | undefined;
+    /**
+     * The amount of pixels to indent the child rows.
+     */
+    dataTreeChildIndent: number;
+    /**
+     * If true, the tree will start expanded. Either:
+     * - A boolean to indicate whether all nodes should start expanded or collapsed;
+     * - An array of booleans to indicate how each level of the tree should be expanded;
+     * - A function that will be passed in a row component and the level of that row in the table (starting at 0), and return a boolean value to indicate the rows expansion state.
+     */
+    dataTreeStartExpanded: boolean | boolean[] | ((row: RowComponent, level: number) => boolean);
+    /**
+     * If true, the tree will propagate the selection state to the child rows.
+     */
+    dataTreeSelectPropagate: boolean;
+    /**
+     * Footer element to display for the table.
+     */
+    dataTreeExpandElement: string | HTMLElement | undefined;
+    dataTreeCollapseElement: string | HTMLElement | undefined;
+    /**
+     * If true, the table will be rendered as a spreadsheet.
+     */
+    spreadsheet: boolean;
+    /**
+     * The number of columns to display in the spreadsheet.
+     */
+    spreadsheetColumns: number;
+    /**
+     * The number of rows to display in the spreadsheet.
+     */
+    spreadsheetRows: number;
+    /**
+     * The column definition for the spreadsheet.
+     */
+    spreadsheetColumnDefinition: OptionsSpreadsheet['spreadsheetColumnDefinition'];
+    /**
+     * If true, export the entirety of a dataset including empty columns and rows.
+     */
+    spreadsheetOutputFull: boolean;
+    /**
+     * The value to set in the cell after the user has finished editing the cell and left it blank.
+     */
+    editorEmptyValue: any;
+    /**
+     * The definition of the sheets to display in the spreadsheet.
+     */
+    spreadsheetSheets: SheetDefinition[] | undefined;
+    /**
+     * By default Tabulator will load in multiple sheets and show the contents of the first sheet,
+     * you can then programmatically choose when to show other sheets to the user. turn this on to
+     * show tabs in the footer to allow user to navigate between sheets.
+     */
+    spreadsheetSheetTabs: boolean;
+    /**
+     * The data to display in the spreadsheet.
+     */
+    spreadsheetData: unknown[][] | undefined;
+    /**
+     * The number of ranges that can be selected.
+     * If this number is > 1, when user selects a range, the first range will be deselected to allow the next range to be selected.
+     */
+    selectableRange: number;
+    noSelectable: boolean;
+    /**
+     * By default you can only select ranges by selecting cells on the table. If you would like to allow the user to
+     * select all cells in a column by clicking on the column header, then you can set the selectableRangeColumns option to true
+     */
+    selectableRangeColumns: boolean;
+    selectableRangeRows: boolean;
+    selectableRangeClearCells: boolean;
+    /**
+     * The editTriggerEvent option lets you choose which type of interaction event will trigger an edit on a cell.
+     *
+     * @example
+     * var table = new Tabulator("#example-table", {
+     *     editTriggerEvent:"dblclick", // trigger edit on double click
+     * });
+     *
+     * This option can take one of three values:
+     *
+     * - focus - trigger edit when the cell has focus (default)
+     * - click - trigger edit on single click on cell
+     * - dblclick - trigger edit on double click on cell
+     *
+     * This option does not affect navigation behavior, cells edits will still be triggered when they are navigated to
+     * through arrow keys or tabs.
+     */
+    editTriggerEvent: 'click' | 'dblclick' | 'focus';
+    /**
+     * Auto focus on a cell if the range selection is only one cell
+     */
+    selectableRangeAutoFocus: Options['selectableRangeAutoFocus'];
+    /**
+     * You can enable clipboard functionality using the clipboard config option. It can take one of four possible values:
+     *     true - enable clipboard copy and paste
+     *     "copy" - enable only copy functionality
+     *     "paste" - enable only paste functionality
+     *     false - disable all clipboard functionality (default)
+     */
+    clipboard: boolean | 'copy' | 'paste';
+    /**
+     * The clipboardCopyRowRange option takes a Row Range Lookup value and allows you to choose which rows are included in the clipboard output.
+     */
+    clipboardCopyRowRange: 'visible' | 'active' | 'selected' | 'all' | 'range';
+    /**
+     * Tabulator has one built in paste parser, that is designed to take a table formatted text string from the clipboard and turn it into row data. it breaks the data into rows on a newline character \n and breaks the rows down to columns on a tab character \t.
+     * It will then attempt to work out which columns in the data correspond to columns in the table. It tries three different ways to achieve this. First it checks the values of all columns in the first row of data to see if they match the titles of columns in the table. If any of the columns don't match it then tries the same approach but with the column fields. If either of those options match, Tabulator will map those columns to the incoming data and import it into rows. If there is no match then Tabulator will assume the columns in the data are in the same order as the visible columns in the table and import them that way.
+     *
+     * The inbuilt parser will reject any clipboard data that does not contain at least one row and two columns, in that case the clipboardPasteError will be triggered.
+     *
+     * If you extend the clipboard module to add your own parser, you can set it to be used as default with the clipboardPasteParser property.
+     * Built-in parsers are "table" and "range".
+     */
+    clipboardPasteParser: Options['clipboardPasteParser'] | undefined;
+    /**
+     * Once the data has been parsed into row data, it will be passed to a paste action to be added to the table. There are three inbuilt paste actions:
+     *
+     * insert - Inserts data into the table using the addRows function (default)
+     * update - Updates data in the table using the updateOrAddData function
+     * replace - replaces all data in the table using the setData function
+     */
+    clipboardPasteAction: 'insert' | 'update' | 'replace' | 'range';
+    /**
+     * By default Tabulator includes column headers, row groups and column calculations in the clipboard output.
+     *
+     * You can choose to remove column headers groups, row groups or column calculations from the output data by setting the values in the clipboardCopyConfig option in the table definition:
+     */
+    clipboardCopyConfig: Options['clipboardCopyConfig'] | undefined;
+    /**
+     * By default Tabulator will copy some of the tables styling along with the data to give a better visual appearance when pasted into other documents.
+     *
+     * If you want to only copy the un-styled data then you should set the clipboardCopyStyled option to false in the table options object:
+     */
+    clipboardNoCopyStyled: boolean;
+    /**
+     * If true, the table will be paginated.
+     */
+    pagination: boolean;
+    /**
+     * The mode of the pagination.
+     */
+    paginationMode: Options['paginationMode'];
+    /**
+     * The number of rows in each page.
+     */
+    paginationSize: number | undefined;
+    /**
+     * Specify that a specific page should be loaded when the table first load.
+     */
+    paginationInitialPage: number;
+    /**
+     * The number of pagination page buttons shown in the footer.
+     */
+    paginationButtonCount: number;
+    /**
+     * Whether to show the pagination buttons.
+    /**
+     * Whether to show the pagination buttons.
+     */
+    showPaginationButtons: boolean;
+    /**
+     * Controls page size options. Either:
+     * - true: Page size options will be multiples of the current page size.
+     * - array: Page size options will be the numbers in the array. If 'true' is in the array, 'All' will be added to the list of options.
+     */
+    paginationSizeSelector: true | Array<number | boolean> | undefined;
+    /**
+     * When using the addRow function on a paginated table, rows will be added relative to the current page (ie to the top or bottom of the current page), with overflowing rows being shifted onto the next page.
+     *
+     * If you would prefer rows to be added relative to the table (firs/last page) then you can use the paginationAddRow option. it can take one of two values:
+     *
+     * page - add rows relative to current page (default)
+     * table - add rows relative to the table
+     */
+    paginationAddRow: 'table' | 'page';
+    /**
+     * The paginationCounter property of the cx-pagination component.
+     */
+    paginationCounter: PaginationCounter;
+    /**
+     * Whether to show the button to go the first page.
+     */
+    paginationShowFirst: boolean;
+    /**
+     * Whether to show the button to go the last page.
+     */
+    paginationShowLast: boolean;
+    /**
+     * The hover menu options.
+     */
+    hoverMenu: HoverMenuOptions | undefined;
+    /**
+     * The label of the table.
+     */
+    label: string;
+    /**
+     * The role attribute of the table element.
+     */
+    tabulatorRole: Options['tabulatorRole'];
+    /**
+     * The role attribute of column group elements.
+     */
+    columnGroupRole: Options['columnGroupRole'];
+    /**
+     * The role attribute of column header elements.
+     */
+    columnHeaderRole: Options['columnHeaderRole'];
+    /**
+     * The role attribute of row elements.
+     */
+    rowRole: Options['rowRole'];
+    /**
+     * The role attribute of row group elements.
+     */
+    rowGroupRole: Options['rowGroupRole'];
+    /**
+     * The role attribute of cell elements.
+     */
+    cellRole: Options['cellRole'];
+    /**
+     * The mode of the filter.
+     */
+    filterMode: Options['filterMode'];
+    /**
+     * The initial values for filters.
+     */
+    initialFilter: Options['initialFilter'];
+    /**
+     * The initial values for header filters.
+     */
+    initialHeaderFilter: Options['initialHeaderFilter'];
+    /**
+     * The delay before updating the column after user types in header filter.
+     */
+    headerFilterLiveFilterDelay: Options['headerFilterLiveFilterDelay'];
+    /**
+     * The placeholder text to display when table is empty due to active filters.
+     */
+    placeholderHeaderFilter: Options['placeholderHeaderFilter'];
+    tabulatorInstance: Tabulator | null;
+    /**
+     * In case the table is re-initialized, we need to re-register the event listeners.
+     * This set stores the names of the event names that are being watched.
+     */
+    private readonly watchedEvents;
+    get initialized(): boolean | undefined;
+    initTable(): Promise<void>;
+    constructor();
+    runFirstUpdated(): void;
+    disconnectedCallback(): void;
+    private registerEventListeners;
+    /**
+     * For most properties changes, we need to destroy the Tabulator instance and re-initialize it.
+     */
+    handleLayoutChange(): void;
+    handleDataChange(): void;
+    handleSpreadsheetDataChange(): void;
+    handleColumnsChange(): void;
+    handleGroupByChange(): void;
+    handleGroupHeaderChange(): void;
+    handleGroupValuesChange(): void;
+    handlePaginationSizeChange(): void;
+    handlePaginationInitialPageChange(): void;
+    private handleSearch;
+    handleSearchFieldsChange(): void;
+    private handleTableExport;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-table': CxTable;
+    }
+}
+export * from './tabulator-tables';

package/library/packages/atoms/src/components/table/table.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/atoms/src/components/table/table.utils.d.ts

@@ -0,0 +1,19 @@
+import { ColumnDefinition } from '../../../../types/src/table';
+
+export declare const movableRowDefaultRowHeader: ColumnDefinition;
+export declare const frozenRowsConverter: {
+    fromAttribute: (value: string | null) => string | number | any[] | null | undefined;
+    toAttribute: (value: unknown) => unknown;
+};
+export declare const dataTreeStartExpandedConverter: {
+    fromAttribute: (value: string | null) => string | boolean | any[] | null;
+    toAttribute: (value: unknown) => unknown;
+};
+export declare const clipboardConverter: {
+    fromAttribute: (value: string | null) => boolean | "copy" | "paste";
+    toAttribute: (value: unknown) => unknown;
+};
+export declare const groupByConverter: {
+    fromAttribute: (value: string | null) => string | any[] | null | undefined;
+    toAttribute: (value: unknown) => unknown;
+};