• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Testing
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
      • Failed to execute removeChild on Node
    • FAQ
    • Contributing
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
      • Option Group
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Properties
  2. Events
  3. Shadow Parts
  4. Dependencies
    1. Depends on
    2. Graph
Components Table Table Header
(external link)

ld-table-header #

The ld-table-header component is a subcomponent for ld-table.

Please refer to the ld-table documentation for usage examples.


Properties #

Property Attribute Description Type Default
abbr abbr This attribute contains a short abbreviated description of the cell's content. Some user-agents, such as speech readers, may present this description before the content itself. string undefined
colspan colspan Indicates for how many columns the cell extends. number undefined
headers headers This attribute contains a list of space-separated strings, each corresponding to the id attribute of the elements that apply to this element. string undefined
key key for tracking the node's identity when working with lists string | number undefined
ref ref reference to component any undefined
rowspan rowspan Indicates for how many rows the cell extends. number undefined
scope scope Defines the cells that the header element relates to. string undefined
sortAscLabel sort-asc-label The aria label used for sort ascending buttons. string 'Sort ascending'
sortDescLabel sort-desc-label The aria label used for sort descending buttons. string 'Sort descending'
sortOrder sort-order Defines whether the column is sorted and in which order. "asc" | "desc" undefined
sortable sortable Defines whether the column is sortable. boolean false

Events #

Event Description Type
ldTableSort Emitted with culumn index and sort order. CustomEvent<{ columnIndex: number; sortOrder: "desc" | "asc"; }>

Shadow Parts #

Part Description
"cell" the actual th element
"sort-button-asc" ascending sort button
"sort-button-desc" descending sort button
"sort-buttons" container wrapping the sort buttons

Dependencies #

Depends on #

  • ld-icon
  • ld-button

Graph #

graph TD;
  ld-table-header --> ld-icon
  ld-table-header --> ld-button
  style ld-table-header fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS