@synerise/ds-table 0.57.6 → 0.58.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.58.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.57.6...@synerise/ds-table@0.58.0) (2024-10-14)
+
+
+### Features
+
+* **table:** render skeleton using columns ([c84ca2a](https://github.com/synerise/synerise-design/commit/c84ca2a8a8aea9d492c38802d9eb357039dccf2f))
+
+
+
+
+
 ## [0.57.6](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.57.5...@synerise/ds-table@0.57.6) (2024-10-09)
 
 

package/dist/Cell/index.js

@@ -8,6 +8,5 @@ import CopyableCell from './Copyable/CopyableCell';
 import ActionCell from './Action/ActionCell';
 import FlagLabelCell from './FlagLabel/FlagLabelCell';
 import StarCell from './Star/StarCell';
-import LabelsWithShowMore from './LabelsWithShowMore/LabelsWithShowMore'; // eslint-disable-next-line import/prefer-default-export
-
+import LabelsWithShowMore from './LabelsWithShowMore/LabelsWithShowMore';
 export { IconLabelCell, IconTooltipCell, StatusLabelCell, AvatarLabelCell, TagIconCell, EditableCell, CopyableCell, ActionCell, FlagLabelCell, StarCell, LabelsWithShowMore };

package/dist/Table.d.ts

@@ -4,9 +4,9 @@ import './style/index.less';
 import { DSTableProps } from './Table.types';
 export declare const SELECTION_ALL = "SELECTION_ALL";
 export declare const SELECTION_INVERT = "SELECTION_INVERT";
-declare function DSTable<T extends object>(props: DSTableProps<T>): React.ReactElement;
-declare namespace DSTable {
-    var SELECTION_ALL: string;
-    var SELECTION_INVERT: string;
-}
+declare const DSTable: {
+    <T extends object>(props: DSTableProps<T>): React.JSX.Element;
+    SELECTION_ALL: string;
+    SELECTION_INVERT: string;
+};
 export default DSTable;

package/dist/Table.js

@@ -6,10 +6,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import '@synerise/ds-core/dist/js/style';
-import Icon, { AngleLeftS, AngleRightS, SpinnerM } from '@synerise/ds-icon';
+import Icon, { AngleLeftS, AngleRightS } from '@synerise/ds-icon';
 import Button from '@synerise/ds-button';
 import Skeleton from '@synerise/ds-skeleton';
 import { useDataFormat } from '@synerise/ds-data-format';
@@ -20,6 +20,7 @@ import DefaultTable from './DefaultTable/DefaultTable';
 import GroupTable from './GroupTable/GroupTable';
 import { useTableLocale, TableLocaleContext } from './utils/locale';
 import { getChildrenColumnName } from './utils/getChildrenColumnName';
+import { getSkeletonProps } from './utils/getSkeletonProps';
 export var SELECTION_ALL = 'SELECTION_ALL';
 export var SELECTION_INVERT = 'SELECTION_INVERT';
 var ITEM_RENDER_TYPE = {
@@ -27,7 +28,7 @@ var ITEM_RENDER_TYPE = {
   next: 'next'
 };
 
-function DSTable(props) {
+var DSTable = function DSTable(props) {
   var intl = useIntl();
   var title = props.title,
       loading = props.loading,
@@ -52,13 +53,15 @@ function DSTable(props) {
       renderSelectionTitle = props.renderSelectionTitle,
       hideTitlePart = props.hideTitlePart,
       disableColumnNamesLineBreak = props.disableColumnNamesLineBreak,
-      expandable = props.expandable;
+      expandable = props.expandable,
+      columns = props.columns,
+      skeletonProps = props.skeletonProps;
   var tableLocale = useTableLocale(intl, locale);
 
   var _useDataFormat = useDataFormat(),
       formatValue = _useDataFormat.formatValue;
 
-  var renderHeader = React.useCallback(function () {
+  var renderHeader = useCallback(function () {
     var size = selection && (selection == null ? void 0 : selection.selectedRowKeys) && (selection == null ? void 0 : selection.selectedRowKeys.length);
     var data = grouped ? // @ts-ignore
     dataSource == null ? void 0 : dataSource.reduce(function (items, group) {
@@ -86,10 +89,11 @@ function DSTable(props) {
       locale: tableLocale,
       renderSelectionTitle: renderSelectionTitle,
       hideTitlePart: hideTitlePart,
-      childrenColumnName: getChildrenColumnName(expandable == null ? void 0 : expandable.childrenColumnName)
+      childrenColumnName: getChildrenColumnName(expandable == null ? void 0 : expandable.childrenColumnName),
+      isLoading: loading
     });
-  }, [selection, grouped, dataSource, dataSourceTotalCount, hideTitleBar, headerWithBorderTop, title, filters, itemsMenu, dataSourceFull, searchComponent, filterComponent, headerButton, rowKey, tableLocale, renderSelectionTitle, hideTitlePart, expandable == null ? void 0 : expandable.childrenColumnName]);
-  var footerPagination = React.useMemo(function () {
+  }, [selection, grouped, dataSource, dataSourceTotalCount, dataSourceFull, hideTitleBar, headerWithBorderTop, title, filters, itemsMenu, searchComponent, filterComponent, headerButton, rowKey, tableLocale, renderSelectionTitle, hideTitlePart, expandable == null ? void 0 : expandable.childrenColumnName, loading]);
+  var footerPagination = useMemo(function () {
     return _objectSpread({
       showTotal: function showTotal(total, range) {
         var _tableLocale$paginati, _tableLocale$paginati2;
@@ -126,35 +130,35 @@ function DSTable(props) {
       }
     }, pagination);
   }, [pagination, formatValue, grouped, tableLocale, hideTitlePart]);
+  var tableContent = useMemo(function () {
+    var extraProps = loading ? getSkeletonProps(skeletonProps, columns) : {
+      pagination: pagination ? footerPagination : false
+    };
+    return /*#__PURE__*/React.createElement(DefaultTable, _extends({
+      scroll: {
+        x: 'auto'
+      },
+      tableLayout: "auto"
+    }, props, {
+      locale: tableLocale,
+      title: renderHeader
+    }, extraProps));
+  }, [columns, footerPagination, loading, pagination, props, renderHeader, skeletonProps, tableLocale]);
   return /*#__PURE__*/React.createElement(TableLocaleContext.Provider, {
     value: tableLocale
   }, /*#__PURE__*/React.createElement(S.TableWrapper, {
     className: "ds-table ds-table-cell-size-" + cellSize + " " + (roundedHeader ? 'ds-table-rounded' : ''),
     hideColumnNames: hideColumnNames,
     disableColumnNamesLineBreak: disableColumnNamesLineBreak
-  }, loading && /*#__PURE__*/React.createElement(S.Spinner, {
-    className: "spinner"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(SpinnerM, null),
-    color: "#6a7580"
-  })), grouped && dataSource != null && dataSource.length ?
+  }, !loading && grouped && dataSource != null && dataSource.length ?
   /*#__PURE__*/
   // @ts-ignore
   React.createElement(GroupTable, _extends({}, props, {
     locale: tableLocale,
     title: renderHeader,
     pagination: dataSource != null && dataSource.length && pagination ? footerPagination : false
-  })) : /*#__PURE__*/React.createElement(DefaultTable, _extends({
-    scroll: {
-      x: 'auto'
-    },
-    tableLayout: "auto"
-  }, props, {
-    locale: tableLocale,
-    title: renderHeader,
-    pagination: dataSource != null && dataSource.length && pagination ? footerPagination : false
-  }))));
-}
+  })) : tableContent));
+};
 
 DSTable.SELECTION_ALL = SELECTION_ALL;
 DSTable.SELECTION_INVERT = SELECTION_INVERT;

package/dist/Table.styles.d.ts

@@ -1,10 +1,16 @@
+/// <reference types="react" />
 import Menu from '@synerise/ds-menu';
 export declare const Header: import("styled-components").StyledComponent<"div", any, {
     withBorderTop?: boolean | undefined;
 }, never>;
 export declare const Size: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TitlePartEllipsis: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TitlePartEllipsis: import("styled-components").StyledComponent<({ size, className, children, ellipsis }: {
+    size?: import("@synerise/ds-typography").TextSize | undefined;
+    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps | undefined;
+    children?: import("react").ReactNode;
+    className?: string | undefined;
+}) => import("react").JSX.Element, any, {}, never>;
 export declare const TitlePart: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const TitleSeparator: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Left: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -24,3 +30,8 @@ export declare const TableWrapper: import("styled-components").StyledComponent<"
     hideColumnNames?: boolean | undefined;
     disableColumnNamesLineBreak?: boolean | undefined;
 }, never>;
+export declare const Skeleton: import("styled-components").StyledComponent<({ size, numberOfSkeletons, width, height, className }: import("@synerise/ds-skeleton").SkeletonProps) => import("react").JSX.Element, any, {}, never>;
+export declare const TableSkeletonCell: import("styled-components").StyledComponent<"div", any, {
+    height?: number | undefined;
+    width?: string | undefined;
+}, never>;

package/dist/Table.styles.js

@@ -1,8 +1,9 @@
 import styled, { keyframes } from 'styled-components';
-import { macro } from '@synerise/ds-typography';
+import { macro, Text } from '@synerise/ds-typography';
 import { CheckboxWrapper } from '@synerise/ds-checkbox/dist/Checkbox.styles';
 import Menu from '@synerise/ds-menu';
 import { IconContainer } from '@synerise/ds-icon';
+import DSSkeleton from '@synerise/ds-skeleton';
 export var Header = styled.div.withConfig({
   displayName: "Tablestyles__Header",
   componentId: "dacfhr-0"
@@ -21,10 +22,10 @@ export var TitleContainer = styled.div.withConfig({
 })(["display:flex;max-width:100%;min-width:0;", ";color:", ";padding:0 24px 0 0;strong{font-weight:500;}"], macro.small, function (props) {
   return props.theme.palette['grey-700'];
 });
-export var TitlePartEllipsis = styled.span.withConfig({
+export var TitlePartEllipsis = styled(Text).withConfig({
   displayName: "Tablestyles__TitlePartEllipsis",
   componentId: "dacfhr-3"
-})(["display:flex;max-width:100%;min-width:100px;strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"]);
+})(["font-weight:500;"]);
 export var TitlePart = styled.span.withConfig({
   displayName: "Tablestyles__TitlePart",
   componentId: "dacfhr-4"
@@ -133,4 +134,16 @@ export var TableWrapper = styled.div.withConfig({
   return theme.palette['blue-050'];
 }, function (props) {
   return props.disableColumnNamesLineBreak ? 'nowrap' : 'normal';
+});
+export var Skeleton = styled(DSSkeleton).withConfig({
+  displayName: "Tablestyles__Skeleton",
+  componentId: "dacfhr-15"
+})(["padding:0;"]);
+export var TableSkeletonCell = styled.div.withConfig({
+  displayName: "Tablestyles__TableSkeletonCell",
+  componentId: "dacfhr-16"
+})(["display:flex;height:", ";width:", ";align-items:center;justify-content:flex-start;"], function (props) {
+  return props.height + "px" || 'auto';
+}, function (props) {
+  return "" + props.width || '50%';
 });

package/dist/Table.types.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode, ReactText, Ref } from 'react';
 import { ColumnType, TableProps } from 'antd/lib/table';
 import { TableLocale, TableRowSelection } from 'antd/lib/table/interface';
-import { TableSkeletonProps } from 'TableSkeleton/TableSkeleton.types';
 import { LiteralStringUnion } from '@synerise/ds-utils';
 import DSTable from './Table';
 import { GroupType } from './GroupTable/GroupTable.types';
@@ -127,7 +126,11 @@ export type DSTableProps<T extends any & GroupType<T>> = AntTableProps<T> & {
     onSort?: OnSortFn;
     dataSourceFull?: T[];
     dataSourceTotalCount?: number;
-    maxHeight?: number;
-    skeletonProps?: Pick<TableSkeletonProps, 'headerHeight' | 'subheaderHeight' | 'rowHeight'>;
+    skeletonProps?: {
+        maxHeight?: number;
+        headerHeight?: number;
+        subheaderHeight?: number;
+        cellHeight?: number;
+    };
 };
 export {};

package/dist/TableHeader/TableHeader.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
-import { Props } from './TableHeader.types';
-declare const TableHeader: React.FC<Props>;
+declare const TableHeader: ({ title, filters, searchComponent, filterComponent, selectedRows, itemsMenu, selection, dataSource, dataSourceFull, dataSourceTotalCount, rowKey, withBorderTop, headerButton, locale, renderSelectionTitle, hideTitlePart, childrenColumnName, isLoading, }: any) => React.JSX.Element;
 export default TableHeader;

package/dist/TableHeader/TableHeader.js

@@ -1,16 +1,10 @@
-import React from 'react';
-import Tooltip from '@synerise/ds-tooltip';
+import React, { useMemo } from 'react';
 import { useDataFormat } from '@synerise/ds-data-format';
 import * as S from '../Table.styles';
 import FilterTrigger from '../FilterTrigger/FilterTrigger';
 import TableSelection from './TableSelection';
 import { TableLimit } from './TableLimit';
 
-var isTruncated = function isTruncated(element) {
-  return element && element.offsetWidth < element.scrollWidth;
-}; // @ts-ignore
-
-
 var TableHeader = function TableHeader(_ref) {
   var title = _ref.title,
       filters = _ref.filters,
@@ -28,25 +22,13 @@ var TableHeader = function TableHeader(_ref) {
       locale = _ref.locale,
       renderSelectionTitle = _ref.renderSelectionTitle,
       hideTitlePart = _ref.hideTitlePart,
-      childrenColumnName = _ref.childrenColumnName;
+      childrenColumnName = _ref.childrenColumnName,
+      isLoading = _ref.isLoading;
 
   var _useDataFormat = useDataFormat(),
       formatValue = _useDataFormat.formatValue;
 
-  var titleRef = React.useRef(null);
-
-  var _React$useState = React.useState(false),
-      isTitleTruncated = _React$useState[0],
-      setIsTitleTruncated = _React$useState[1];
-
-  React.useEffect(function () {
-    var isElementTruncated = isTruncated(titleRef.current || undefined);
-
-    if (isElementTruncated !== undefined && isElementTruncated !== isTitleTruncated) {
-      setIsTitleTruncated(isElementTruncated);
-    }
-  }, [titleRef, isTitleTruncated, title]);
-  var renderLeftSide = React.useMemo(function () {
+  var renderLeftSide = useMemo(function () {
     if (selection != null && selection.limit) return /*#__PURE__*/React.createElement(TableLimit, {
       total: dataSourceTotalCount || dataSource.length,
       selection: selection,
@@ -62,26 +44,33 @@ var TableHeader = function TableHeader(_ref) {
       selection: selection,
       locale: locale,
       childrenColumnName: childrenColumnName
-    }), renderSelectionTitle ? renderSelectionTitle(selection, filters) : /*#__PURE__*/React.createElement(S.TitleContainer, null, /*#__PURE__*/React.createElement(S.TitlePart, null, /*#__PURE__*/React.createElement("strong", null, formatValue(selectedRows)), " ", /*#__PURE__*/React.createElement("span", null, locale.selected))), itemsMenu) : /*#__PURE__*/React.createElement(S.Left, {
+    }), renderSelectionTitle ? /*#__PURE__*/React.createElement(React.Fragment, null, renderSelectionTitle(selection, filters)) : /*#__PURE__*/React.createElement(S.TitleContainer, null, /*#__PURE__*/React.createElement(S.TitlePart, null, /*#__PURE__*/React.createElement("strong", null, formatValue(selectedRows)), " ", /*#__PURE__*/React.createElement("span", null, locale.selected))), itemsMenu) : /*#__PURE__*/React.createElement(S.Left, {
       "data-testid": "ds-table-title"
-    }, selection && /*#__PURE__*/React.createElement(TableSelection, {
+    }, selection && !isLoading && /*#__PURE__*/React.createElement(TableSelection, {
       rowKey: rowKey,
       dataSource: dataSource,
       dataSourceFull: dataSourceFull,
       selection: selection,
       locale: locale,
       childrenColumnName: childrenColumnName
-    }), /*#__PURE__*/React.createElement(S.TitleContainer, null, title && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.TitlePartEllipsis, null, isTitleTruncated ? /*#__PURE__*/React.createElement(Tooltip, {
-      type: "largeSimple",
-      description: title,
-      offset: "small",
-      autoAdjustOverflow: true
-    }, /*#__PURE__*/React.createElement("strong", {
-      ref: titleRef
-    }, title)) : /*#__PURE__*/React.createElement("strong", {
-      ref: titleRef
-    }, title)), !hideTitlePart && /*#__PURE__*/React.createElement(S.TitleSeparator, null)), !hideTitlePart && /*#__PURE__*/React.createElement(S.TitlePart, null, /*#__PURE__*/React.createElement("strong", null, formatValue(dataSourceTotalCount)), " ", /*#__PURE__*/React.createElement("span", null, locale.pagination.items))));
-  }, [selection, dataSource, itemsMenu, locale, selectedRows, rowKey, dataSourceFull, renderSelectionTitle, filters, formatValue, title, isTitleTruncated, hideTitlePart, dataSourceTotalCount, childrenColumnName]);
+    }), /*#__PURE__*/React.createElement(S.TitleContainer, null, isLoading && /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '100px'
+      }
+    }, /*#__PURE__*/React.createElement(S.Skeleton, {
+      width: "L",
+      numberOfSkeletons: 1
+    })), !isLoading && title && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.TitlePartEllipsis, {
+      ellipsis: {
+        tooltipProps: {
+          description: title,
+          type: 'largeSimple',
+          offset: 'small',
+          autoAdjustOverflow: true
+        }
+      }
+    }, title), !hideTitlePart && /*#__PURE__*/React.createElement(S.TitleSeparator, null)), !isLoading && !hideTitlePart && /*#__PURE__*/React.createElement(S.TitlePart, null, /*#__PURE__*/React.createElement("strong", null, formatValue(dataSourceTotalCount)), " ", /*#__PURE__*/React.createElement("span", null, locale.pagination.items))));
+  }, [selection, dataSourceTotalCount, dataSource, itemsMenu, locale, selectedRows, rowKey, dataSourceFull, childrenColumnName, renderSelectionTitle, filters, formatValue, title, hideTitlePart, isLoading]);
   return /*#__PURE__*/React.createElement(S.Header, {
     withBorderTop: withBorderTop
   }, renderLeftSide, /*#__PURE__*/React.createElement(S.Right, null, headerButton, filters == null ? void 0 : filters.map(function (filter) {

package/dist/TableHeader/TableHeader.types.d.ts

@@ -20,4 +20,5 @@ export type Props<T extends {
     hideTitlePart?: boolean;
     dataSourceTotalCount?: number;
     childrenColumnName: string;
+    isLoading?: boolean;
 };

package/dist/TableHeader/TableLimit/TableLimit.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { ReactText } from 'react';
 import { TableLimitProps } from './TableLimit.types';
 export declare function TableLimit<T extends {
-    key: React.ReactText;
+    key: ReactText;
     children?: T[];
-}>({ total, locale, itemsMenu, selection, }: TableLimitProps<T>): React.ReactElement | null;
+}>({ total, locale, itemsMenu, selection, }: TableLimitProps<T>): React.JSX.Element;

package/dist/TableHeader/TableLimit/TableLimit.js

@@ -1,8 +1,7 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import Alert from '@synerise/ds-alert';
 import { useDataFormat } from '@synerise/ds-data-format';
 import * as S from './TableLimit.styles';
-// eslint-disable-next-line import/prefer-default-export
 export function TableLimit(_ref) {
   var total = _ref.total,
       locale = _ref.locale,
@@ -12,16 +11,16 @@ export function TableLimit(_ref) {
   var _useDataFormat = useDataFormat(),
       formatValue = _useDataFormat.formatValue;
 
-  var selectedRows = React.useMemo(function () {
+  var selectedRows = useMemo(function () {
     return (selection == null ? void 0 : selection.selectedRowKeys.length) || 0;
   }, [selection]);
-  var limitReachedInfo = React.useMemo(function () {
+  var limitReachedInfo = useMemo(function () {
     return (selection == null ? void 0 : selection.limit) && (selection == null ? void 0 : selection.limit) <= selectedRows && /*#__PURE__*/React.createElement(S.Alert, null, /*#__PURE__*/React.createElement(Alert.InlineAlert, {
       type: "warning",
       message: locale.selectionLimitWarning
     }));
   }, [locale, selectedRows, selection]);
-  var selected = React.useMemo(function () {
+  var selected = useMemo(function () {
     var _locale$pagination, _locale$pagination2;
 
     return selectedRows > 0 ? /*#__PURE__*/React.createElement(S.Title, null, /*#__PURE__*/React.createElement("strong", null, formatValue(selectedRows)), " ", locale.selected, " /", ' ', formatValue(total) + " " + ((_locale$pagination = locale.pagination) == null ? void 0 : _locale$pagination.items)) : /*#__PURE__*/React.createElement(S.Title, null, /*#__PURE__*/React.createElement("strong", null, formatValue(total)), " ", (_locale$pagination2 = locale.pagination) == null ? void 0 : _locale$pagination2.items);

package/dist/TableHeader/TableLimit/TableLimit.types.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import { ReactNode, ReactText } from 'react';
 import { Locale, RowSelection } from '../../Table.types';
-export interface TableLimitProps<T extends {
-    key: React.ReactText;
-}> {
+export type TableLimitProps<T extends {
+    key: ReactText;
+}> = {
     selection?: RowSelection<T>;
     total: number;
-    itemsMenu: React.ReactNode;
+    itemsMenu: ReactNode;
     locale: Locale;
-}
+};

package/dist/VirtualTable/VirtualTable.d.ts

@@ -35,8 +35,12 @@ declare const _default: <T extends object & RowType<T> & {
     onSort?: import("../Table.types").OnSortFn | undefined;
     dataSourceFull?: T[] | undefined;
     dataSourceTotalCount?: number | undefined;
-    maxHeight?: number | undefined;
-    skeletonProps?: Pick<import("../TableSkeleton/TableSkeleton.types").TableSkeletonProps, "headerHeight" | "subheaderHeight" | "rowHeight"> | undefined;
+    skeletonProps?: {
+        maxHeight?: number | undefined;
+        headerHeight?: number | undefined;
+        subheaderHeight?: number | undefined;
+        cellHeight?: number | undefined;
+    } | undefined;
 } & {
     cellHeight: number;
     infiniteScroll?: import("../InfiniteScroll/InfiniteLoaderItem.types").InfiniteScrollProps | undefined;

package/dist/constants/TableSkeleton.constants.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare const DEFAULT_ROW_COUNT = 10;
+export declare const HEADER_HEIGHT = 73;
+export declare const SUBHEADER_HEIGHT = 64;
+export declare const ROW_HEIGHT = 73;
+export declare const SKELETON_BAR_TINY = 16;
+export declare const SKELETON_BAR_STANDARD = 72;
+export declare const SKELETON_BAR_WIDE = 100;
+export declare const SKELETON_BAR_EXTRA_WIDE = 164;
+export declare const getDefaultSkeletonColumns: (height?: number) => ({
+    width: number;
+    title: React.JSX.Element;
+    render: () => React.JSX.Element;
+    minWidth?: undefined;
+} | {
+    minWidth: number;
+    title: string;
+    render: () => React.JSX.Element;
+    width?: undefined;
+})[];

package/dist/constants/TableSkeleton.constants.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { SkeletonAvatar } from '@synerise/ds-skeleton';
+import * as S from '../Table.styles';
+import { AvatarLabelCell } from '../Cell';
+export var DEFAULT_ROW_COUNT = 10;
+export var HEADER_HEIGHT = 73;
+export var SUBHEADER_HEIGHT = 64;
+export var ROW_HEIGHT = 73;
+export var SKELETON_BAR_TINY = 16;
+export var SKELETON_BAR_STANDARD = 72;
+export var SKELETON_BAR_WIDE = 100;
+export var SKELETON_BAR_EXTRA_WIDE = 164;
+export var getDefaultSkeletonColumns = function getDefaultSkeletonColumns(height) {
+  if (height === void 0) {
+    height = ROW_HEIGHT;
+  }
+
+  return [{
+    width: 350,
+    title: /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '100px'
+      }
+    }, /*#__PURE__*/React.createElement(S.Skeleton, {
+      numberOfSkeletons: 1,
+      width: "M"
+    })),
+    render: function render() {
+      return /*#__PURE__*/React.createElement(S.TableSkeletonCell, {
+        width: "100%",
+        height: height
+      }, /*#__PURE__*/React.createElement(AvatarLabelCell, {
+        title: /*#__PURE__*/React.createElement("div", {
+          style: {
+            width: '100px'
+          }
+        }, /*#__PURE__*/React.createElement(S.Skeleton, {
+          numberOfSkeletons: 1,
+          width: "M"
+        })),
+        avatar: /*#__PURE__*/React.createElement(SkeletonAvatar, {
+          shape: "square",
+          size: "M"
+        })
+      }));
+    }
+  }, {
+    minWidth: 100,
+    title: '',
+    render: function render() {
+      return /*#__PURE__*/React.createElement(S.TableSkeletonCell, {
+        height: height
+      });
+    }
+  }, {
+    width: 120,
+    title: /*#__PURE__*/React.createElement(S.Skeleton, {
+      numberOfSkeletons: 1,
+      size: "M"
+    }),
+    render: function render() {
+      return /*#__PURE__*/React.createElement(S.TableSkeletonCell, {
+        width: "100%",
+        height: height
+      }, /*#__PURE__*/React.createElement(S.Skeleton, {
+        numberOfSkeletons: 1,
+        size: "M"
+      }));
+    }
+  }, {
+    width: 212,
+    title: /*#__PURE__*/React.createElement(S.Skeleton, {
+      numberOfSkeletons: 1,
+      size: "M"
+    }),
+    render: function render() {
+      return /*#__PURE__*/React.createElement(S.TableSkeletonCell, {
+        width: "100%",
+        height: height
+      }, /*#__PURE__*/React.createElement(S.Skeleton, {
+        numberOfSkeletons: 1,
+        size: "M"
+      }));
+    }
+  }, {
+    width: 120,
+    title: /*#__PURE__*/React.createElement(S.Skeleton, {
+      numberOfSkeletons: 1,
+      size: "M"
+    }),
+    render: function render() {
+      return /*#__PURE__*/React.createElement(S.TableSkeletonCell, {
+        width: "100%",
+        height: height
+      }, /*#__PURE__*/React.createElement(S.Skeleton, {
+        numberOfSkeletons: 1,
+        size: "M"
+      }));
+    }
+  }];
+};