@semcore/data-table 16.0.0-prerelease.13 → 16.0.0-prerelease.14

package/lib/es6/translations/pt.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Classificável"
+}

package/lib/es6/translations/sv.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Sorterbar"
+}

package/lib/es6/translations/tr.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Sıralanabilir"
+}

package/lib/es6/translations/vi.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Có thể sắp xếp"
+}

package/lib/es6/translations/zh.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "可排序"
+}

package/lib/es6/types.js

@@ -0,0 +1,2 @@
+import { ROW_GROUP } from './DataTable';
+//# sourceMappingURL=types.js.map

package/lib/es6/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["ROW_GROUP"],"sources":["../../src/types.ts"],"sourcesContent":["import React from 'react';\nimport { ROW_GROUP } from './DataTable';\nimport { Property } from 'csstype';\nimport { FlexProps } from '@semcore/flex-box';\n\nexport type PseudoChildPropsGetter = (\n  props: { [propName: string]: unknown },\n  rowData: { [columnName: string]: unknown },\n  index: number,\n) => { [propName: string]: unknown };\nexport type PropsLayer = {\n  childrenPropsGetter?: PseudoChildPropsGetter;\n  [propName: string]: unknown;\n};\n\nexport type SortDirection = 'asc' | 'desc';\nexport type Column<\n  Props extends { [propName: string]: unknown } = { [propName: string]: unknown },\n> = {\n  name: string;\n  active: boolean;\n  width: number;\n  fixed?: 'left' | 'right';\n  resizable?: boolean;\n  sortable?: boolean | SortDirection;\n  sortDirection: SortDirection;\n  varWidth: string;\n  setVar: boolean;\n  data?: unknown;\n  vBorders?: boolean;\n  borderLeft?: boolean;\n  borderRight?: boolean;\n  props: {\n    name: string;\n    ref: React.RefObject<HTMLElement>;\n  } & FlexProps &\n    Partial<{\n      flex: Property.Flex;\n      onClick: (event: React.MouseEvent) => void;\n      onKeyDown: (event: React.KeyboardEvent) => void;\n      forwardRef: React.Ref<HTMLElement>;\n      style: React.CSSProperties;\n      fixed: 'left' | 'right';\n      resizable: boolean;\n      sortable: boolean | SortDirection;\n      sortDirection: SortDirection;\n      vBorders: boolean;\n      borderLeft: Property.BorderLeft;\n      borderRight: Property.BorderLeft;\n      changeSortSize?: boolean;\n      sortSizeRecalculation?: boolean;\n    }> &\n    Props;\n  columns: Column[];\n  parentColumns: Column[];\n};\nexport type Cell = Pick<Column, 'name' | 'fixed' | 'data'> & {\n  cssVar: string | string[];\n  cellPropsLayers: PropsLayer[];\n};\nexport type RowData<\n  Data extends { [columnName: string]: unknown } = { [columnName: string]: unknown },\n> = Data &\n  Partial<{\n    name: string;\n    [ROW_GROUP]: RowData[];\n  }>;\nexport type NestedCells = (Cell | NestedCells)[] & { flatRowData?: RowData };\n\nexport type RowIndex = number;\nexport type ColIndex = number;\n"],"mappings":"AACA,SAASA,SAAS,QAAQ,aAAa"}

package/lib/es6/utils.js

@@ -0,0 +1,56 @@
+export var getScrollOffsetValue = function getScrollOffsetValue(columns) {
+  return columns.reduce(function (acc, column) {
+    if (column.fixed === 'left') {
+      acc[0] += column.calculatedWidth;
+    }
+    if (column.fixed === 'right') {
+      acc[1] += column.calculatedWidth;
+    }
+    return acc;
+  }, [0, 0]);
+};
+var cssVarReg = /[:;\W]/g;
+export var createCssVarForWidth = function createCssVarForWidth(name) {
+  return "--".concat(name.replace(cssVarReg, '_'), "_width");
+};
+
+/**
+ * todo: Remove after v16
+ */
+export var flattenColumns = function flattenColumns(columns) {
+  return columns.reduce(function (acc, column) {
+    var hasNestedColumns = 'columns' in column && column.columns.length > 0;
+    var columns = hasNestedColumns ? flattenColumns(column.columns) : [column];
+    acc = acc.concat(columns);
+    return acc;
+  }, []);
+};
+export var getFixedStyle = function getFixedStyle(cell, columns) {
+  var side = cell.fixed;
+  if (!side) return [undefined, undefined];
+  var names = cell.name.split('/');
+  var nameSideMap = {
+    left: names[0],
+    right: names[names.length - 1]
+  };
+  var name = nameSideMap[side];
+  var index = columns.findIndex(function (column) {
+    return column.name === name;
+  });
+  if (index === -1) return [undefined, undefined];
+  var startIndexSideMap = {
+    left: 0,
+    right: index + 1
+  };
+  var endIndexSideMap = {
+    left: index,
+    right: columns.length
+  };
+  var columnsFixed = columns.slice(startIndexSideMap[side], endIndexSideMap[side]);
+  if (columnsFixed.length < 1) return [side, 0];
+  var sum = columnsFixed.reduce(function (acc, column) {
+    return acc + column.calculatedWidth;
+  }, 0);
+  return [side, "".concat(sum, "px")];
+};
+//# sourceMappingURL=utils.js.map

package/lib/es6/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["getScrollOffsetValue","columns","reduce","acc","column","fixed","calculatedWidth","cssVarReg","createCssVarForWidth","name","concat","replace","flattenColumns","hasNestedColumns","length","getFixedStyle","cell","side","undefined","names","split","nameSideMap","left","right","index","findIndex","startIndexSideMap","endIndexSideMap","columnsFixed","slice","sum"],"sources":["../../src/utils.ts"],"sourcesContent":["import type { DTColumn } from './components/Head/Column.types';\n\nexport const getScrollOffsetValue = (columns: DTColumn[]) =>\n  columns.reduce(\n    (acc, column) => {\n      if (column.fixed === 'left') {\n        acc[0] += column.calculatedWidth;\n      }\n      if (column.fixed === 'right') {\n        acc[1] += column.calculatedWidth;\n      }\n      return acc;\n    },\n    [0, 0] as [leftOffset: number, rightOffset: number],\n  );\n\nconst cssVarReg = /[:;\\W]/g;\n\nexport const createCssVarForWidth = (name: string) => {\n  return `--${name.replace(cssVarReg, '_')}_width`;\n};\n\n/**\n * todo: Remove after v16\n */\nexport const flattenColumns = (columns: any[]) =>\n  columns.reduce((acc, column) => {\n    const hasNestedColumns = 'columns' in column && column.columns.length > 0;\n    const columns: any[] = hasNestedColumns ? flattenColumns(column.columns) : [column];\n    acc = acc.concat(columns);\n    return acc;\n  }, [] as any[]);\n\nexport const getFixedStyle = (\n  cell: Pick<DTColumn, 'name' | 'fixed'>,\n  columns: DTColumn[],\n): [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined] => {\n  const side = cell.fixed;\n  if (!side) return [undefined, undefined];\n  const names = cell.name.split('/');\n  const nameSideMap = {\n    left: names[0],\n    right: names[names.length - 1],\n  };\n  const name = nameSideMap[side];\n  const index = columns.findIndex((column) => column.name === name);\n\n  if (index === -1) return [undefined, undefined];\n\n  const startIndexSideMap = {\n    left: 0,\n    right: index + 1,\n  };\n  const endIndexSideMap = {\n    left: index,\n    right: columns.length,\n  };\n  const columnsFixed = columns.slice(startIndexSideMap[side], endIndexSideMap[side]);\n\n  if (columnsFixed.length < 1) return [side, 0];\n\n  const sum = columnsFixed.reduce((acc, column) => acc + column.calculatedWidth, 0);\n  return [side, `${sum}px`];\n};\n"],"mappings":"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"}

package/lib/esm/components/Body/Body.mjs

@@ -12,7 +12,7 @@ import { Box } from "@semcore/base-components";
 import { Row } from "./Row.mjs";
 import { Cell } from "./Cell.mjs";
 import { MergedRowsCell, MergedColumnsCell } from "./MergedCells.mjs";
-import { ACCORDION } from "@semcore/data-table";
+import { ACCORDION } from "../DataTable/DataTable.mjs";
 import ChevronRightM from "@semcore/icon/ChevronRight/m";
 import { ButtonLink } from "@semcore/button";
 import Spin from "@semcore/spin";

package/lib/esm/components/Body/Row.mjs

@@ -13,7 +13,7 @@ import { Box, Collapse } from "@semcore/base-components";
 import { Body } from "./Body.mjs";
 import { getFixedStyle } from "../../utils.mjs";
 import { MergedColumnsCell, MergedRowsCell } from "./MergedCells.mjs";
-import { ACCORDION } from "@semcore/data-table";
+import { ACCORDION } from "../DataTable/DataTable.mjs";
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(

package/lib/types/Body.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Component } from '@semcore/core';
+import { RowData, Column, NestedCells, PropsLayer, Cell } from './types';
+import syncScroll from '@semcore/core/lib/utils/syncScroll';
+type AsProps = {
+    rows: NestedCells[][];
+    columns: Column[];
+    $scrollRef: ReturnType<ReturnType<typeof syncScroll>>;
+    onResize: ResizeObserverCallback;
+    onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    rowPropsLayers: PropsLayer[];
+    use: 'primary' | 'secondary';
+    uniqueKey: string;
+    virtualScroll?: boolean | {
+        tollerance?: number;
+        rowHeight?: number;
+    };
+    renderRows?: (props: {
+        rows: NestedCells[][];
+        columns: Column[];
+        renderRow: (row: Cell[], details: {
+            dataIndex: number;
+            nested: boolean;
+        }) => React.ReactNode;
+    }) => React.ReactNode;
+    disabledScroll?: boolean;
+    uid?: string;
+    animationsDisabled?: boolean;
+    scrollContainerRef: React.Ref<HTMLDivElement>;
+};
+type State = {
+    rowHeight: number | undefined;
+    scrollAreaHeight: undefined | number;
+    scrollOffset: number;
+};
+declare class Body extends Component<AsProps, {}, State> {
+    state: State;
+    scrollContainerRef: React.RefObject<HTMLDivElement>;
+    firstRowRef: React.RefObject<HTMLDivElement>;
+    firstRowResizeObserver: ResizeObserver | null;
+    lockedCell: [HTMLElement | null, boolean];
+    getRowHeight: () => number | undefined;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    onFocusCell: (e: React.FocusEvent<HTMLElement, HTMLElement>) => void;
+    renderCells(cells: NestedCells, rowData: RowData, dataIndex: number): (string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | null | undefined)[];
+    renderRow(cells: NestedCells, { dataIndex, topOffset, nested, }: {
+        dataIndex: number;
+        topOffset?: number;
+        nested: boolean;
+    }): React.ReactNode;
+    renderRows(rows: NestedCells[], nested?: boolean): React.ReactNode[];
+    renderVirtualizedRows(rows: NestedCells[]): React.ReactNode[];
+    handleFirstRowResize: (entries: ResizeObserverEntry[]) => void;
+    handleScrollAreaResize: (entries: ResizeObserverEntry[]) => void;
+    handleScrollAreaScroll: (event: React.SyntheticEvent<HTMLElement>) => void;
+    setupRowSizeObserver: () => void;
+    handleBodyTransitionEnd: () => void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+export default Body;

package/lib/types/DataTable.d.ts

@@ -0,0 +1,205 @@
+import React from 'react';
+import { Property } from 'csstype';
+import { Component, PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
+import { BoxProps, FlexProps } from '@semcore/flex-box';
+import type { Column } from './types';
+declare const ROW_GROUP: unique symbol;
+export type DataTableData = {
+    [key: string]: unknown;
+};
+export type DataTableSort<Column = string> = [sortBy: Column, sortDirection: 'desc' | 'asc'];
+export type DataTableTheme = 'muted' | 'info' | 'success' | 'warning' | 'danger';
+export type DataTableUse = 'primary' | 'secondary';
+export type DataTableRow = DataTableCell[];
+export type DataTableCell = {
+    /** Name of column */
+    name: string;
+    /** Data of column */
+    data: React.ReactNode;
+    [key: string]: unknown;
+};
+/**
+ * Datatable must have an accessible name (aria-table-name).
+ * It should describe table content.
+ */
+type DataTableAriaProps = Intergalactic.RequireAtLeastOne<{
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    title?: string;
+}>;
+/** @deprecated */
+export interface IDataTableProps<DataTableData extends {
+    [key: string]: any;
+}[] = UnknownProperties[]> extends Omit<DataTableProps<DataTableData>, keyof DataTableAriaProps> {
+}
+export type DataTableProps<DataTableData extends {
+    [key: string]: any;
+}[] = UnknownProperties[]> = BoxProps & {
+    /** Table theme according to visual hierarchy on the page
+     * @default primary
+     * */
+    use?: DataTableUse;
+    /** Data for table */
+    data?: DataTableData;
+    /** Active sort object */
+    sort?: DataTableSort<keyof DataTableData[0]>;
+    /** Handler call when request will change sort */
+    onSortChange?: (sort: DataTableSort<keyof DataTableData[0]>, e?: React.SyntheticEvent) => void;
+    /** Field name in one data entity that is unique accross all dataset
+     * @default id
+     */
+    uniqueKey?: keyof DataTableData[0];
+    /** Make cells compact by changing left and right paddings to smaller ones*/
+    compact?: boolean;
+    /** Count of total rows if table using virtual scroll. Needs for accessibility */
+    totalRows?: number;
+} & DataTableAriaProps;
+/** @deprecated */
+export interface IDataTableHeadProps extends DataTableHeadProps, UnknownProperties {
+}
+export type DataTableHeadProps = BoxProps & {
+    /** Sticky table header
+     * @deprecated
+     * */
+    sticky?: boolean;
+    /** Hidden header */
+    hidden?: boolean;
+    /** Disabled scroll (as action) */
+    disabledScroll?: boolean;
+    /** Enable scroll bar element in header */
+    withScrollBar?: boolean;
+    /** Disables column width change animation **/
+    animationsDisabled?: boolean;
+};
+/** @deprecated */
+export interface IDataTableColumnProps extends DataTableColumnProps, UnknownProperties {
+}
+export type DataTableColumnProps = FlexProps & {
+    /** Unique column name */
+    name?: string;
+    /** Enable sorting for column. And if you are passing a string, you can also set the default sorting */
+    sortable?: boolean | 'desc' | 'asc';
+    /** Enable resize for column
+     * @ignore */
+    resizable?: boolean;
+    /** Fix column on the left o right side of the table */
+    fixed?: 'left' | 'right';
+    /** Fields to control the size of the column */
+    flex?: Property.Flex | 'inherit';
+    /** Add vertical border to the column */
+    vBorders?: boolean;
+    /** Add vertical border to the right side of the cell */
+    borderRight?: boolean;
+    /** Add vertical border to the left side of the cell */
+    borderLeft?: boolean;
+    /**
+     * Enable changing column width with sort icon
+     * @default false
+     */
+    changeSortSize?: boolean;
+    /**
+     * Enable column to use as a column for recalculation width
+     * @default false (By default used first column with maximum width)
+     */
+    sortSizeRecalculation?: boolean;
+};
+/** @deprecated */
+export interface IDataTableBodyProps extends DataTableBodyProps, UnknownProperties {
+}
+export type DataTableBodyProps = BoxProps & {
+    /** Rows table */
+    rows?: DataTableRow[];
+    /** When enabled, only visually acessable rows are rendered.
+     * `tollerance` property controls how many rows outside of viewport are render.
+     * `rowHeight` fixes the rows height if it has known. If not provided, first row node height is measured.
+     * @default { tollerance: 2 }
+     */
+    virtualScroll?: boolean | {
+        tollerance?: number;
+        rowHeight?: number;
+    };
+    /** Allows to redefine rows renderning for a very deep and even fragile customization like building custom virtual scrolling */
+    renderRows?: (props: {
+        rows: DataTableRow[];
+        columns: Column[];
+        renderRow: (row: DataTableRow, details: {
+            dataIndex: number;
+        }) => React.ReactNode;
+    }) => React.ReactNode;
+    /**
+     * Called every time user scrolls area
+     */
+    onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    /** Disabled scroll */
+    disabledScroll?: boolean;
+    /** Disables column width change animation **/
+    animationsDisabled?: boolean;
+    /** Ref for table body container */
+    scrollContainerRef?: React.Ref<HTMLDivElement>;
+};
+/** @deprecated */
+export interface IDataTableRowProps extends DataTableRowProps, UnknownProperties {
+}
+export type DataTableRowProps = BoxProps & {
+    /** Theme for row */
+    theme?: DataTableTheme;
+    /** Sets row state to active*/
+    active?: boolean;
+};
+/** @deprecated */
+export interface IDataTableCellProps extends DataTableCellProps, UnknownProperties {
+}
+export type DataTableCellProps<Name extends string = string> = FlexProps & {
+    /** Unique name for column or columns separated by / */
+    name: Name;
+    /** Theme for cell */
+    theme?: DataTableTheme;
+};
+type DataTableCtx = {
+    getHeadProps: PropGetterFn;
+    getBodyProps: PropGetterFn;
+};
+type IntergalacticDataTableComponent<PropsExtending extends {} = {}> = (<Data extends DataTableData[], Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableProps<Data> & PropsExtending, DataTableCtx, never>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableProps>;
+type IntergalacticDataTableRowComponent<PropsExtending extends {} = {}> = (<Data extends DataTableData[], Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.PropsRenderingResultComponentProps<Tag, DataTableRowProps & {
+    /**
+     * That property is ONLY used for the component strict typings. In the component runtime `data` prop set on `<DataTable>...</DataTable> is used.
+     */
+    data?: Data;
+} & PropsExtending, DataTableCtx & {
+    data: Data;
+}, [
+    row: Data[0],
+    index: number
+]>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableRowProps>;
+type IntergalacticDataTableCellComponent<PropsExtending extends {} = {}> = (<Data extends DataTableData[] = [], Name extends string = string, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.PropsRenderingResultComponentProps<Tag, DataTableCellProps<Name> & {
+    /**
+     * That property is ONLY used for the componenct strict typings. In the component runtime `data` prop set on `<DataTable>...</DataTable> is used.
+     */
+    data?: Data;
+} & PropsExtending, DataTableCtx & {
+    data: Data;
+}, [
+    row: Data[0],
+    index: number
+]>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableCellProps>;
+declare const DefinitionTable: (<Data extends DataTableData[], Tag extends Intergalactic.InternalTypings.ComponentTag = "div">(props: Intergalactic.InternalTypings.ComponentProps<Tag, "div", DataTableProps<Data> & {}, DataTableCtx, never>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<"div", "div", DataTableProps<UnknownProperties[]>, {}, {}> & {
+    Head: Intergalactic.Component<'div', DataTableHeadProps>;
+    Body: Intergalactic.Component<'div', DataTableBodyProps>;
+    Column: Intergalactic.Component<'div', DataTableColumnProps>;
+    Row: IntergalacticDataTableRowComponent;
+    Cell: IntergalacticDataTableCellComponent;
+};
+export { ROW_GROUP };
+export default DefinitionTable;
+export declare const wrapDataTable: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticDataTableComponent<{}>>, "ref" | "tag"> & {
+    ref: React.Ref<any>;
+    tag: Intergalactic.InternalTypings.ComponentTag;
+} & PropsExtending) => React.ReactNode) => IntergalacticDataTableComponent<PropsExtending>;
+export declare const wrapDataTableRow: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticDataTableRowComponent<{}>>, "ref" | "tag"> & {
+    ref: React.Ref<any>;
+    tag: Intergalactic.InternalTypings.ComponentTag;
+} & PropsExtending) => React.ReactNode) => IntergalacticDataTableRowComponent<PropsExtending>;
+export declare const wrapDataTableCell: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticDataTableCellComponent<{}>>, "ref" | "tag"> & {
+    ref: React.Ref<any>;
+    tag: Intergalactic.InternalTypings.ComponentTag;
+} & PropsExtending) => React.ReactNode) => IntergalacticDataTableCellComponent<PropsExtending>;

package/lib/types/Head.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Component } from '@semcore/core';
+import { Column } from './types';
+export declare const SORT_ICON_WIDTH = 20;
+type AsProps = {
+    $onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;
+    $scrollRef: (instance: unknown) => void;
+    use: 'primary' | 'secondary';
+    columnsChildren: Column[];
+    onResize: ResizeObserverCallback;
+    sticky: boolean;
+    ['data-ui-name']: string;
+    uid?: string;
+    withScrollBar?: boolean;
+    animationsDisabled?: boolean;
+    getI18nText?: (str: string) => string;
+};
+declare class Head extends Component<AsProps> {
+    columns: any[];
+    static displayName: string;
+    headCellMap: Map<number, HTMLElement | null>;
+    lockedCell: [HTMLElement | null, boolean];
+    sortWrapperRefs: Map<Node, boolean>;
+    defaultWidths: Map<HTMLElement, {
+        minWidth: number;
+        maxWidth: number | null;
+        computedWidth: number;
+        useForRecalculation: boolean;
+    }>;
+    sortableColumnDescribeId(): string;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    onFocusCell: (e: React.FocusEvent<HTMLElement, HTMLElement>) => void;
+    bindHandlerSortClick: (name: string) => (event: React.MouseEvent) => void;
+    bindHandlerKeyDown: (name: string) => (event: React.KeyboardEvent) => void;
+    makeSortRefHandler: (active: boolean) => (ref: HTMLElement | null) => void;
+    makeColumnRefHandler: (column: Column, index: number) => (ref: HTMLElement | null) => void;
+    componentDidUpdate(): void;
+    changeMaxNodeWidth: (diff: number, exceptNode: HTMLElement) => void;
+    backToColumnDefaults: (node: HTMLElement) => void;
+    calculateActiveColumnMinWidth: (node: HTMLElement) => void;
+    renderColumns(columns: Column[], width: number): React.ReactNode[];
+    renderColumn(column: Column, width: number): React.ReactNode;
+    render(): React.ReactNode;
+}
+export default Head;

package/lib/types/components/Body/Body.d.ts

@@ -0,0 +1,8 @@
+import { Component, Intergalactic } from '@semcore/core';
+import { DataTableBodyProps } from './Body.types';
+import { DataTableRowProps } from './Row.types';
+import { DataTableCellProps } from './Cell.types';
+export declare const Body: (<Tag extends Intergalactic.InternalTypings.ComponentTag = "div", Props extends DataTableBodyProps = DataTableBodyProps>(props: Intergalactic.InternalTypings.ComponentProps<Tag, "div", Props, {}, never[]>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<"div", Intergalactic.InternalTypings.ComponentTag, DataTableBodyProps, {}, never[]> & {
+    Row: Intergalactic.Component<'div', DataTableRowProps>;
+    Cell: Intergalactic.Component<'div', DataTableCellProps>;
+};

package/lib/types/components/Body/Body.types.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { DTRow } from './Row.types';
+import { DTColumn } from '../Head/Column.types';
+import { DTUse } from '../DataTable/DataTable.types';
+type CellRenderProps = {
+    name: string;
+    row: DTRow;
+    column: DTColumn;
+    rowIndex: number;
+    columnIndex: number;
+    value: string | number | boolean;
+    defaultRender: () => React.ReactNode;
+};
+export type DataTableBodyProps = {
+    renderCell?: (props: CellRenderProps) => React.ReactNode;
+    expandedRows?: number[];
+};
+export type BodyPropsInner = {
+    rows: DTRow[];
+    columns: DTColumn[];
+    use: DTUse;
+    scrollRef: (ref: HTMLDivElement) => void;
+    headerRows: number;
+    compact: boolean;
+    gridTemplateColumns: string[];
+    gridTemplateAreas: string[];
+    loading?: boolean;
+    headerHeight: number;
+    getI18nText: (key: string) => string;
+};
+export {};

package/lib/types/components/Body/Cell.d.ts

@@ -0,0 +1,3 @@
+export declare const Cell: import("@semcore/core/lib/coreFactory").ComponentType<unknown, {}, {}, {
+    [key: string]: (arg: unknown) => void;
+}, null>;

package/lib/types/components/Body/Cell.types.d.ts

@@ -0,0 +1,14 @@
+import { DTRow } from './Row.types';
+import { DTUse } from '../DataTable/DataTable.types';
+import { DTColumn, CommonColumnType } from '../Head/Column.types';
+export type DataTableCellProps = CommonColumnType & {
+    name: string;
+    row: DTRow;
+    columnIndex: number;
+    column: DTColumn;
+    rowIndex: number;
+    gridArea?: string;
+};
+export type CellPropsInner = {
+    use: DTUse;
+};

package/lib/types/components/Body/MergedCells.d.ts

@@ -0,0 +1,10 @@
+export declare class MergedRowsCell {
+    readonly value: any;
+    readonly rowsCount: number;
+    constructor(value: any, size: number);
+}
+export declare class MergedColumnsCell {
+    readonly value: any;
+    readonly columnsCount: number;
+    constructor(value: any, size: number);
+}

package/lib/types/components/Body/Row.d.ts

@@ -0,0 +1,3 @@
+export declare const Row: import("@semcore/core/lib/coreFactory").ComponentType<unknown, {}, {}, {
+    [key: string]: (arg: unknown) => void;
+}, null>;

package/lib/types/components/Body/Row.types.d.ts

@@ -0,0 +1,24 @@
+import { DTValue, DTKey, DTUse } from '../DataTable/DataTable.types';
+import { DTColumn } from '../Head/Column.types';
+import { MergedColumnsCell, MergedRowsCell } from './MergedCells';
+export type DTRow = Record<DTKey, DTValue | MergedRowsCell | MergedColumnsCell>;
+export type DataTableRowProps = {
+    columns: DTColumn[];
+    row: DTRow;
+    rows: DTRow[];
+    rowIndex: number;
+    headerRows: number;
+    expandedRows?: number[];
+    onExpandRow?: (expandedRowIndex: number) => void;
+};
+export type RowPropsInner = {
+    use: DTUse;
+    /**
+     * Expanded flag for rows with accordion
+     * @default false
+     */
+    expanded?: boolean;
+    gridTemplateAreas: string;
+    gridTemplateColumns: string;
+    accordionDataGridArea: string;
+};

package/lib/types/components/DataTable/DataTable.d.ts

@@ -0,0 +1,9 @@
+import { Intergalactic } from '@semcore/core';
+import { DataTableProps } from './DataTable.types';
+import { Head } from '../Head/Head';
+import { Body } from '../Body/Body';
+export declare const ACCORDION: unique symbol;
+export declare const DataTable: (<Tag extends Intergalactic.InternalTypings.ComponentTag = "div", Props extends DataTableProps = DataTableProps>(props: Intergalactic.InternalTypings.ComponentProps<Tag, "div", Props, {}, never[]>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<"div", Intergalactic.InternalTypings.ComponentTag, DataTableProps, {}, never[]> & {
+    Head: typeof Head;
+    Body: typeof Body;
+};

package/lib/types/components/DataTable/DataTable.types.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { Intergalactic } from '@semcore/core';
+import { BoxProps } from '@semcore/base-components';
+/**
+ * Datatable must have an accessible name (aria-table-name).
+ * It should describe table content.
+ */
+type DataTableAriaProps = Intergalactic.RequireAtLeastOne<{
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    title?: string;
+}>;
+export type SortDirection = 'asc' | 'desc';
+export type DataTableSort<Column = string> = [sortBy: Column, sortDirection: SortDirection];
+export type DTKey = string | symbol;
+export type DTValue = string | number | boolean;
+export type DataTableData = Array<Record<DTKey, any>>;
+export type DTUse = 'primary' | 'secondary';
+type Sizes = Pick<BoxProps, 'w' | 'wMax' | 'wMin' | 'h' | 'hMax' | 'hMin'>;
+export type DataTableProps = DataTableAriaProps & Sizes & {
+    /** Data for table */
+    data: DataTableData;
+    /** Count of total rows if table using virtual scroll. Needs for accessibility */
+    totalRows?: number;
+    /** Table theme according to visual hierarchy on the page
+     * @default primary
+     * */
+    use?: DTUse;
+    /** Active sort object */
+    sort?: DataTableSort;
+    /** Handler call when request will change sort */
+    onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;
+    /**
+     *
+     * @default auto
+     */
+    defaultGridTemplateColumnWidth?: 'auto' | '1fr';
+    /**
+     * Flag for compact view (less paddings)
+     */
+    compact?: boolean;
+    /**
+     * Flag for showing spinner on table body
+     */
+    loading?: boolean;
+    children?: any;
+};
+export type RowIndex = number;
+export type ColIndex = number;
+export {};

package/lib/types/components/Head/Column.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Component } from '@semcore/core';
+import { ColumnPropsInner, DataTableColumnProps } from './Column.types';
+type State = {
+    sortVisible: boolean;
+};
+export declare class Column extends Component<DataTableColumnProps, {}, {}, [], ColumnPropsInner> {
+    static displayName: string;
+    static style: {
+        [key: string]: string;
+    };
+    lockedCell: [HTMLElement | null, boolean];
+    columnRef: React.RefObject<HTMLDivElement>;
+    sortWrapperRef: React.RefObject<HTMLDivElement>;
+    state: State;
+    componentDidUpdate(prevProps: DataTableColumnProps & ColumnPropsInner): void;
+    calculateActiveColumnMinWidth: () => number | null;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    handleBlur: () => void;
+    handleSortClick: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    handleFocusCell: (e: React.FocusEvent<HTMLElement, HTMLElement>) => void;
+    render(): React.ReactNode;
+}
+export {};