Calcite Table Header Slots

[jfelicianiats]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

I would like to be able to have slotted access to the heading and description of calcite-table-header components similar to table-items. Currently, you can only set this by passing a string to the heading and description props.

Acceptance Criteria

You are able to use slots to fill the heading and description table header properties.

Relevant Info

No response

Which Component

calcite-table-header

Example Use Case

<calcite-table-header>
   <span slot="heading">My column header</span>
   <span slot="description">My column description</span>
</calcite-table-header>

Priority impact

p2 - want for current milestone

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

N/A

[macandcheese]

We've planned to add additional content / actions slots to Table Header (https://github.com/Esri/calcite-design-system/issues/7630), to support additional functionality for users, but we are not planning on slots for the Title / Description (at this time). Do you have an example of the design you are trying to achieve?

[jfelicianiats]

@macandcheese My main goal currently is to append an icon to the table header to show sort direction of columns. I figured slots would be my best guess to implement this but there weren't any for headers. As for a proposed design, the current is fine I just need to be able to render html in the current places where the heading and description props currently go.

[macandcheese]

Thanks for the follow up. Are you managing the column sort yourself at this time? We do plan to build in sorting functionality which would have a built-in visual / affordance. As an interim solution, if you are managing the column sort yourself, you could render up / down arrows in the heading / description property strings with character codes ↑ etc.

[jfelicianiats]

@macandcheese I am currently using the calcite table in a nuxtjs (vue framework) application in conjunction with https://tanstack.com/table/latest to build my own datatable. The library I am using also has render functions that come along with it for the content of table headers and cell content. The example below shows how I render table cell content and how I would like to be able to render table header content. The inner div specifying the width is the approach similar to what you recommended in https://github.com/Esri/calcite-design-system/issues/7894#issuecomment-1983973600 but is a separate issue.

(ie. the <FlexRender> component.)

<!-- Table Headers - Currently no support for slotting content in (Ideally I could pass in the <FlexRender> component)-->
<calcite-table-header heading="Heading" description="Description"></calcite-table-header>

<!-- ... -->

<!-- Table Cells -->
 <calcite-table-cell
  v-for="cell in row.getVisibleCells()"
  :key="cell.id"
>
  <div
    class="truncate"
    :style="{
      width: cell.column.getSize()
        ? `${cell.column.getSize()}px`
        : '',
    }"
  >
    <FlexRender
      :render="cell.column.columnDef.cell"
      :props="cell.getContext()"
    />
  </div>
</calcite-table-cell>

[macandcheese]

Blocked by https://github.com/Esri/calcite-design-system/issues/6646