@synerise/ds-table-new 0.1.0

package/dist/Table.types.d.ts

@@ -0,0 +1,359 @@
+import { PaginationProps } from 'antd/lib/pagination';
+import { MouseEvent, MutableRefObject, ReactElement, ReactNode, RefObject } from 'react';
+import { TooltipProps } from '@synerise/ds-tooltip';
+import { Column, ColumnDef, ColumnMeta, Row, RowData } from '@tanstack/react-table';
+import { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
+/**
+ * Standard paginated table component props
+ */
+export type TableProps<TData, TValue> = SharedTableProps<TData, TValue> & PaginatedProps & {
+    texts?: Partial<TableTexts>;
+};
+/**
+ * Virtual non-paginated table component props
+ */
+export type VirtualTableProps<TData, TValue> = SharedTableProps<TData, TValue> & VirtualProps & {};
+export type DSColumnMeta<TData extends RowData, TValue> = ColumnMeta<TData, TValue>;
+export type Expandable<TData> = {
+    childrenColumnName?: keyof TData;
+    expandedRowKeys?: string[];
+};
+/**
+ * Table props shared virtual & non-virtual
+ */
+export type SharedTableProps<TData, TValue> = {
+    data: TData[];
+    columns: ColumnDef<TData, TValue>[];
+    dataSourceTotalCount?: number;
+    expandable?: Expandable<TData>;
+    onRowClick?: (row: TData, event: MouseEvent<HTMLTableRowElement>) => void;
+    /**
+     * Returns tooltip props for a given row, or false to disable tooltip.
+     * When provided, the entire row is wrapped in a Tooltip component.
+     */
+    getRowTooltipProps?: (row: TData) => TooltipProps | false;
+    texts?: Partial<TableTexts>;
+    /** estimated row height (px) used by virtualizer */
+    cellHeight?: number;
+    /** optional className for styled-components composition */
+    className?: string;
+    /**
+     * renders in table header next to title and counter when there's any selected rows
+     * useful for rendering batch action items
+     */
+    itemsMenu?: ReactNode;
+    /**
+     * table title - renders in table header
+     */
+    title?: ReactNode;
+    /**
+     * display a skeleton loader in place of the table total count
+     * useful in a table with infinite loader - when total items count is a separate async reques
+     */
+    isCounterLoading?: boolean;
+    /**
+     * set to true to apply white-space: nowrap to column header cells
+     */
+    disableColumnNamesLineBreak?: boolean;
+    /**
+     * renders on the right side of table header
+     * can be used for filtering data based on query
+     * data filtering is to be set up in the implementation / server-side
+     */
+    searchComponent?: ReactNode;
+    /**
+     * renders on the right side of table header
+     * can be used for rendering custom filter buttons
+     * data filtering is to be set up in the implementation / server-side
+     */
+    filterComponent?: ReactNode;
+    rowKey?: RowKey<TData>;
+    /**
+     * render table top border
+     */
+    headerWithBorderTop?: boolean;
+    /**
+     * render table with rounded corners and shadow
+     */
+    cardStyles?: boolean;
+    /**
+     * set to true to prevent rendering column header row with column names
+     */
+    hideColumnNames?: boolean;
+    headerButton?: ReactNode;
+    /**
+     * selection configuration - see SelectionConfig type
+     */
+    selectionConfig?: SelectionConfig<TData>;
+    selectedRowKeys?: string[];
+    renderSelectionTitle?: (selection?: SelectionConfig<TData>) => ReactNode;
+    /**
+     * set to true to render only the table title, without the counter
+     */
+    hideTitlePart?: boolean;
+    renderCustomCounter?: CustomCounterFn;
+    onSort?: OnSortFn;
+    isLoading?: boolean;
+    /**
+     * do not render title bar with search & filter component
+     */
+    hideTitleBar?: boolean;
+    /**
+     * custom "Empty data" component
+     */
+    emptyDataComponent?: ReactNode;
+};
+export type GlobalSelectionProps = {
+    /**
+     * @callback globalSelectionOnChange - fired when user selects "global all"
+     * leave undefined if you do not want global selection option enabled
+     * global selection means "across all pages", including items that haven't been loaded yet"
+     */
+    globalSelectionOnChange?: (selected: boolean) => void;
+    /**
+     * @prop - current global selection state
+     * global selection means "across all pages", including items that haven't been loaded yet
+     */
+    globalSelected?: boolean;
+};
+/**
+ * Internal BaseTable props
+ */
+export type BaseTableProps<TData, TValue> = Omit<SharedTableProps<TData, TValue>, 'data' | 'columns' | 'texts' | 'selectionConfig'> & {
+    texts: TableTexts;
+    columnSizing: Record<string, number>;
+    isColumnSizingReady: boolean;
+} & VirtualProps & PaginatedProps;
+export type ScrollDirection = 'forward' | 'backward' | null;
+export type TableInternalProps = {
+    paginationProps?: TablePaginationProps;
+    hasPagination?: boolean;
+    withScroll?: boolean;
+    withBodyScroll?: boolean;
+    maxHeight?: number;
+    tableOuterRef?: MutableRefObject<HTMLDivElement | null>;
+    tableBodyScrollRef?: MutableRefObject<HTMLDivElement | null>;
+};
+export type TableDimensions = {
+    titleHeight: number;
+    headerHeight: number;
+    parentTopOffset: number;
+};
+export type VirtualTableRef = {
+    getDimensions: () => TableDimensions;
+    scrollToTop: () => void;
+    scrollTo: (top: number) => void;
+    scrollToIndex: (index: number, options?: Parameters<Virtualizer<HTMLDivElement, Element>['scrollToIndex']>[1]) => void;
+};
+type VirtualProps = {
+    /** max-height (px) for the built-in scroll container. Ignored when scrollElementRef is provided. Defaults to 800. */
+    maxHeight?: number;
+    tableRef?: RefObject<VirtualTableRef>;
+    /**
+     * uses body virtualisation
+     * disables sorting - relies on data being provided pre-sorted
+     */
+    infiniteScroll?: InfiniteScrollProps;
+    stickyHeader?: boolean;
+    onItemsRendered?: (props: OnItemsRenderedProps) => void;
+    scrollElementRef?: MutableRefObject<HTMLDivElement | null>;
+    onScrollToRecordIndex?: (recordIndex: number, callback?: () => void) => void;
+};
+export type OnItemsRenderedProps = {
+    visibleStartIndex: number;
+};
+type PaginatedProps = {
+    /**
+     * for tables with infiniteScroll pagination is false
+     * for static default pageSize is 10 and can be overwritten with this config
+     */
+    pagination?: boolean | TablePaginationConfig;
+};
+export type TablePaginationProps = Omit<TablePaginationConfig, 'pageSize'>;
+export type TablePaginationConfig = PaginationProps & {
+    pageSize: number;
+};
+export type LoaderItemPosition = 'TOP' | 'BOTTOM';
+export type InfiniteScrollState = {
+    hasError: boolean;
+    hasMore: boolean;
+    isLoading: boolean;
+};
+export type InfiniteScrollProps = InfiniteScrollState & {
+    maxScroll?: number;
+    showBackToTopButton?: boolean;
+    nextPage?: InfiniteScrollState;
+    prevPage?: InfiniteScrollState;
+    render?: (state: InfiniteScrollState) => ReactElement;
+    onRetryButtonClick?: (position: LoaderItemPosition | undefined) => void;
+    onScrollEndReach?: () => void;
+    onScrollTopReach?: () => void;
+    onBackToTop?: () => void;
+};
+export type LoaderItemProps = {
+    infiniteScroll: InfiniteScrollProps & InfiniteScrollState;
+    position?: LoaderItemPosition;
+};
+export type Selection = {
+    key: string;
+    label: string;
+    onClick: () => void;
+};
+export type ColumnSortOrder = 'descend' | 'ascend' | null;
+export type SingleColumnSort = {
+    columnKey: string;
+    order: ColumnSortOrder;
+};
+export type OnSortFn = (singleColumnSort: SingleColumnSort, sortState: ColumnsSortState) => void;
+export type ColumnsSortState = {
+    [key: string]: {
+        sortOrder: ColumnSortOrder;
+        multiple: number | false;
+    };
+};
+export type SortStateAPI = {
+    columnsSortState: ColumnsSortState;
+    getColumnSortOrder: (key: string) => ColumnSortOrder;
+    setColumnSortOrder: (key: string, sort: ColumnSortOrder) => void;
+    updateColumnsData: (columns: ColumnsSortState) => void;
+};
+export type SelectionAll = 'SELECTION_ALL';
+export type SelectionInvert = 'SELECTION_INVERT';
+export type SelectionItem = SelectionAll | SelectionInvert | Selection | null | undefined;
+export type SelectionConfig<TData> = {
+    onChange: (selectedRowKeys: string[], selectedRows: TData[]) => void;
+    limit?: number;
+    independentSelectionExpandedRows?: boolean;
+    checkRowSelectionStatus?: (record: TData) => {
+        disabled?: boolean;
+        unavailable?: boolean;
+    };
+    /**
+     * Returns tooltip props for a given row's selection checkbox, or false to use the default tooltip.
+     * When provided, the returned props are merged with the default selectRowTooltip.
+     */
+    getSelectionTooltipProps?: (record: TData) => TooltipProps | false;
+    hideSelectAll?: boolean;
+    fixed?: boolean;
+    selections?: SelectionItem[];
+} & GlobalSelectionProps;
+export type RowSelection = {
+    selectedRowKeys: string[];
+};
+export type RowKey<TData> = ((row: TData) => string) | keyof TData;
+export type TableTexts = TableHeaderTexts & TableBodyTexts & TableColumnSorterTexts & TableRowSelectionTexts & {};
+export type TableColumnSorterTexts = {
+    columnSortAscend: ReactNode;
+    columnSortDescend: ReactNode;
+    columnSortZa: ReactNode;
+    columnSortAz: ReactNode;
+    columnSortClear: ReactNode;
+};
+export type TableHeaderTexts = TableSelectionTexts & TableLimitTexts & {};
+export type TableLimitTexts = {
+    totalItems: ReactNode;
+    selected: ReactNode;
+    selectionLimitWarning: ReactNode;
+};
+export type TableBodyTexts = TableEmptyBodyTexts & InfiniteLoaderRowTexts & {};
+export type TableEmptyBodyTexts = {
+    emptyText: ReactNode;
+};
+export type InfiniteLoaderRowTexts = {
+    infiniteScrollLoading: ReactNode;
+    infiniteScrollError: ReactNode;
+    infiniteScrollRetry: ReactNode;
+    infiniteScrollNoMoreData: ReactNode;
+};
+export type TableRowSelectionTexts = {
+    selectRowTooltip: ReactNode;
+};
+export type TableSelectionTexts = {
+    unselectGlobalAll: ReactNode;
+    selectGlobalAll: ReactNode;
+    selectAll: ReactNode;
+    selectAllTooltip: ReactNode;
+    unselectAll: ReactNode;
+    selectInvert: ReactNode;
+    selectionOptionsTooltip: ReactNode;
+};
+export type CustomCounterArgs = {
+    count: number;
+    content: ReactNode;
+};
+export type CustomCounterFn = (props: CustomCounterArgs) => ReactNode;
+export type TableBodyProps<TData, TValue> = Pick<BaseTableProps<TData, TValue>, 'infiniteScroll' | 'cellHeight' | 'emptyDataComponent' | 'onRowClick' | 'getRowTooltipProps'> & {
+    texts: TableBodyTexts;
+};
+export type TableEmptyBodyProps<TData, TValue> = Pick<TableBodyProps<TData, TValue>, 'emptyDataComponent'> & {
+    texts: TableEmptyBodyTexts;
+};
+export type TableCounterProps<TData, TValue> = Pick<BaseTableProps<TData, TValue>, 'renderCustomCounter' | 'isCounterLoading'> & {
+    texts: TableHeaderTexts;
+    selectedItemsCount?: number;
+    tableTotal: number;
+};
+export type TableHeaderProps<TData, TValue> = Pick<BaseTableProps<TData, TValue>, 'itemsMenu' | 'title' | 'isCounterLoading' | 'searchComponent' | 'filterComponent' | 'rowKey' | 'headerButton' | 'renderCustomCounter' | 'renderSelectionTitle' | 'dataSourceTotalCount' | 'hideTitlePart' | 'isLoading'> & {
+    selectedRows?: number;
+    selectionConfig?: SelectionConfig<TData>;
+    texts: TableHeaderTexts;
+} & Partial<Pick<Expandable<TData>, 'childrenColumnName'>>;
+export type Filter = {
+    tooltips: {
+        default: string;
+        clear: string;
+        define: string;
+        list: string;
+    };
+    openedLabel: string;
+    key: string;
+    icon: ReactNode;
+    showList: () => void;
+    show: () => void;
+    handleClear: () => void;
+    selected?: {
+        name: string;
+    };
+    disabled?: boolean;
+};
+export type TableSelectionProps<TData, TValue> = Pick<BaseTableProps<TData, TValue>, 'rowKey'> & {
+    texts: TableSelectionTexts;
+    hasSelectionLimit?: boolean;
+} & Partial<Pick<Expandable<TData>, 'childrenColumnName'>>;
+export type TableColumnsProps = {
+    texts: TableColumnSorterTexts;
+    disableColumnNamesLineBreak?: boolean;
+};
+export type TableColumnSorterProps<TData, TValue> = {
+    column: Column<TData, TValue>;
+    texts: TableColumnSorterTexts;
+};
+export type StickyData = {
+    containerPaddingTop: number;
+    titleBarHeight: number;
+    columnHeadersHeight: number;
+    isRevealed: boolean;
+};
+export type TableHeaderSelectionProps = {
+    texts: TableHeaderTexts;
+    rowCount?: number;
+};
+export type TableRowSelectionProps<TData> = {
+    row: Row<TData>;
+    texts: TableRowSelectionTexts;
+};
+export type TableRowProps<TData> = {
+    row: Row<TData>;
+    isSelected?: boolean;
+    isExpanded?: boolean;
+    isParentExpanded?: boolean;
+} & Pick<SharedTableProps<TData, unknown>, 'onRowClick' | 'getRowTooltipProps'>;
+export type TableRowVirtualProps<TData> = TableRowProps<TData> & {
+    cellHeight: number;
+    virtual: VirtualItem;
+    isLast?: boolean;
+    rowIndex: number;
+    texts: InfiniteLoaderRowTexts;
+    infiniteScroll?: InfiniteScrollProps;
+};
+export {};

package/dist/Table.types.js

@@ -0,0 +1 @@
+

package/dist/VirtualTable.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { VirtualTableProps } from './Table.types';
+export declare const VirtualTable: <TData extends object, TValue>({ data, infiniteScroll, scrollElementRef, columns, tableRef, selectionConfig, selectedRowKeys, rowKey, onSort, stickyHeader, texts: defaultTexts, cellHeight, expandable, onItemsRendered, isLoading, onScrollToRecordIndex, maxHeight, ...props }: VirtualTableProps<TData, TValue>) => React.JSX.Element;

package/dist/VirtualTable.js

@@ -0,0 +1,222 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useMemo, useCallback, useEffect, useImperativeHandle } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { DEFAULT_STICKY_VALUE, DEFAULT_CELL_HEIGHT, INFINITE_LOADER_ITEM_HEIGHT, INFINITE_SCROLL_PADDING_START } from "./Table.const.js";
+import { BaseTable } from "./components/BaseTable/BaseTable.js";
+import { SelectionContext } from "./contexts/SelectionContext.js";
+import { StickyContext } from "./contexts/StickyContext.js";
+import { TableContext } from "./contexts/TableContext.js";
+import { useDefaultTexts } from "./hooks/useDefaultTexts.js";
+import { useInfiniteScroll } from "./hooks/useInfiniteScroll.js";
+import { useTable } from "./hooks/useTable.js";
+import { getDefaultSkeletonColumns } from "./utils/getDefaultSkeletonColumns.js";
+import { getInfiniteScrollPadding } from "./utils/getInfiniteScrollPadding.js";
+import { getIsRevealed } from "./utils/getIsRevealed.js";
+import { processColumns } from "./utils/processColumns.js";
+const VirtualTable = ({
+  data,
+  infiniteScroll,
+  scrollElementRef,
+  columns,
+  tableRef,
+  selectionConfig,
+  selectedRowKeys,
+  rowKey,
+  onSort,
+  stickyHeader,
+  texts: defaultTexts,
+  cellHeight = DEFAULT_CELL_HEIGHT,
+  expandable,
+  onItemsRendered,
+  isLoading,
+  onScrollToRecordIndex,
+  maxHeight,
+  ...props
+}) => {
+  const [stickyData, setStickyData] = useState(DEFAULT_STICKY_VALUE);
+  const texts = useDefaultTexts(defaultTexts);
+  const tableOuterRef = useRef(null);
+  const tableBodyScrollRef = useRef(null);
+  const hasExternalScroll = !!scrollElementRef;
+  const withContainerScroll = !hasExternalScroll && !!stickyHeader;
+  const withBodyScroll = !hasExternalScroll && !stickyHeader;
+  const scrollableContainerRef = scrollElementRef || (stickyHeader ? tableOuterRef : tableBodyScrollRef);
+  const hasSelection = !!selectionConfig;
+  const processedColumns = useMemo(() => {
+    return columns.length ? processColumns(columns, hasSelection, texts) : columns;
+  }, [columns, hasSelection, texts]);
+  const skeletonColumns = useMemo(() => getDefaultSkeletonColumns(), []);
+  const finalColumns = !processedColumns.length && isLoading ? skeletonColumns : processedColumns;
+  const {
+    table,
+    columnSizing,
+    isColumnSizingReady
+  } = useTable({
+    data,
+    expandable,
+    columns: finalColumns,
+    infiniteScroll,
+    wrapperRef: scrollableContainerRef,
+    rowKey,
+    selectionConfig,
+    selectedRowKeys,
+    onSort,
+    pagination: false
+  });
+  const tableIsEmpty = table.getRowModel().rows.length === 0;
+  const handleItemsRendered = useCallback(({
+    visibleStartIndex
+  }) => {
+    if (!onItemsRendered) {
+      return;
+    }
+    const {
+      flatRows,
+      rows: topLevelRows
+    } = table.getRowModel();
+    const row = flatRows[visibleStartIndex];
+    if (!row) {
+      return;
+    }
+    let rootRow = row;
+    let parent = row.getParentRow();
+    while (parent) {
+      rootRow = parent;
+      parent = parent.getParentRow();
+    }
+    const rootIndex = topLevelRows.findIndex((r) => r.id === rootRow.id);
+    onItemsRendered({
+      visibleStartIndex: rootIndex >= 0 ? rootIndex : visibleStartIndex
+    });
+  }, [onItemsRendered, table]);
+  const {
+    scrollDirection,
+    handleScrollDirection
+  } = useInfiniteScroll({
+    infiniteScroll,
+    onItemsRendered: handleItemsRendered,
+    setStickyData
+  });
+  const getDimensions = useCallback(() => {
+    return {
+      titleHeight: stickyData.titleBarHeight,
+      parentTopOffset: stickyData.containerPaddingTop,
+      headerHeight: stickyData.columnHeadersHeight
+    };
+  }, [stickyData.columnHeadersHeight, stickyData.containerPaddingTop, stickyData.titleBarHeight]);
+  const rowVirtualizer = useVirtualizer({
+    count: table.getRowModel().flatRows.length,
+    getScrollElement: () => scrollableContainerRef.current,
+    estimateSize: () => cellHeight + 1,
+    onChange: handleScrollDirection,
+    overscan: 15,
+    paddingEnd: getInfiniteScrollPadding(infiniteScroll)
+  });
+  const [firstItem, setFirstItem] = useState();
+  const updateFirstItem = useCallback((findFirstItem) => {
+    const prevFirstItemIndex = data.findIndex(findFirstItem);
+    if (prevFirstItemIndex >= 0) {
+      rowVirtualizer.scrollToIndex(prevFirstItemIndex, {
+        align: "start",
+        behavior: "auto"
+      });
+    }
+    setFirstItem(data[0]);
+  }, [data, rowVirtualizer]);
+  useEffect(() => {
+    try {
+      if (!infiniteScroll?.prevPage || data.length === 0) {
+        return;
+      }
+      if (!firstItem) {
+        setFirstItem(data[0]);
+        return;
+      }
+      if (rowKey === void 0) {
+        const firstItemStringified = JSON.stringify(firstItem);
+        if (JSON.stringify(data[0]) !== firstItemStringified) {
+          updateFirstItem((item) => JSON.stringify(item) === firstItemStringified);
+        }
+        return;
+      }
+      if (typeof rowKey === "string") {
+        if (data[0][rowKey] !== firstItem[rowKey]) {
+          updateFirstItem((item) => item[rowKey] === firstItem[rowKey]);
+        }
+        return;
+      }
+      if (typeof rowKey === "function") {
+        if (rowKey(data[0]) !== rowKey(firstItem)) {
+          updateFirstItem((item) => rowKey(item) === rowKey(firstItem));
+        }
+      }
+    } catch (_error) {
+      console.warn("Cannot find first item");
+    }
+  }, [data, firstItem, infiniteScroll?.prevPage, rowKey, updateFirstItem]);
+  useEffect(() => {
+    if (rowVirtualizer && infiniteScroll?.prevPage?.hasMore) {
+      rowVirtualizer.scrollToOffset(INFINITE_LOADER_ITEM_HEIGHT);
+    }
+  }, [rowVirtualizer, infiniteScroll?.prevPage?.hasMore]);
+  useImperativeHandle(tableRef, () => ({
+    getDimensions,
+    scrollTo: rowVirtualizer.scrollToOffset,
+    scrollToIndex: (topLevelIndex, options) => {
+      const {
+        rows: topLevelRows,
+        flatRows
+      } = table.getRowModel();
+      const targetRow = topLevelRows[topLevelIndex];
+      if (!targetRow) {
+        return;
+      }
+      const flatIndex = flatRows.findIndex((r) => r.id === targetRow.id);
+      if (flatIndex >= 0) {
+        const offsetData = rowVirtualizer.getOffsetForIndex(flatIndex, "start");
+        if (offsetData !== void 0) {
+          rowVirtualizer.scrollToOffset(offsetData[0] + INFINITE_SCROLL_PADDING_START, options);
+        }
+      }
+    },
+    scrollToTop: () => rowVirtualizer.scrollToOffset(0)
+  }));
+  const stickyValue = useMemo(() => stickyHeader ? {
+    stickyData,
+    setStickyData
+  } : null, [stickyData, stickyHeader]);
+  useEffect(() => {
+    if (stickyHeader && scrollableContainerRef.current) {
+      const {
+        paddingTop
+      } = getComputedStyle(scrollableContainerRef.current);
+      setStickyData((prevValue) => ({
+        ...prevValue,
+        containerPaddingTop: parseFloat(paddingTop)
+      }));
+    }
+  }, [scrollableContainerRef, stickyHeader]);
+  useEffect(() => {
+    if (stickyHeader) {
+      setStickyData((prevValue) => ({
+        ...prevValue,
+        isRevealed: getIsRevealed({
+          scrollDirection,
+          hasData: !tableIsEmpty
+        })
+      }));
+    }
+  }, [stickyHeader, scrollDirection, tableIsEmpty]);
+  const getScrollContainer = useCallback(() => {
+    return scrollableContainerRef.current;
+  }, [scrollableContainerRef]);
+  const tableContextValue = useMemo(() => ({
+    table,
+    rowVirtualizer,
+    getScrollContainer
+  }), [table, rowVirtualizer, getScrollContainer]);
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(StickyContext.Provider, { value: stickyValue, children: /* @__PURE__ */ jsx(SelectionContext.Provider, { value: selectionConfig, children: /* @__PURE__ */ jsx(BaseTable, { columnSizing, isColumnSizingReady, texts, tableOuterRef, tableBodyScrollRef, withScroll: withContainerScroll, withBodyScroll, maxHeight, hasPagination: false, infiniteScroll, isLoading, ...props }) }) }) });
+};
+export {
+  VirtualTable
+};

package/dist/components/BaseTable/BaseTable.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { BaseTableProps, TableInternalProps } from '../../Table.types';
+export declare const BaseTable: <TData extends object, TValue>({ infiniteScroll, cellHeight, className, itemsMenu, texts, isCounterLoading, isLoading, rowKey, title, hideTitleBar, hideTitlePart, renderCustomCounter, renderSelectionTitle, searchComponent, filterComponent, headerWithBorderTop, emptyDataComponent, headerButton, hideColumnNames, expandable, columnSizing, isColumnSizingReady, paginationProps, hasPagination, disableColumnNamesLineBreak, dataSourceTotalCount, cardStyles, tableOuterRef, withScroll, withBodyScroll, maxHeight, tableBodyScrollRef, onRowClick, getRowTooltipProps, }: BaseTableProps<TData, TValue> & TableInternalProps) => React.JSX.Element;