Table Cell

<sl-table-cell> | SlTableCell

Since 1.0

stable

A table cell.

Header 1	Header 2	Header 3
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3

<table style="border-collapse: collapse;">
  <thead>
    <tr>
      <th is-heading>Header 1</th>
      <th is-heading>Header 2</th>
      <th is-heading>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><sl-table-cell>Row 1, Cell 1</sl-table-cell></td>
      <td><sl-table-cell>Row 1, Cell 2</sl-table-cell></td>
      <td><sl-table-cell>Row 1, Cell 3</sl-table-cell></td>
    </tr>
    <tr>
      <td><sl-table-cell>Row 2, Cell 1</sl-table-cell></td>
      <td><sl-table-cell>Row 2, Cell 2</sl-table-cell></td>
      <td><sl-table-cell>Row 2, Cell 3</sl-table-cell></td>
    </tr>
  </tbody>
</table>

Examples

First Example

Second Example

TODO

[component-metadata:sl-table-cell]

Slots

Name	Description
(default)	The default slot for the table cell label.

Learn more about using slots.

Events

Name	React Event	Description	Event Detail
`select`		When the table cell is clicked.	-

Learn more about events.

Parts

Name	Description
`base`	The component’s base wrapper.

Learn more about customizing CSS parts.