Contents

import React, { useContext } from "react"
import classnames from "classnames"
import { HeaderGroup } from "@tanstack/react-table"

import { GenericObject } from "../../types"

import { buildCss } from "../../utilities/props"
import { globalProps } from "../../utilities/globalProps"

import { TableHeaderCell } from "../Components/TableHeaderCell"

import AdvancedTableContext from "../Context/AdvancedTableContext"

type TableHeaderProps = {
  children?: React.ReactNode | React.ReactNode[]
  className?: string
  enableSorting?: boolean
  id?: string
  sortIcon?: string | string[]
}

export const TableHeader = ({
  children,
  className,
  enableSorting = false,
  id,
  sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
  ...props
}: TableHeaderProps) => {
  const {
    enableToggleExpansion,
    handleExpandOrCollapse,
    loading,
    table,
  } = useContext(AdvancedTableContext)

  const classes = classnames(
    buildCss("pb_advanced_table_header"),
    globalProps(props),
    className
  )


  return (
    <>
      <thead className={classes}
          id={id}
      >
        {/* Get the header groups (only one in this example) */}
        {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
          <tr key={`${headerGroup.id}-headerGroup`}>
            {headerGroup.headers.map(header => (
              <TableHeaderCell
                  enableSorting={enableSorting}
                  enableToggleExpansion={enableToggleExpansion}
                  handleExpandOrCollapse={handleExpandOrCollapse}
                  header={header}
                  headerChildren={children}
                  key={`${header.id}-header`}
                  loading={loading}
                  sortIcon={sortIcon}
              />
            ))}
          </tr>
        ))}
      </thead>
    </>
  )
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
playbook_ui-13.20.0.pre.alpha.PBNTR225advancedtablefeedback2375	app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx