@elastic/eui/es/components/table/table.js

Elastic UI Component Library

var _excluded = ["children", "className", "compressed", "tableLayout", "hasBackground", "responsiveBreakpoint", "scrollableInline", "stickyScrollbar", "stickyHeader"];
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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */

import React, { useRef } from 'react';
import PropTypes from "prop-types";
import classNames from 'classnames';
import { useEuiMemoizedStyles } from '../../services';
import { useIsEuiTableResponsive, EuiTableIsResponsiveContext } from './mobile/responsive_context';
import { EuiTableVariantContext } from './table_context';
import { euiTableStyles } from './table.styles';
import { usePropsWithComponentDefaults } from '../provider/component_defaults';
import { euiContainerCSS } from '../../global_styling';
import { EUI_TABLE_CSS_CONTAINER_NAME } from './const';
import { EuiTableStickyScrollbar } from './sticky_scrollbar';
import { EuiTableStickyHeader } from './sticky_header/sticky_header';
import { EuiTableStoreProvider } from './store/provider';
import { jsx as ___EmotionJSX } from "@emotion/react";
/**
 * EuiTable is a low-level building block component used to render tabular data
 * in a customized way.
 *
 * It should only be used when confirmed that [EuiBasicTable]{@link EuiBasicTable}
 * and [EuiInMemoryTable]{@link EuiInMemoryTable} are not flexible enough
 * for the purposes of the job.
 *
 * @see {@link https://eui.elastic.co/docs/components/tables/custom/|EuiTable documentation}
 */
export var EuiTable = function EuiTable(originalProps) {
  var _usePropsWithComponen = usePropsWithComponentDefaults('EuiTable', originalProps),
    children = _usePropsWithComponen.children,
    className = _usePropsWithComponen.className,
    compressed = _usePropsWithComponen.compressed,
    _usePropsWithComponen2 = _usePropsWithComponen.tableLayout,
    tableLayout = _usePropsWithComponen2 === void 0 ? 'fixed' : _usePropsWithComponen2,
    _usePropsWithComponen3 = _usePropsWithComponen.hasBackground,
    hasBackground = _usePropsWithComponen3 === void 0 ? true : _usePropsWithComponen3,
    responsiveBreakpoint = _usePropsWithComponen.responsiveBreakpoint,
    _usePropsWithComponen4 = _usePropsWithComponen.scrollableInline,
    scrollableInline = _usePropsWithComponen4 === void 0 ? false : _usePropsWithComponen4,
    _usePropsWithComponen5 = _usePropsWithComponen.stickyScrollbar,
    stickyScrollbar = _usePropsWithComponen5 === void 0 ? false : _usePropsWithComponen5,
    _usePropsWithComponen6 = _usePropsWithComponen.stickyHeader,
    stickyHeader = _usePropsWithComponen6 === void 0 ? false : _usePropsWithComponen6,
    rest = _objectWithoutProperties(_usePropsWithComponen, _excluded);
  var tableWrapperRef = useRef(null);
  var tableRef = useRef(null);
  var isResponsive = useIsEuiTableResponsive(responsiveBreakpoint);
  var classes = classNames('euiTable', className);
  var styles = useEuiMemoizedStyles(euiTableStyles);
  var tableStyles = [styles.euiTable, scrollableInline && styles.euiTableScrollableInline, styles.layout[tableLayout], (!compressed || isResponsive) && styles.uncompressed, compressed && !isResponsive && styles.compressed, hasBackground && styles.hasBackground, isResponsive ? styles.mobile : styles.desktop];
  var cssStyles = [euiContainerCSS('normal', EUI_TABLE_CSS_CONTAINER_NAME, true), scrollableInline && styles.scrollableWrapper];
  return ___EmotionJSX(EuiTableStoreProvider, null, stickyHeader && ___EmotionJSX(EuiTableStickyHeader, {
    scrollableInline: scrollableInline,
    tableRef: tableRef,
    tableWrapperRef: tableWrapperRef,
    compressed: compressed,
    isResponsive: isResponsive
  }), ___EmotionJSX("div", {
    css: cssStyles,
    ref: tableWrapperRef
  }, ___EmotionJSX("table", _extends({
    tabIndex: -1,
    css: tableStyles,
    className: classes,
    ref: tableRef
  }, rest), ___EmotionJSX(EuiTableIsResponsiveContext.Provider, {
    value: isResponsive
  }, ___EmotionJSX(EuiTableVariantContext.Provider, {
    value: {
      hasBackground: hasBackground
    }
  }, children)))), scrollableInline && stickyScrollbar && ___EmotionJSX(EuiTableStickyScrollbar, {
    tableWrapperRef: tableWrapperRef
  }));
};
EuiTable.propTypes = {
  compressed: PropTypes.bool,
  /**
     * Named breakpoint. Below this size, the table will collapse
     * into responsive cards.
     *
     * Pass `false` to never collapse to a mobile view, or inversely,
     * `true` to always render mobile-friendly cards.
     *
     * @default m
     */
  responsiveBreakpoint: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.bool.isRequired]),
  /**
     * Sets the table-layout CSS property
     * @default 'fixed'
     */
  tableLayout: PropTypes.oneOf(["fixed", "auto"]),
  /**
     * Toggle the table's background
     * @default true
     */
  hasBackground: PropTypes.bool,
  /**
     * Allow the table to grow over 100% of the container inline size
     * (width in horizontal writing-mode) and enable scrolling on overflow.
     *
     * This should only be used with [`tableLayout`]{@link EuiTableProps#tableLayout}
     * set to `auto`.
     * @beta
     * @default false
     */
  scrollableInline: PropTypes.bool,
  /**
     * Make the horizontal scrollbar visible even if the table is larger
     * than the viewport height. Useful for long tables when the native browser
     * scrollbar is at the bottom of the table and hard to reach.
     *
     * This prop requires [`scrollableInline`](#scrollableInline) to be `true`.
     * @beta
     * @default false
     */
  stickyScrollbar: PropTypes.bool,
  /**
     * When enabled, the table header will stick to the top of the viewport as users
     * scroll through long tables. This enhances usability by maintaining column
     * context during vertical scrolling and unifies the scrolling experience
     * between EuiTable components and EuiDataGrid.
     *
     * This feature should be used in places where it's possible for the table
     * to grow longer than the viewport.
     *
     * @beta
     * @default false
     */
  stickyHeader: PropTypes.bool,
  className: PropTypes.string,
  "aria-label": PropTypes.string,
  "data-test-subj": PropTypes.string,
  css: PropTypes.any
};