@netdata/netdata-ui/dist/es6/components/table/table.js

netdata UI kit

var _excluded = ["bulkActions", "headerChildren", "data", "dataColumns", "dataGa", "enableColumnPinning", "columnPinning", "onColumnPinningChange", "enableColumnReordering", "columnOrder", "onColumnOrderChange", "enableColumnVisibility", "columnVisibility", "onColumnVisibilityChange", "columnSizing", "onColumnSizingChange", "enablePagination", "enableResizing", "enableSelection", "enableSubRowSelection", "rowSelection", "onRowSelectionChange", "singleRowSelection", "expanded", "onExpandedChange", "autoResetExpanded", "enableSorting", "manualSorting", "sortBy", "onSortingChange", "globalFilter", "onSearch", "globalFilterFn", "enableCustomSearch", "grouping", "onGroupByChange", "groupByColumns", "onRowSelected", "paginationOptions", "onPaginationChange", "rowActions", "testPrefix", "meta", "title", "virtualizeOptions", "tableRef", "className", "width", "getRowCanExpand", "getRowId", "ref"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import React, { memo, useCallback, useLayoutEffect, useMemo, useRef } from "react";
import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, getExpandedRowModel, getGroupedRowModel, useReactTable } from "@tanstack/react-table";
import isEqual from "lodash/isEqual";
import identity from "lodash/identity";
import Flex from "../templates/flex";
import Layer from "../templates/layer";
import { Text } from "../typography";
import { Icon } from "../icon";
import { comparison, includesString, select } from "./helpers/filterFns";
import useColumns from "./useColumns";
import TableProvider, { useTableDispatch } from "./provider";
import Pagination from "./components/pagination";
import { throttle } from "throttle-debounce";
import Header from "./header";
import HeaderActions from "./header/actions";
import Body from "./body";
import usePinning from "./usePinning";
import useVisibility from "./useVisibility";
import useSizing from "./useSizing";
import useExpanding from "./useExpanding";
import usePaginating from "./usePaginating";
import useSearching from "./useSearching";
import useSelecting from "./useSelecting";
import useSorting from "./useSorting";
import useGrouping from "./useGrouping";
import useColumnOrder from "./useColumnOrder";
var noop = function noop() {};
var emptyObj = {};
var filterFns = {
  comparison: comparison,
  select: select
};
var emptyArray = [];
var tableDefaultProps = {
  coloredSortedColumn: true,
  enableColumnPinning: false,
  enableColumnReordering: false,
  enableColumnVisibility: false,
  enableResizing: false,
  globalFilterFn: includesString,
  onColumnVisibilityChange: noop,
  onColumnOrderChange: noop,
  onSortingChange: noop,
  onExpandedChange: noop,
  paginationOptions: {
    pageIndex: 0,
    pageSize: 100
  },
  expanded: emptyObj,
  rowSelection: emptyObj,
  rowActions: emptyObj,
  meta: emptyObj,
  globalFilter: "",
  testPrefix: "",
  virtualizeOptions: {},
  columnOrder: emptyArray
};
var Table = /*#__PURE__*/memo(function (props) {
  var _tableDefaultProps$pr = _extends({}, tableDefaultProps, props),
    bulkActions = _tableDefaultProps$pr.bulkActions,
    headerChildren = _tableDefaultProps$pr.headerChildren,
    data = _tableDefaultProps$pr.data,
    dataColumns = _tableDefaultProps$pr.dataColumns,
    dataGa = _tableDefaultProps$pr.dataGa,
    _tableDefaultProps$pr2 = _tableDefaultProps$pr.enableColumnPinning,
    enableColumnPinning = _tableDefaultProps$pr2 === void 0 ? tableDefaultProps.enableColumnPinning : _tableDefaultProps$pr2,
    defaultColumnPinning = _tableDefaultProps$pr.columnPinning,
    pinningChangeCb = _tableDefaultProps$pr.onColumnPinningChange,
    _tableDefaultProps$pr3 = _tableDefaultProps$pr.enableColumnReordering,
    enableColumnReordering = _tableDefaultProps$pr3 === void 0 ? tableDefaultProps.enableColumnReordering : _tableDefaultProps$pr3,
    _tableDefaultProps$pr4 = _tableDefaultProps$pr.columnOrder,
    defaultColumnOrder = _tableDefaultProps$pr4 === void 0 ? tableDefaultProps.columnOrder : _tableDefaultProps$pr4,
    _tableDefaultProps$pr5 = _tableDefaultProps$pr.onColumnOrderChange,
    columnOrderChangeCb = _tableDefaultProps$pr5 === void 0 ? tableDefaultProps.onColumnOrderChange : _tableDefaultProps$pr5,
    _tableDefaultProps$pr6 = _tableDefaultProps$pr.enableColumnVisibility,
    enableColumnVisibility = _tableDefaultProps$pr6 === void 0 ? tableDefaultProps.enableColumnVisibility : _tableDefaultProps$pr6,
    defaultColumnVisibility = _tableDefaultProps$pr.columnVisibility,
    _tableDefaultProps$pr7 = _tableDefaultProps$pr.onColumnVisibilityChange,
    visibilityChangeCb = _tableDefaultProps$pr7 === void 0 ? tableDefaultProps.onColumnVisibilityChange : _tableDefaultProps$pr7,
    defaultColumnSizing = _tableDefaultProps$pr.columnSizing,
    sizingChangeCb = _tableDefaultProps$pr.onColumnSizingChange,
    enablePagination = _tableDefaultProps$pr.enablePagination,
    _tableDefaultProps$pr8 = _tableDefaultProps$pr.enableResizing,
    enableResizing = _tableDefaultProps$pr8 === void 0 ? tableDefaultProps.enableResizing : _tableDefaultProps$pr8,
    enableSelection = _tableDefaultProps$pr.enableSelection,
    enableSubRowSelection = _tableDefaultProps$pr.enableSubRowSelection,
    _tableDefaultProps$pr9 = _tableDefaultProps$pr.rowSelection,
    defaultRowSelection = _tableDefaultProps$pr9 === void 0 ? tableDefaultProps.rowSelection : _tableDefaultProps$pr9,
    rowSelectionChangeCb = _tableDefaultProps$pr.onRowSelectionChange,
    singleRowSelection = _tableDefaultProps$pr.singleRowSelection,
    _tableDefaultProps$pr0 = _tableDefaultProps$pr.expanded,
    defaultExpanded = _tableDefaultProps$pr0 === void 0 ? tableDefaultProps.expanded : _tableDefaultProps$pr0,
    _tableDefaultProps$pr1 = _tableDefaultProps$pr.onExpandedChange,
    expandedChangeCb = _tableDefaultProps$pr1 === void 0 ? tableDefaultProps.onExpandedChange : _tableDefaultProps$pr1,
    _tableDefaultProps$pr10 = _tableDefaultProps$pr.autoResetExpanded,
    autoResetExpanded = _tableDefaultProps$pr10 === void 0 ? false : _tableDefaultProps$pr10,
    enableSorting = _tableDefaultProps$pr.enableSorting,
    _tableDefaultProps$pr11 = _tableDefaultProps$pr.manualSorting,
    manualSorting = _tableDefaultProps$pr11 === void 0 ? false : _tableDefaultProps$pr11,
    sortBy = _tableDefaultProps$pr.sortBy,
    _tableDefaultProps$pr12 = _tableDefaultProps$pr.onSortingChange,
    sortingChangeCb = _tableDefaultProps$pr12 === void 0 ? tableDefaultProps.onSortingChange : _tableDefaultProps$pr12,
    _tableDefaultProps$pr13 = _tableDefaultProps$pr.globalFilter,
    defaultGlobalFilter = _tableDefaultProps$pr13 === void 0 ? tableDefaultProps.globalFilter : _tableDefaultProps$pr13,
    onSearch = _tableDefaultProps$pr.onSearch,
    _tableDefaultProps$pr14 = _tableDefaultProps$pr.globalFilterFn,
    globalFilterFn = _tableDefaultProps$pr14 === void 0 ? tableDefaultProps.globalFilterFn : _tableDefaultProps$pr14,
    enableCustomSearch = _tableDefaultProps$pr.enableCustomSearch,
    defaultGrouping = _tableDefaultProps$pr.grouping,
    groupingChangeCb = _tableDefaultProps$pr.onGroupByChange,
    groupByColumns = _tableDefaultProps$pr.groupByColumns,
    onRowSelected = _tableDefaultProps$pr.onRowSelected,
    _tableDefaultProps$pr15 = _tableDefaultProps$pr.paginationOptions,
    paginationOptions = _tableDefaultProps$pr15 === void 0 ? tableDefaultProps.paginationOptions : _tableDefaultProps$pr15,
    paginationChangeCb = _tableDefaultProps$pr.onPaginationChange,
    _tableDefaultProps$pr16 = _tableDefaultProps$pr.rowActions,
    rowActions = _tableDefaultProps$pr16 === void 0 ? tableDefaultProps.rowActions : _tableDefaultProps$pr16,
    _tableDefaultProps$pr17 = _tableDefaultProps$pr.testPrefix,
    testPrefix = _tableDefaultProps$pr17 === void 0 ? tableDefaultProps.testPrefix : _tableDefaultProps$pr17,
    _tableDefaultProps$pr18 = _tableDefaultProps$pr.meta,
    tableMeta = _tableDefaultProps$pr18 === void 0 ? tableDefaultProps.meta : _tableDefaultProps$pr18,
    title = _tableDefaultProps$pr.title,
    _tableDefaultProps$pr19 = _tableDefaultProps$pr.virtualizeOptions,
    virtualizeOptions = _tableDefaultProps$pr19 === void 0 ? tableDefaultProps.virtualizeOptions : _tableDefaultProps$pr19,
    tableRef = _tableDefaultProps$pr.tableRef,
    className = _tableDefaultProps$pr.className,
    width = _tableDefaultProps$pr.width,
    getRowCanExpand = _tableDefaultProps$pr.getRowCanExpand,
    getRowId = _tableDefaultProps$pr.getRowId,
    ref = _tableDefaultProps$pr.ref,
    rest = _objectWithoutPropertiesLoose(_tableDefaultProps$pr, _excluded);
  var _useVisibility = useVisibility(defaultColumnVisibility, visibilityChangeCb),
    columnVisibility = _useVisibility[0],
    onColumnVisibilityChange = _useVisibility[1];
  var _useSizing = useSizing(defaultColumnSizing, sizingChangeCb),
    columnSizing = _useSizing[0],
    onColumnSizingChange = _useSizing[1];
  var _usePinning = usePinning(defaultColumnPinning, pinningChangeCb),
    columnPinning = _usePinning[0],
    onColumnPinningChange = _usePinning[1];
  var _useExpanding = useExpanding(defaultExpanded, expandedChangeCb),
    expanded = _useExpanding[0],
    onExpandedChange = _useExpanding[1];
  var _useSelecting = useSelecting(defaultRowSelection, rowSelectionChangeCb),
    rowSelection = _useSelecting[0],
    onRowSelectionChange = _useSelecting[1];
  var _useSorting = useSorting(sortBy, sortingChangeCb),
    sorting = _useSorting[0],
    onSortingChange = _useSorting[1];
  var _usePaginating = usePaginating(paginationOptions, paginationChangeCb),
    pagination = _usePaginating[0],
    onPaginationChange = _usePaginating[1];
  var _useGrouping = useGrouping(defaultGrouping, groupingChangeCb),
    grouping = _useGrouping[0],
    onGroupingChange = _useGrouping[1];
  var _useSearching = useSearching(defaultGlobalFilter, onSearch),
    globalFilter = _useSearching[0],
    onGlobalFilterChange = _useSearching[1];
  var _useColumnOrder = useColumnOrder(defaultColumnOrder, columnOrderChangeCb),
    columnOrder = _useColumnOrder[0],
    onColumnOrderChange = _useColumnOrder[1];
  var columns = useColumns(dataColumns, {
    testPrefix: testPrefix,
    enableSelection: enableSelection,
    singleRowSelection: singleRowSelection,
    enableResizing: enableResizing,
    enableSorting: enableSorting,
    rowActions: rowActions,
    tableMeta: tableMeta
  });
  var table = useReactTable(_extends({
    columns: columns,
    data: data,
    manualPagination: !enablePagination,
    columnResizeMode: "onEnd",
    filterFns: filterFns,
    state: {
      columnVisibility: columnVisibility,
      columnSizing: columnSizing,
      rowSelection: rowSelection,
      globalFilter: enableCustomSearch ? "" : globalFilter,
      sorting: sorting,
      pagination: pagination,
      columnPinning: columnPinning,
      expanded: expanded,
      grouping: useMemo(function () {
        var _groupByColumns$group;
        return Array.isArray(grouping) ? [grouping].filter(Boolean) : (groupByColumns == null || (_groupByColumns$group = groupByColumns[grouping]) == null ? void 0 : _groupByColumns$group.columns) || [];
      }, [grouping]),
      columnOrder: columnOrder
    },
    onExpandedChange: onExpandedChange
  }, !enableCustomSearch && globalFilterFn ? {
    globalFilterFn: globalFilterFn
  } : {}, {
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onRowSelectionChange: onRowSelectionChange,
    onGlobalFilterChange: enableCustomSearch ? undefined : onGlobalFilterChange,
    onSortingChange: onSortingChange,
    manualSorting: manualSorting,
    enableMultiSorting: true,
    isMultiSortEvent: function isMultiSortEvent(e) {
      return e.ctrlKey || e.shiftKey || e.metaKey;
    },
    getSortedRowModel: getSortedRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    getRowCanExpand: getRowCanExpand,
    autoResetExpanded: autoResetExpanded,
    getGroupedRowModel: getGroupedRowModel(),
    getSubRows: useCallback(function (row) {
      return row.children;
    }, []),
    onPaginationChange: onPaginationChange,
    onColumnVisibilityChange: onColumnVisibilityChange,
    onColumnSizingChange: onColumnSizingChange,
    onColumnPinningChange: onColumnPinningChange,
    onColumnOrderChange: onColumnOrderChange,
    enableSubRowSelection: enableSubRowSelection,
    columnGroupingMode: "reorder",
    getRowId: getRowId
  }));
  var prevStateRef = useRef(table.getState());
  table.isEqual = function (selector) {
    if (selector === void 0) {
      selector = identity;
    }
    if (!prevStateRef.current) {
      prevStateRef.current = table.getState();
      return false;
    }
    var areStatesEqual = isEqual(selector(prevStateRef.current), selector(table.getState()));
    prevStateRef.current = table.getState();
    return areStatesEqual;
  };
  var dispatch = useTableDispatch();
  var dispatchThrottled = useCallback(throttle(300, dispatch), []);
  useLayoutEffect(function () {
    var state = table.getState();
    dispatchThrottled({
      sorting: state.sorting,
      columnSizing: state.columnSizing,
      expanded: state.expanded,
      grouping: state.grouping,
      columnVisibility: state.columnVisibility,
      columnSizingInfo: state.columnSizingInfo,
      rowsById: table.getRowModel().rowsById,
      selectedRows: table.getSelectedRowModel().flatRows,
      allColumns: table == null || table.getAllLeafColumns == null ? void 0 : table.getAllLeafColumns()
    });
  }, [table.getState()]);
  if (tableRef) tableRef.current = table;
  var getHasNextPage = virtualizeOptions.getHasNextPage,
    loading = virtualizeOptions.loading,
    warning = virtualizeOptions.warning;
  return /*#__PURE__*/React.createElement(Flex, {
    height: {
      max: "100%"
    },
    overflow: "hidden",
    column: true,
    flex: "1",
    ref: ref,
    className: className,
    width: width
  }, /*#__PURE__*/React.createElement(Header, {
    q: globalFilter,
    hasSearch: !!onSearch,
    onSearch: onGlobalFilterChange,
    groupByColumns: groupByColumns,
    onGroupBy: onGroupingChange,
    grouping: grouping,
    tableMeta: tableMeta,
    title: title,
    dataColumns: dataColumns,
    enableColumnVisibility: enableColumnVisibility,
    bulkActions: bulkActions,
    enableCustomSearch: enableCustomSearch
  }, headerChildren || null, /*#__PURE__*/React.createElement(HeaderActions, {
    rowSelection: rowSelection,
    bulkActions: bulkActions,
    columnPinning: columnPinning,
    dataGa: dataGa,
    enableColumnVisibility: enableColumnVisibility,
    enableColumnPinning: enableColumnPinning,
    table: table,
    testPrefix: testPrefix,
    onRowSelected: onRowSelected
  })), /*#__PURE__*/React.createElement(Body, _extends({
    table: table,
    dataGa: dataGa,
    testPrefix: testPrefix,
    meta: tableMeta,
    enableColumnReordering: enableColumnReordering
  }, rest, virtualizeOptions)), !(getHasNextPage != null && getHasNextPage()) && !loading && !!warning && /*#__PURE__*/React.createElement(Flex, {
    alignItems: "center",
    justifyContent: "center",
    gap: 2,
    padding: [4],
    width: "100%"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "warning_triangle_hollow",
    color: "warning"
  }), " ", /*#__PURE__*/React.createElement(Text, {
    color: "warningText"
  }, warning)), loading && /*#__PURE__*/React.createElement(Layer, {
    backdrop: false,
    position: "bottom",
    margin: [0, 0, 10],
    padding: [0, 0, 10],
    zIndex: 20
  }, /*#__PURE__*/React.createElement(Flex, {
    background: "tooltip",
    padding: [1, 2],
    gap: 2
  }, /*#__PURE__*/React.createElement(Text, {
    strong: true
  }, "Loading more..."))), enablePagination && /*#__PURE__*/React.createElement(Pagination, {
    table: table
  }));
});
var withProvider = function withProvider(Component) {
  return function (props) {
    return /*#__PURE__*/React.createElement(TableProvider, null, /*#__PURE__*/React.createElement(Component, props));
  };
};
export default withProvider(Table);