@grafana/ui/dist/cjs/components/Table/TableRT/HeaderRow.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var e2eSelectors = require('@grafana/e2e-selectors');
var i18n = require('@grafana/i18n');
var icon = require('../../../types/icon.cjs');
var Icon = require('../../Icon/Icon.cjs');
var Filter = require('./Filter.cjs');

"use strict";
const HeaderRow = (props) => {
  const { headerGroups, showTypeIcons, tableStyles } = props;
  const e2eSelectorsTable = e2eSelectors.selectors.components.Panels.Visualization.Table;
  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "rowgroup", className: tableStyles.headerRow, children: headerGroups.map((headerGroup) => {
    const { key, ...headerGroupProps } = headerGroup.getHeaderGroupProps();
    return /* @__PURE__ */ React.createElement(
      "div",
      {
        className: tableStyles.thead,
        ...headerGroupProps,
        key,
        "aria-label": e2eSelectorsTable.header,
        role: "row"
      },
      headerGroup.headers.map(
        (column, index) => renderHeaderCell(column, tableStyles, showTypeIcons)
      )
    );
  }) });
};
function renderHeaderCell(column, tableStyles, showTypeIcons) {
  var _a;
  const { key, ...headerProps } = column.getHeaderProps();
  const field = (_a = column.field) != null ? _a : null;
  const tableFieldOptions = field == null ? void 0 : field.config.custom;
  if (column.canResize) {
    headerProps.style.userSelect = column.isResizing ? "none" : "auto";
  }
  headerProps.style.position = "absolute";
  headerProps.style.justifyContent = column.justifyContent;
  headerProps.style.left = column.totalLeft;
  let headerContent = column.render("Header");
  const ariaLabel = typeof headerContent === "string" ? getAriaLabel(headerContent, column.isSortedDesc, column.isSorted, i18n.t) : i18n.t("grafana-ui.table.sort-column", "Sort column");
  let sortHeaderContent = column.canSort && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    /* @__PURE__ */ jsxRuntime.jsxs("button", { ...column.getSortByToggleProps(), className: tableStyles.headerCellLabel, "aria-label": ariaLabel, children: [
      showTypeIcons && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon.getFieldTypeIcon(field), title: field == null ? void 0 : field.type, size: "sm", className: tableStyles.typeIcon }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { children: headerContent }),
      column.isSorted && (column.isSortedDesc ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "lg", name: "arrow-down", className: tableStyles.sortIcon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "arrow-up", size: "lg", className: tableStyles.sortIcon }))
    ] }),
    column.canFilter && /* @__PURE__ */ jsxRuntime.jsx(Filter.Filter, { column, tableStyles, field })
  ] });
  if (sortHeaderContent && (tableFieldOptions == null ? void 0 : tableFieldOptions.headerComponent)) {
    sortHeaderContent = /* @__PURE__ */ jsxRuntime.jsx(tableFieldOptions.headerComponent, { field, defaultContent: sortHeaderContent });
  } else if (tableFieldOptions == null ? void 0 : tableFieldOptions.headerComponent) {
    headerContent = /* @__PURE__ */ jsxRuntime.jsx(tableFieldOptions.headerComponent, { field, defaultContent: headerContent });
  }
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tableStyles.headerCell, ...headerProps, role: "columnheader", children: [
    column.canSort && sortHeaderContent,
    !column.canSort && headerContent,
    !column.canSort && column.canFilter && /* @__PURE__ */ jsxRuntime.jsx(Filter.Filter, { column, tableStyles, field }),
    column.canResize && /* @__PURE__ */ jsxRuntime.jsx("div", { ...column.getResizerProps(), className: tableStyles.resizeHandle })
  ] }, key);
}
const getAriaLabel = (column, isDesc, isSorted, t2) => {
  const unsortedLabel = t2("grafana-ui.table.sort-by-column", "Sort by column {{column}}", { column });
  return isSorted ? isDesc ? t2("grafana-ui.table.sort-by-column-descending", "Sort by column {{column}}, descending", { column }) : t2("grafana-ui.table.sort-by-column-ascending", "Sort by column {{column}}, ascending", { column }) : unsortedLabel;
};

exports.HeaderRow = HeaderRow;
//# sourceMappingURL=HeaderRow.cjs.map