@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Table/StatefulTable.d.ts

@@ -1,107 +1,107 @@
-import React, { Component } from "react";
-import { BaseTableProps } from "./BaseTable";
-export type StatefulTableProps<ColumnMetaData> = BaseTableProps<ColumnMetaData> & {
-    selectedRows?: string[];
-    onRowSelectionChange?: (...args: any[]) => any;
-    onRowExpansionChange?: (...args: any[]) => any;
-    rowsPerPage?: number;
-    onPageChange?: (...args: any[]) => any;
-    selectAllAriaLabel?: string;
-    deselectAllAriaLabel?: string;
-    paginationCss?: any;
-    paginationProps?: any;
-    expandedRows?: any[];
-    hasSelectableRows?: boolean;
-    hasExpandableRows?: boolean;
-    onSelectRow?: (...args: any[]) => any;
-    onSelectHeader?: (...args: any[]) => any;
-    isHeaderSelected?: any;
-};
-type StatefulTableState = {
-    selectedRows: any;
-    expandedRows: any;
-    isHeaderSelected: boolean;
-    currentPage: number;
-    paginatedRows: any;
-};
-declare class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps<ColumnMetaData>, StatefulTableState> {
-    static defaultProps: {
-        noRowsContent: string;
-        keyField: string;
-        id: any;
-        loading: boolean;
-        footerRows: any[];
-        rowHovers: boolean;
-        compact: boolean;
-        className: any;
-        stickyHeader: boolean;
-        onRowMouseEnter: () => void;
-        onRowMouseLeave: () => void;
-        hasSelectableRows: boolean;
-        selectedRows: any[];
-        isHeaderSelected: boolean;
-        onRowExpansionChange: () => void;
-        selectAllAriaLabel: any;
-        deselectAllAriaLabel: any;
-        paginationCss: any;
-        paginationProps: {};
-    };
-    constructor(props: any);
-    static getDerivedStateFromProps(nextProps: any, prevState: any): {
-        paginatedRows: any;
-        currentPage: any;
-    };
-    onRowExpansionChangeHandler: () => void;
-    onExpandRow: (row: any) => void;
-    removeRowFromExpandedRows: (rowKeyToRemove: any) => any;
-    addRowToExpandedRows: (rowKeyToAdd: any) => any[];
-    onRowSelectionChangeHandler: () => void;
-    onSelectRow: (row: any) => void;
-    onSelectHeader: () => void;
-    removeRowFromSelection: (rowKeyToRemove: any) => any;
-    addRowToSelection: (rowKeyToAdd: any) => any[];
-    addRowsToSelection: (rowsKeysToAdd: any) => any[];
-    removeRowsFromSelection: (rowKeysToRemove: any) => any;
-    rowsByPageSelector: (pageNumber: any) => any;
-    goToPage: (pageNumber: any) => void;
-    currentRowsByPageSelector: (rows: any, pageNumber: any) => any[];
-    areAllRowsSelectedOnPage: (selectedRows: any, pageNumber: any) => boolean;
-    goToPrevPage: () => void;
-    goToNextPage: () => void;
-    onPageSelectionChangeHandler: () => void;
-    getControlProps: () => {
-        rows: any;
-        columns: any[];
-        noRowsContent?: string;
-        keyField?: string;
-        id?: string;
-        loading?: boolean;
-        footerRows?: any;
-        rowHovers?: boolean;
-        compact?: boolean;
-        className?: string;
-        stickyHeader?: boolean;
-        onRowMouseEnter?: (...args: any[]) => any;
-        onRowMouseLeave?: (...args: any[]) => any;
-        onMouseEnter?: any;
-        onMouseLeave?: any;
-        rowBorder?: boolean;
-        selectedRows?: string[];
-        onRowSelectionChange?: (...args: any[]) => any;
-        onRowExpansionChange?: (...args: any[]) => any;
-        rowsPerPage?: number;
-        onPageChange?: (...args: any[]) => any;
-        selectAllAriaLabel?: string;
-        deselectAllAriaLabel?: string;
-        paginationCss?: any;
-        paginationProps?: any;
-        expandedRows?: any[];
-        hasSelectableRows?: boolean;
-        hasExpandableRows?: boolean;
-        onSelectRow?: (...args: any[]) => any;
-        onSelectHeader?: (...args: any[]) => any;
-        isHeaderSelected?: any;
-    };
-    render(): React.JSX.Element;
-}
-export default StatefulTable;
+import React, { Component } from "react";
+import { BaseTableProps } from "./BaseTable";
+export type StatefulTableProps<ColumnMetaData> = BaseTableProps<ColumnMetaData> & {
+    selectedRows?: string[];
+    onRowSelectionChange?: (...args: any[]) => any;
+    onRowExpansionChange?: (...args: any[]) => any;
+    rowsPerPage?: number;
+    onPageChange?: (...args: any[]) => any;
+    selectAllAriaLabel?: string;
+    deselectAllAriaLabel?: string;
+    paginationCss?: any;
+    paginationProps?: any;
+    expandedRows?: any[];
+    hasSelectableRows?: boolean;
+    hasExpandableRows?: boolean;
+    onSelectRow?: (...args: any[]) => any;
+    onSelectHeader?: (...args: any[]) => any;
+    isHeaderSelected?: any;
+};
+type StatefulTableState = {
+    selectedRows: any;
+    expandedRows: any;
+    isHeaderSelected: boolean;
+    currentPage: number;
+    paginatedRows: any;
+};
+declare class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps<ColumnMetaData>, StatefulTableState> {
+    static defaultProps: {
+        noRowsContent: string;
+        keyField: string;
+        id: any;
+        loading: boolean;
+        footerRows: any[];
+        rowHovers: boolean;
+        compact: boolean;
+        className: any;
+        stickyHeader: boolean;
+        onRowMouseEnter: () => void;
+        onRowMouseLeave: () => void;
+        hasSelectableRows: boolean;
+        selectedRows: any[];
+        isHeaderSelected: boolean;
+        onRowExpansionChange: () => void;
+        selectAllAriaLabel: any;
+        deselectAllAriaLabel: any;
+        paginationCss: any;
+        paginationProps: {};
+    };
+    constructor(props: any);
+    static getDerivedStateFromProps(nextProps: any, prevState: any): {
+        paginatedRows: any;
+        currentPage: any;
+    };
+    onRowExpansionChangeHandler: () => void;
+    onExpandRow: (row: any) => void;
+    removeRowFromExpandedRows: (rowKeyToRemove: any) => any;
+    addRowToExpandedRows: (rowKeyToAdd: any) => any[];
+    onRowSelectionChangeHandler: () => void;
+    onSelectRow: (row: any) => void;
+    onSelectHeader: () => void;
+    removeRowFromSelection: (rowKeyToRemove: any) => any;
+    addRowToSelection: (rowKeyToAdd: any) => any[];
+    addRowsToSelection: (rowsKeysToAdd: any) => any[];
+    removeRowsFromSelection: (rowKeysToRemove: any) => any;
+    rowsByPageSelector: (pageNumber: any) => any;
+    goToPage: (pageNumber: any) => void;
+    currentRowsByPageSelector: (rows: any, pageNumber: any) => any[];
+    areAllRowsSelectedOnPage: (selectedRows: any, pageNumber: any) => boolean;
+    goToPrevPage: () => void;
+    goToNextPage: () => void;
+    onPageSelectionChangeHandler: () => void;
+    getControlProps: () => {
+        rows: any;
+        columns: any[];
+        noRowsContent?: string;
+        keyField?: string;
+        id?: string;
+        loading?: boolean;
+        footerRows?: any;
+        rowHovers?: boolean;
+        compact?: boolean;
+        className?: string;
+        stickyHeader?: boolean;
+        onRowMouseEnter?: (...args: any[]) => any;
+        onRowMouseLeave?: (...args: any[]) => any;
+        onMouseEnter?: any;
+        onMouseLeave?: any;
+        rowBorder?: boolean;
+        selectedRows?: string[];
+        onRowSelectionChange?: (...args: any[]) => any;
+        onRowExpansionChange?: (...args: any[]) => any;
+        rowsPerPage?: number;
+        onPageChange?: (...args: any[]) => any;
+        selectAllAriaLabel?: string;
+        deselectAllAriaLabel?: string;
+        paginationCss?: any;
+        paginationProps?: any;
+        expandedRows?: any[];
+        hasSelectableRows?: boolean;
+        hasExpandableRows?: boolean;
+        onSelectRow?: (...args: any[]) => any;
+        onSelectHeader?: (...args: any[]) => any;
+        isHeaderSelected?: any;
+    };
+    render(): React.JSX.Element;
+}
+export default StatefulTable;

package/dist/src/Table/StatefulTable.js

@@ -0,0 +1,214 @@
+import React, { Component } from "react";
+import propTypes from "@styled-system/prop-types";
+import { Pagination } from "../Pagination";
+import { pick } from "../utils/subset";
+import BaseTable from "./BaseTable";
+import { addExpandableControl } from "./addExpandableControl";
+import { addSelectableControl } from "./addSelectableControl";
+const propNames = [
+    ...Object.keys(propTypes.space),
+    "columns",
+    "rows",
+    "noRowsContent",
+    "keyField",
+    "id",
+    "loading",
+    "footerRows",
+    "rowHovers",
+    "compact",
+    "className",
+    "stickyHeader",
+    "onRowMouseEnter",
+    "onRowMouseLeave",
+];
+const getAllRowKeys = (rows = [], keyField) => rows.map((row) => row[keyField]);
+const paginateRows = (rows, rowsPerPage) => rowsPerPage
+    ? rows.reduce((acc, item, i) => (i % rowsPerPage ? acc : [...acc, rows.slice(i, i + rowsPerPage)]), [])
+    : [rows];
+class StatefulTable extends Component {
+    constructor(props) {
+        super(props);
+        this.onRowExpansionChangeHandler = () => {
+            const { onRowExpansionChange } = this.props;
+            const { expandedRows, currentPage } = this.state;
+            if (onRowExpansionChange) {
+                onRowExpansionChange(this.currentRowsByPageSelector(expandedRows, currentPage));
+            }
+        };
+        this.onExpandRow = (row) => {
+            const { keyField, onRowExpansionChange } = this.props;
+            const currentRowKey = row[keyField];
+            const newExpandedRows = !row.expanded
+                ? this.addRowToExpandedRows(currentRowKey)
+                : this.removeRowFromExpandedRows(currentRowKey);
+            this.setState({
+                expandedRows: newExpandedRows,
+            }, onRowExpansionChange(newExpandedRows));
+        };
+        this.removeRowFromExpandedRows = (rowKeyToRemove) => {
+            const { expandedRows } = this.state;
+            return expandedRows.filter((rowKey) => rowKey !== rowKeyToRemove);
+        };
+        this.addRowToExpandedRows = (rowKeyToAdd) => {
+            const { expandedRows } = this.state;
+            return [...expandedRows, rowKeyToAdd];
+        };
+        this.onRowSelectionChangeHandler = () => {
+            const { onRowSelectionChange } = this.props;
+            const { selectedRows, currentPage } = this.state;
+            if (onRowSelectionChange) {
+                onRowSelectionChange(this.currentRowsByPageSelector(selectedRows, currentPage));
+            }
+        };
+        this.onSelectRow = (row) => {
+            const { currentPage } = this.state;
+            const { keyField } = this.props;
+            const currentRowKey = row[keyField];
+            const newRowSelections = !row.selected
+                ? this.addRowToSelection(currentRowKey)
+                : this.removeRowFromSelection(currentRowKey);
+            this.setState({
+                selectedRows: newRowSelections,
+                isHeaderSelected: this.areAllRowsSelectedOnPage(newRowSelections, currentPage),
+            }, this.onRowSelectionChangeHandler);
+        };
+        this.onSelectHeader = () => {
+            const { isHeaderSelected, currentPage } = this.state;
+            const { keyField } = this.props;
+            const currentRowKeys = getAllRowKeys(this.rowsByPageSelector(currentPage), keyField);
+            this.setState({
+                isHeaderSelected: !isHeaderSelected,
+                selectedRows: isHeaderSelected
+                    ? this.removeRowsFromSelection(currentRowKeys)
+                    : this.addRowsToSelection(currentRowKeys),
+            }, this.onRowSelectionChangeHandler);
+        };
+        this.removeRowFromSelection = (rowKeyToRemove) => {
+            const { selectedRows } = this.state;
+            return selectedRows.filter((rowKey) => rowKey !== rowKeyToRemove);
+        };
+        this.addRowToSelection = (rowKeyToAdd) => {
+            const { selectedRows } = this.state;
+            return [...selectedRows, rowKeyToAdd];
+        };
+        this.addRowsToSelection = (rowsKeysToAdd) => {
+            const { selectedRows } = this.state;
+            return [...selectedRows, ...rowsKeysToAdd];
+        };
+        this.removeRowsFromSelection = (rowKeysToRemove) => {
+            const { selectedRows } = this.state;
+            return selectedRows.filter((row) => !rowKeysToRemove.includes(row));
+        };
+        this.rowsByPageSelector = (pageNumber) => {
+            const { paginatedRows } = this.state;
+            return paginatedRows[pageNumber - 1];
+        };
+        this.goToPage = (pageNumber) => {
+            const { selectedRows } = this.state;
+            const { hasSelectableRows } = this.props;
+            this.setState(Object.assign({ currentPage: pageNumber }, (hasSelectableRows && {
+                isHeaderSelected: this.areAllRowsSelectedOnPage(selectedRows, pageNumber),
+            })), this.onPageSelectionChangeHandler);
+        };
+        this.currentRowsByPageSelector = (rows, pageNumber) => {
+            const currentRows = this.rowsByPageSelector(pageNumber);
+            const { keyField } = this.props;
+            const allRowKeysOnPage = getAllRowKeys(currentRows, keyField);
+            return allRowKeysOnPage.filter((rowKey) => rows.includes(rowKey));
+        };
+        this.areAllRowsSelectedOnPage = (selectedRows, pageNumber) => {
+            const { keyField } = this.props;
+            const currentRows = this.rowsByPageSelector(pageNumber);
+            const allRowKeysOnPage = getAllRowKeys(currentRows, keyField);
+            return allRowKeysOnPage.length === this.currentRowsByPageSelector(selectedRows, pageNumber).length;
+        };
+        this.goToPrevPage = () => {
+            const { currentPage } = this.state;
+            this.goToPage(currentPage - 1);
+        };
+        this.goToNextPage = () => {
+            const { currentPage } = this.state;
+            this.goToPage(currentPage + 1);
+        };
+        this.onPageSelectionChangeHandler = () => {
+            const { onPageChange } = this.props;
+            const { currentPage } = this.state;
+            if (onPageChange) {
+                onPageChange(currentPage);
+            }
+        };
+        this.getControlProps = () => {
+            const { selectedRows, isHeaderSelected, currentPage, expandedRows } = this.state;
+            const { hasSelectableRows, hasExpandableRows } = this.props;
+            const selectionConfig = {
+                onSelectRow: this.onSelectRow,
+                onSelectHeader: this.onSelectHeader,
+                selectedRows: this.currentRowsByPageSelector(selectedRows, currentPage),
+                isHeaderSelected,
+            };
+            const expandableConfig = {
+                onRowExpansionChange: this.onExpandRow,
+                expandedRows,
+            };
+            const props = Object.assign(Object.assign(Object.assign(Object.assign({}, this.props), { rows: this.rowsByPageSelector(currentPage) || [] }), (hasSelectableRows && selectionConfig)), (hasExpandableRows && expandableConfig));
+            const selectableProps = Object.assign(Object.assign({}, props), addSelectableControl(props));
+            const expandableProps = Object.assign(Object.assign({}, props), addExpandableControl(props));
+            if (hasSelectableRows && hasExpandableRows)
+                return Object.assign(Object.assign({}, props), addExpandableControl(selectableProps));
+            if (hasSelectableRows)
+                return selectableProps;
+            if (hasExpandableRows)
+                return expandableProps;
+            return props;
+        };
+        const { selectedRows, expandedRows, rowsPerPage, rows } = this.props;
+        this.state = {
+            selectedRows: selectedRows || [],
+            expandedRows: expandedRows || [],
+            isHeaderSelected: false,
+            currentPage: 1,
+            paginatedRows: paginateRows(rows, rowsPerPage),
+        };
+    }
+    static getDerivedStateFromProps(nextProps, prevState) {
+        const { rows, rowsPerPage } = nextProps;
+        const paginatedRows = paginateRows(rows, rowsPerPage);
+        const { currentPage } = prevState;
+        // when the rows prop changes paginate the new rows and reset the current page
+        return {
+            paginatedRows,
+            currentPage: paginatedRows.length < currentPage ? paginatedRows.length || 1 : currentPage,
+        };
+    }
+    render() {
+        const { paginatedRows, currentPage } = this.state;
+        const { rowsPerPage, paginationProps, paginationCss } = this.props;
+        const baseTableProps = pick(this.getControlProps(), ...propNames);
+        return (React.createElement(React.Fragment, null,
+            React.createElement(BaseTable, Object.assign({}, baseTableProps)),
+            rowsPerPage && (React.createElement(Pagination, Object.assign({ pt: "x2", currentPage: currentPage, totalPages: paginatedRows.length || 1, onSelectPage: this.goToPage, onNext: this.goToNextPage, onPrevious: this.goToPrevPage, justifyContent: "flex-end", css: paginationCss }, paginationProps)))));
+    }
+}
+StatefulTable.defaultProps = {
+    noRowsContent: "No records have been created for this table.",
+    keyField: "id",
+    id: undefined,
+    loading: false,
+    footerRows: [],
+    rowHovers: true,
+    compact: false,
+    className: undefined,
+    stickyHeader: false,
+    onRowMouseEnter: () => { },
+    onRowMouseLeave: () => { },
+    hasSelectableRows: false,
+    selectedRows: [],
+    isHeaderSelected: false,
+    onRowExpansionChange: () => { },
+    selectAllAriaLabel: undefined,
+    deselectAllAriaLabel: undefined,
+    /* PM support only */
+    paginationCss: undefined,
+    paginationProps: {},
+};
+export default StatefulTable;

package/dist/src/Table/StyledTh.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-type StyledThProps = {
-    width?: any;
-    compact?: boolean;
-    sticky?: any;
-};
-declare const StyledTh: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, StyledThProps>> & string;
-export default StyledTh;
+/// <reference types="react" />
+type StyledThProps = {
+    width?: any;
+    compact?: boolean;
+    sticky?: any;
+};
+declare const StyledTh: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, StyledThProps>> & string;
+export default StyledTh;

package/dist/src/Table/StyledTh.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+const stickyStyles = (theme) => ({
+    position: "sticky",
+    top: 0,
+    background: "white",
+    boxShadow: "0px 1px 0px rgba(0,0,0,.1)",
+    zIndex: theme.zIndices.tableHeader,
+});
+const StyledTh = styled.th(({ compact, theme, sticky, width }) => {
+    const padding = compact ? theme.space.x1 : theme.space.x2;
+    return Object.assign(Object.assign({ fontWeight: "normal", textAlign: "left", padding: `${padding} 0`, paddingRight: padding, color: theme.colors.darkGrey }, (sticky && stickyStyles(theme))), { "&:first-child": {
+            paddingLeft: padding,
+        }, width: width || "auto" });
+});
+export default StyledTh;

package/dist/src/Table/Table.d.ts

@@ -1,13 +1,13 @@
-import React from "react";
-import SortingColumnHeader from "./SortingColumnHeader";
-import { StatefulTableProps } from "./StatefulTable";
-import { ColumnType, RowType, CellInfoType } from "./Table.types";
-export type TableProps<ColumnMetadata = unknown> = StatefulTableProps<ColumnMetadata>;
-export type TableColumnType<ColumnMetadata = unknown> = ColumnType<ColumnMetadata>;
-export type TableRowType = RowType;
-export type TableCellInfoType<ColumnMetadata = unknown> = CellInfoType<ColumnMetadata>;
-declare function Table<ColumnMetadata>({ hasSelectableRows, rowsPerPage, hasExpandableRows, selectedRows, onRowSelectionChange, onRowExpansionChange, onPageChange, selectAllAriaLabel, deselectAllAriaLabel, paginationCss, paginationProps, ...props }: TableProps<ColumnMetadata>): React.JSX.Element;
-declare namespace Table {
-    var SortingHeader: typeof SortingColumnHeader;
-}
-export default Table;
+import React from "react";
+import SortingColumnHeader from "./SortingColumnHeader";
+import { StatefulTableProps } from "./StatefulTable";
+import { ColumnType, RowType, CellInfoType } from "./Table.types";
+export type TableProps<ColumnMetadata = unknown> = StatefulTableProps<ColumnMetadata>;
+export type TableColumnType<ColumnMetadata = unknown> = ColumnType<ColumnMetadata>;
+export type TableRowType = RowType;
+export type TableCellInfoType<ColumnMetadata = unknown> = CellInfoType<ColumnMetadata>;
+declare function Table<ColumnMetadata>({ hasSelectableRows, rowsPerPage, hasExpandableRows, selectedRows, onRowSelectionChange, onRowExpansionChange, onPageChange, selectAllAriaLabel, deselectAllAriaLabel, paginationCss, paginationProps, ...props }: TableProps<ColumnMetadata>): React.JSX.Element;
+declare namespace Table {
+    var SortingHeader: typeof SortingColumnHeader;
+}
+export default Table;

package/dist/src/Table/Table.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import StatefulTable from "./StatefulTable";
+import BaseTable from "./BaseTable";
+import SortingColumnHeader from "./SortingColumnHeader";
+function Table(_a) {
+    var { hasSelectableRows, rowsPerPage, hasExpandableRows, selectedRows, onRowSelectionChange, onRowExpansionChange, onPageChange, selectAllAriaLabel, deselectAllAriaLabel, paginationCss, paginationProps } = _a, props = __rest(_a, ["hasSelectableRows", "rowsPerPage", "hasExpandableRows", "selectedRows", "onRowSelectionChange", "onRowExpansionChange", "onPageChange", "selectAllAriaLabel", "deselectAllAriaLabel", "paginationCss", "paginationProps"]);
+    return hasSelectableRows || rowsPerPage || hasExpandableRows ? (React.createElement(StatefulTable, Object.assign({ hasExpandableRows: hasExpandableRows, hasSelectableRows: hasSelectableRows, onRowExpansionChange: onRowExpansionChange, onRowSelectionChange: onRowSelectionChange, selectedRows: selectedRows, rowsPerPage: rowsPerPage, onPageChange: onPageChange, selectAllAriaLabel: selectAllAriaLabel, deselectAllAriaLabel: deselectAllAriaLabel, paginationCss: paginationCss, paginationProps: paginationProps }, props))) : (React.createElement(BaseTable, Object.assign({}, props)));
+}
+Table.SortingHeader = SortingColumnHeader;
+export default Table;

package/dist/src/Table/Table.mock-utils.d.ts

@@ -0,0 +1,32 @@
+export function getMockRows(numRows: any): {
+    id: number;
+    c1: string;
+    c2: string;
+    c3: string;
+    c4: string;
+    c5: string;
+    c6: string;
+    c7: string;
+    c8: string;
+    c9: string;
+    c10: string;
+    c11: string;
+    c12: string;
+    c13: string;
+    c14: string;
+    c15: string;
+    c16: string;
+    c17: string;
+    c18: string;
+    c19: string;
+    c20: string;
+    c21: string;
+}[];
+export const mockColumns: {
+    label: string;
+    dataKey: string;
+}[];
+export function getMockColumns(n: any): {
+    label: string;
+    dataKey: string;
+}[];

package/dist/src/Table/Table.mock-utils.js

@@ -0,0 +1,58 @@
+export const getMockRows = (numRows) => {
+    const rows = [];
+    for (let i = 0; i < numRows; i += 1) {
+        const row = {
+            id: i,
+            c1: `some data ${i}`,
+            c2: "some data",
+            c3: "some data",
+            c4: "some data",
+            c5: "some data",
+            c6: "some data",
+            c7: "some data",
+            c8: "some data",
+            c9: "some data",
+            c10: "some data",
+            c11: "some data",
+            c12: "some data",
+            c13: "some data",
+            c14: "some data",
+            c15: "some data",
+            c16: "some data",
+            c17: "some data",
+            c18: "some data",
+            c19: "some data",
+            c20: "some data",
+            c21: "some data",
+        };
+        rows.push(row);
+    }
+    return rows;
+};
+export const mockColumns = [
+    { label: "Column 1", dataKey: "c1" },
+    { label: "Column 2", dataKey: "c2" },
+    { label: "Column 3", dataKey: "c3" },
+    { label: "Column 4", dataKey: "c4" },
+    { label: "Column 5", dataKey: "c5" },
+    { label: "Column 6", dataKey: "c6" },
+    { label: "Column 7", dataKey: "c7" },
+    { label: "Column 8", dataKey: "c8" },
+    { label: "Column 9", dataKey: "c9" },
+    { label: "Column 10", dataKey: "c10" },
+    { label: "Column 11", dataKey: "c11" },
+    { label: "Column 12", dataKey: "c12" },
+    { label: "Column 13", dataKey: "c13" },
+    { label: "Column 14", dataKey: "c14" },
+    { label: "Column 15", dataKey: "c15" },
+    { label: "Column 16", dataKey: "c16" },
+    { label: "Column 17", dataKey: "c17" },
+    { label: "Column 18", dataKey: "c18" },
+    { label: "Column 19", dataKey: "c19" },
+    { label: "Column 20", dataKey: "c20" },
+    { label: "Column 21", dataKey: "c21" },
+];
+export const getMockColumns = (n) => Array.from({ length: n }, (_, i) => i + 1).map((item) => ({
+    label: `Column ${item}`,
+    dataKey: `c${item}`,
+}));

package/dist/src/Table/Table.types.d.ts

@@ -1,28 +1,28 @@
-/// <reference types="react" />
-type Key = string | number;
-export type RowType = any;
-export interface CellInfoType<ColumnMetadata> {
-    cellData: any;
-    column: ColumnType<ColumnMetadata>;
-    row: RowType;
-}
-type ColumnAlignment = "left" | "right" | "center";
-export type ColumnType<ColumnMetadata> = {
-    align?: ColumnAlignment;
-    label?: string;
-    cellFormatter?: (cell: CellInfoType<ColumnMetadata>) => React.ReactNode;
-    cellRenderer?: (cell: CellInfoType<ColumnMetadata>) => React.ReactNode;
-    headerRenderer?: (column: ColumnType<ColumnMetadata>) => React.ReactNode;
-    headerFormatter?: (column: ColumnType<ColumnMetadata>) => React.ReactNode;
-    width?: string | number;
-    metadata?: ColumnMetadata;
-} & ({
-    key: Key;
-    dataKey?: never | undefined;
-} | {
-    dataKey: Key;
-    key?: never | undefined;
-});
-export type Columns<ColumnMetadata> = ColumnType<ColumnMetadata>[];
-export type RowBorder = boolean;
-export {};
+/// <reference types="react" />
+type Key = string | number;
+export type RowType = any;
+export interface CellInfoType<ColumnMetadata> {
+    cellData: any;
+    column: ColumnType<ColumnMetadata>;
+    row: RowType;
+}
+type ColumnAlignment = "left" | "right" | "center";
+export type ColumnType<ColumnMetadata> = {
+    align?: ColumnAlignment;
+    label?: string;
+    cellFormatter?: (cell: CellInfoType<ColumnMetadata>) => React.ReactNode;
+    cellRenderer?: (cell: CellInfoType<ColumnMetadata>) => React.ReactNode;
+    headerRenderer?: (column: ColumnType<ColumnMetadata>) => React.ReactNode;
+    headerFormatter?: (column: ColumnType<ColumnMetadata>) => React.ReactNode;
+    width?: string | number;
+    metadata?: ColumnMetadata;
+} & ({
+    key: Key;
+    dataKey?: never | undefined;
+} | {
+    dataKey: Key;
+    key?: never | undefined;
+});
+export type Columns<ColumnMetadata> = ColumnType<ColumnMetadata>[];
+export type RowBorder = boolean;
+export {};

package/dist/src/Table/Table.types.js

@@ -0,0 +1 @@
+export {};