@gravity-ui/react-data-table 1.0.3

package/build/esm/lib/DataTable.scss

@@ -0,0 +1,273 @@
+:root {
+    --data-table-header-vertical-padding: 5px;
+    --data-table-cell-vertical-padding: 5px;
+    --data-table-cell-horizontal-padding: 10px;
+    --data-table-cell-border-padding: var(--data-table-cell-horizontal-padding);
+    --data-table-cell-align: top;
+    --data-table-head-align: top;
+    --data-table-row-height: 30px;
+    --data-table-sort-icon-space: 18px;
+    --data-table-sort-icon-opacity-inactive: 0.15;
+    --data-table-sort-icon-color: inherit;
+}
+
+$cell-border: 1px solid var(--data-table-border-color);
+
+.data-table {
+    $block: &;
+
+    position: relative;
+    box-sizing: border-box;
+
+    &__box {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+
+        &_sticky-head_moving {
+            overflow: visible;
+            position: relative;
+            z-index: 0;
+
+            #{$block}__th {
+                padding-top: 0;
+                padding-bottom: 0;
+                border-top: 0;
+                border-bottom: 0;
+            }
+
+            #{$block}__head-cell {
+                display: block;
+                height: 0;
+                overflow: hidden;
+            }
+
+            #{$block}__row_header-data {
+                visibility: hidden;
+            }
+        }
+        &_sticky-footer_fixed,
+        &_sticky-head_fixed {
+            overflow: auto;
+        }
+    }
+
+    &__table {
+        border-collapse: collapse;
+        table-layout: fixed;
+
+        &_sticky {
+            width: 100%;
+            background: var(--data-table-color-base);
+        }
+    }
+
+    &__row {
+        height: var(--data-table-row-height);
+    }
+
+    &__th {
+        font-weight: 500;
+        cursor: default;
+        padding: var(--data-table-header-vertical-padding) var(--data-table-cell-horizontal-padding);
+        border: $cell-border;
+        position: relative;
+        text-align: left;
+        vertical-align: var(--data-table-head-align);
+
+        &_sortable {
+            cursor: pointer;
+
+            #{$block}__head-cell {
+                padding-right: var(--data-table-sort-icon-space);
+            }
+
+            &#{$block}__th_align_right {
+                #{$block}__head-cell {
+                    padding-right: 0;
+                    padding-left: var(--data-table-sort-icon-space);
+                }
+
+                #{$block}__sort-icon {
+                    left: 0;
+                    right: auto;
+                    transform: translate(0, -50%) scaleX(-1);
+                }
+            }
+        }
+    }
+
+    &__td {
+        padding: var(--data-table-cell-vertical-padding) var(--data-table-cell-horizontal-padding);
+        border: $cell-border;
+        vertical-align: var(--data-table-cell-align);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &__td,
+    &__th {
+        &_index {
+            text-align: right;
+        }
+
+        &_align {
+            &_left {
+                text-align: left;
+            }
+            &_center {
+                text-align: center;
+            }
+            &_right {
+                text-align: right;
+            }
+        }
+
+        &:first-child {
+            padding-left: var(--data-table-cell-border-padding);
+        }
+        &:last-child {
+            padding-right: var(--data-table-cell-border-padding);
+        }
+    }
+
+    &__index {
+        text-align: right;
+    }
+
+    &__head-cell {
+        display: inline-block;
+        position: relative;
+        vertical-align: top;
+        white-space: nowrap;
+        max-width: 100%;
+        box-sizing: border-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &__error {
+        padding: 20px;
+        white-space: pre-wrap;
+    }
+
+    &__sort-icon {
+        display: inline-flex;
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translate(0, -50%);
+        color: var(--data-table-sort-icon-color);
+
+        &:after {
+            content: attr(data-index);
+            position: absolute;
+            font-size: 8px;
+            top: -5px;
+            left: 100%;
+        }
+
+        &_shadow {
+            opacity: var(--data-table-sort-icon-opacity-inactive);
+            &:after {
+                content: none;
+            }
+        }
+    }
+
+    &__icon {
+        vertical-align: top;
+    }
+
+    &__no-data {
+        background: var(--data-table-color-stripe);
+    }
+
+    &__sticky {
+        $sticky: &;
+        &_fixed {
+            position: absolute;
+            z-index: 1;
+            left: 0;
+            right: 0;
+            overflow: hidden;
+
+            &#{$sticky}_head {
+                top: 0;
+            }
+
+            &#{$sticky}_footer {
+                bottom: 0;
+            }
+        }
+        &_moving {
+            position: sticky;
+            z-index: 1;
+            margin-bottom: -1px;
+        }
+    }
+
+    &_striped-rows {
+        #{$block}__row {
+            &_odd {
+                background: var(--data-table-color-stripe);
+            }
+        }
+    }
+
+    &_highlight-rows {
+        #{$block}__row {
+            &:hover {
+                background: var(--data-table-color-hover-area);
+            }
+        }
+    }
+
+    &_header_multiline {
+        #{$block}__head-cell {
+            white-space: normal;
+        }
+    }
+    &_header_pre {
+        #{$block}__head-cell {
+            white-space: pre;
+        }
+    }
+
+    &__foot {
+        background: var(--data-table-color-footer-area);
+
+        &_has-sticky-footer_moving {
+            visibility: hidden;
+        }
+    }
+
+    &_theme_yandex-cloud {
+        --data-table-color-base: var(
+            --yc-color-base-background,
+            var(--yc-color-base, var(--color-base))
+        );
+        --data-table-color-stripe: var(
+            --yc-color-base-generic-ultralight,
+            var(--yc-color-base-area, var(--color-base-area))
+        );
+        --data-table-border-color: var(
+            --yc-color-base-generic-hover,
+            var(--yc-color-contrast-15-solid, var(--color-contrast-15-solid))
+        );
+        --data-table-color-hover-area: var(
+            --yc-color-base-simple-hover,
+            var(--yc-color-hover-area, var(--color-hover-area))
+        );
+        --data-table-color-footer-area: var(--data-table-color-base);
+    }
+
+    &_theme_legacy {
+        --data-table-color-base: #ffffff;
+        --data-table-color-stripe: rgba(0, 0, 0, 0.03);
+        --data-table-border-color: #dddddd;
+        --data-table-color-hover-area: #ffeba0;
+        --data-table-color-footer-area: var(--data-table-color-base);
+    }
+}

package/build/esm/lib/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const ASCENDING = 1;
+export declare const DESCENDING = -1;
+export declare const LEFT = "left";
+export declare const CENTER = "center";
+export declare const RIGHT = "right";
+export declare const FIXED = "fixed";
+export declare const MOVING = "moving";
+export declare const LEGACY_THEME = "legacy";
+export declare const YCLOUD_THEME = "yandex-cloud";
+export declare const INDEX_COLUMN = "__index__";
+export declare const UI_TIMEOUT = 500;

package/build/esm/lib/constants.js

@@ -0,0 +1,11 @@
+export const ASCENDING = 1;
+export const DESCENDING = -1;
+export const LEFT = 'left';
+export const CENTER = 'center';
+export const RIGHT = 'right';
+export const FIXED = 'fixed';
+export const MOVING = 'moving';
+export const LEGACY_THEME = 'legacy';
+export const YCLOUD_THEME = 'yandex-cloud';
+export const INDEX_COLUMN = '__index__';
+export const UI_TIMEOUT = 500;

package/build/esm/lib/featureSupport.d.ts

@@ -0,0 +1 @@
+export declare const positionStickySupported: boolean;

package/build/esm/lib/featureSupport.js

@@ -0,0 +1,7 @@
+function _positionStickySupported() {
+    const el = document.createElement('a');
+    const mStyle = el.style;
+    mStyle.cssText = 'position:sticky; position:-webkit-sticky;';
+    return mStyle.position.indexOf('sticky') !== -1;
+}
+export const positionStickySupported = _positionStickySupported();

package/build/esm/lib/height-observer.d.ts

@@ -0,0 +1,14 @@
+interface HeightObserverParams {
+    getSrcElement: () => HTMLElement | null;
+    onHeightChange: (height: number) => void;
+}
+export declare class HeightObserver {
+    prevHeight: number;
+    params: HeightObserverParams;
+    constructor(params: HeightObserverParams);
+    destroy(): void;
+    get node(): HTMLElement | null;
+    checkAndUpdateHeight: () => void;
+    updateHeight(height: number): void;
+}
+export {};

package/build/esm/lib/height-observer.js

@@ -0,0 +1,40 @@
+const defaultParams = {
+    getSrcElement: () => null,
+    onHeightChange: () => { },
+};
+export class HeightObserver {
+    constructor(params) {
+        this.prevHeight = 0;
+        this.params = defaultParams;
+        this.checkAndUpdateHeight = () => {
+            if (this.node) {
+                requestAnimationFrame(() => {
+                    const node = this.node;
+                    if (node) {
+                        this.updateHeight(node.offsetHeight);
+                    }
+                    else {
+                        this.updateHeight(0);
+                    }
+                });
+            }
+            else {
+                this.updateHeight(0);
+            }
+        };
+        this.params = Object.assign({}, params);
+    }
+    destroy() {
+        this.updateHeight(0);
+        this.params = defaultParams;
+    }
+    get node() {
+        return this.params.getSrcElement();
+    }
+    updateHeight(height) {
+        if (this.prevHeight !== height) {
+            this.prevHeight = height;
+            this.params.onHeightChange(height);
+        }
+    }
+}

package/build/esm/lib/index.d.ts

@@ -0,0 +1,4 @@
+export { INDEX_COLUMN } from './constants';
+export * from './types';
+import DataTable from './DataTable';
+export default DataTable;

package/build/esm/lib/index.js

@@ -0,0 +1,4 @@
+export { INDEX_COLUMN } from './constants';
+export * from './types';
+import DataTable from './DataTable';
+export default DataTable;

package/build/esm/lib/types.d.ts

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import ReactList from 'react-list';
+import { ASCENDING, CENTER, DESCENDING, FIXED, LEFT, LEGACY_THEME, MOVING, RIGHT, YCLOUD_THEME } from './constants';
+declare type HeaderData<T> = T & {
+    headerIndex?: number;
+};
+declare type FooterData<T> = T & {
+    footerIndex?: number;
+};
+export interface DataTableProps<T> {
+    columns: Column<T>[];
+    headerData?: HeaderData<T>[];
+    data: T[];
+    footerData?: FooterData<T>[];
+    startIndex?: number;
+    settings?: Settings;
+    emptyDataMessage?: string;
+    rowClassName?: (row: T, index: number, isFooterData?: boolean, isHeaderData?: boolean) => string;
+    renderEmptyRow?: (columns: DataTableProps<T>['columns']) => React.ReactNode;
+    rowKey?: (row: T, index: number) => string | number;
+    visibleRowIndex?: (row: T, index: number) => number;
+    initialSortOrder?: SortOrder | SortOrder[];
+    sortOrder?: SortOrder | SortOrder[];
+    theme: THEMES | string;
+    onSort?: (sortOrder: DataTableProps<T>['initialSortOrder']) => void;
+    onRowClick?: (row: T, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void;
+    onError?: (error: unknown) => void;
+    nullBeforeNumbers?: boolean;
+}
+export interface Column<T> {
+    name: string;
+    header?: React.ReactNode;
+    headerTitle?: string;
+    className?: string;
+    width?: number | string;
+    align?: AlignType;
+    accessor?: string | ((row: T) => any);
+    title?: string | ((row: T) => string);
+    render?: (props: {
+        value?: unknown;
+        row: T;
+        index: number;
+        footer?: boolean;
+        headerData?: boolean;
+    }) => React.ReactNode;
+    customStyle?: (props: CustomStyleParams<T>) => React.CSSProperties;
+    onClick?: (data: {
+        row: T;
+        index: number;
+        footer?: boolean;
+        headerData?: boolean;
+    }, column: Column<T>) => void;
+    sortable?: boolean;
+    defaultOrder?: OrderType;
+    sortAccessor?: string | ((row: T) => any);
+    sortAscending?: Comparator<T>;
+    sub?: Column<T>[];
+    group?: boolean;
+    autogroup?: boolean;
+}
+export declare type DynamicInnerRefT = ReactList;
+export interface Settings {
+    displayIndices?: boolean;
+    stickyHead?: HeadPosition;
+    stickyTop?: 'auto' | number;
+    syncHeadOnResize?: boolean;
+    stickyFooter?: HeadPosition;
+    stickyBottom?: 'auto' | number;
+    dynamicRender?: boolean;
+    dynamicInnerRef?: React.Ref<DynamicInnerRefT>;
+    dynamicRenderType?: 'simple' | 'uniform' | 'variable';
+    dynamicItemSizeEstimator?: ReactList['props']['itemSizeEstimator'];
+    dynamicItemSizeGetter?: ReactList['props']['itemSizeGetter'];
+    dynamicRenderMinSize?: number;
+    dynamicRenderUseStaticSize?: boolean;
+    dynamicRenderThreshold?: number;
+    dynamicRenderScrollParentGetter?: ReactList['props']['scrollParentGetter'];
+    dynamicRenderScrollParentViewportSizeGetter?: () => number;
+    sortable?: boolean;
+    externalSort?: boolean;
+    disableSortReset?: boolean;
+    defaultOrder?: OrderType;
+    highlightRows?: boolean;
+    stripedRows?: boolean;
+    headerMod?: 'multiline' | 'pre';
+}
+export interface CustomStyleParams<T> {
+    row?: T;
+    index?: number;
+    name: string;
+    header?: boolean;
+    footer?: boolean;
+    headerData?: boolean;
+}
+export declare type AlignType = typeof LEFT | typeof RIGHT | typeof CENTER;
+export declare type OrderType = typeof ASCENDING | typeof DESCENDING;
+export interface SortOrder {
+    columnId: string;
+    order: OrderType;
+}
+export declare type HeadPosition = typeof FIXED | typeof MOVING;
+export declare type THEMES = typeof LEGACY_THEME | typeof YCLOUD_THEME;
+export interface SortedDataItem<T> {
+    row: T;
+    index: number;
+    span?: {
+        [colName: string]: number;
+    };
+}
+export declare type Comparator<T> = (l: SortedDataItem<T>, r: SortedDataItem<T>) => number;
+export {};

package/build/esm/lib/types.js

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

package/build/esm/lib/util.d.ts

@@ -0,0 +1,28 @@
+import { ColumnExtended, NameToOrderTypeMap, SortOrderWithSortColumns } from './DataTable';
+import { OrderType, Settings, SortOrder, SortedDataItem } from './types';
+export declare type SlimColumn = {
+    name: string;
+    defaultOrder?: OrderType;
+};
+export declare function getSortOrder({ name: columnName, defaultOrder: columnDefaultOrder }: SlimColumn, { sortOrder, sortColumns }: Partial<SortOrderWithSortColumns>, multiColumnSort?: boolean, { defaultOrder: settingsDefaultOrder, disableSortReset, }?: {
+    defaultOrder?: OrderType;
+    disableSortReset?: boolean;
+}): {
+    sortOrder: NameToOrderTypeMap;
+    sortColumns: string[];
+};
+interface SortingFunctionFlags {
+    nullBeforeNumbers?: boolean;
+    externalSort?: boolean;
+}
+export declare function getSortedData<T>(data: T[], dataColumns: ColumnExtended<T>[], { sortOrder, sortColumns }: SortOrderWithSortColumns, sortingFunctionFlags: SortingFunctionFlags): SortedDataItem<T>[];
+declare type ExternalSortOrderType = SortOrder | SortOrder[];
+export declare function externalToInternalSortOrder(columns: ExternalSortOrderType, settings?: Settings): {
+    sortOrder: NameToOrderTypeMap;
+    sortColumns: string[];
+};
+export declare function internalToExternalSortOrder(sortOrder: NameToOrderTypeMap): {
+    columnId: string;
+    order: OrderType;
+}[];
+export {};

package/build/esm/lib/util.js

@@ -0,0 +1,146 @@
+import { __rest } from "tslib";
+import { ASCENDING, DESCENDING } from './constants';
+export function getSortOrder({ name: columnName, defaultOrder: columnDefaultOrder }, { sortOrder = {}, sortColumns = [] }, multiColumnSort = false, { defaultOrder: settingsDefaultOrder, disableSortReset, } = {}) {
+    const defaultOrder = columnDefaultOrder || settingsDefaultOrder;
+    const emptyResult = {
+        sortOrder: {},
+        sortColumns: [],
+    };
+    if (!columnName) {
+        return multiColumnSort ? { sortOrder, sortColumns } : emptyResult;
+    }
+    let newColumns = sortColumns;
+    const prevOrder = sortOrder[columnName];
+    let order = defaultOrder;
+    if (prevOrder) {
+        if (prevOrder === defaultOrder || disableSortReset) {
+            order = prevOrder === ASCENDING ? DESCENDING : ASCENDING;
+        }
+        else {
+            // reset sort order if previously was set non-default
+            order = undefined;
+        }
+    }
+    if (!multiColumnSort) {
+        return order
+            ? {
+                sortOrder: { [columnName]: order },
+                sortColumns: [columnName],
+            }
+            : emptyResult;
+    }
+    const _a = sortOrder, _b = columnName, _ = _a[_b], newOrder = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]); // eslint-disable-line no-unused-vars
+    if (order) {
+        newOrder[columnName] = order;
+        if (!new Set(sortColumns).has(columnName)) {
+            newColumns = [...sortColumns, columnName];
+        }
+    }
+    else {
+        newColumns = sortColumns.filter((name) => name !== columnName);
+    }
+    return {
+        sortOrder: newOrder,
+        sortColumns: newColumns,
+    };
+}
+function generateSortingFunction(column, order, flags = {}) {
+    const compareValue = order;
+    const { sortAscending } = column;
+    if (typeof sortAscending === 'function') {
+        return (row1, row2) => {
+            return compareValue * sortAscending(row1, row2);
+        };
+    }
+    return (row1, row2) => {
+        const value1 = column._getSortValue(row1.row);
+        const value2 = column._getSortValue(row2.row);
+        /* eslint-disable no-eq-null, eqeqeq */
+        // Comparison with null made here intentionally
+        // to exclude multiple comparison with undefined and null
+        if (value1 == null && value2 != null) {
+            return flags.nullBeforeNumbers ? -compareValue : 1;
+        }
+        if (value2 == null && value1 != null) {
+            return flags.nullBeforeNumbers ? compareValue : -1;
+        }
+        /* eslint-enable no-eq-null, eqeqeq */
+        if (value1 < value2) {
+            return Number(-compareValue);
+        }
+        if (value1 > value2) {
+            return Number(compareValue);
+        }
+        return 0;
+    };
+}
+export function getSortedData(data, dataColumns, { sortOrder, sortColumns }, sortingFunctionFlags) {
+    const sortFunctionDict = {};
+    dataColumns.forEach((column) => {
+        if (sortOrder[column.name]) {
+            sortFunctionDict[column.name] = generateSortingFunction(column, sortOrder[column.name], sortingFunctionFlags);
+        }
+        else if (column.group && column.autogroup) {
+            sortFunctionDict[column.name] = generateSortingFunction(column, ASCENDING, sortingFunctionFlags);
+        }
+    });
+    const groupColumns = dataColumns.filter((column) => column.group);
+    const hasGroupColumns = groupColumns.length > 0;
+    // primarily sort data by group columns, then by user sort
+    const sortFunctions = [
+        ...groupColumns.map((column) => sortFunctionDict[column.name]).filter(Boolean),
+        ...sortColumns.map((name) => sortFunctionDict[name]).filter(Boolean),
+    ];
+    // add 'span' map into data for grouping purposes
+    const indexedData = data.map((row, index) => hasGroupColumns ? { row, index, span: {} } : { row, index });
+    if (sortFunctions.length && !sortingFunctionFlags.externalSort) {
+        indexedData.sort((row1, row2) => {
+            let comparison = 0;
+            sortFunctions.some((sort) => {
+                comparison = sort(row1, row2);
+                return Boolean(comparison);
+            });
+            return comparison || row1.index - row2.index;
+        });
+    }
+    // calculate grouping
+    if (indexedData.length > 1 && hasGroupColumns) {
+        const baseRows = [];
+        const baseValues = [];
+        indexedData.forEach((row) => {
+            groupColumns.every((column, index) => {
+                const value = column._getValue(row.row);
+                if (baseRows[index] && value === baseValues[index]) {
+                    baseRows[index].span[column.name] += 1;
+                    row.span[column.name] = 0;
+                    return true;
+                }
+                else {
+                    // when column value changed we have to reset not only this column base row,
+                    // but base rows for all rest columns
+                    groupColumns.slice(index).forEach((aColumn, aIndex) => {
+                        baseRows[index + aIndex] = row;
+                        baseValues[index + aIndex] = aColumn._getValue(row.row);
+                        row.span[aColumn.name] = 1;
+                    });
+                    return false;
+                }
+            });
+        });
+    }
+    return indexedData;
+}
+export function externalToInternalSortOrder(columns, settings) {
+    const columnList = Array.isArray(columns) ? columns : [columns];
+    return columnList.reduce((result, { columnId, order }) => {
+        return getSortOrder({ name: columnId, defaultOrder: order }, result, true, settings);
+    }, { sortOrder: {}, sortColumns: [] });
+}
+export function internalToExternalSortOrder(sortOrder) {
+    return Object.keys(sortOrder).map((columnId) => {
+        return {
+            columnId,
+            order: sortOrder[columnId],
+        };
+    });
+}