Master Table Cell

<sl-master-table-cell> | SlMasterTableCell
Since 1.0 stable

Master table cell used for table components

 
<table>
  <tbody>
    <tr><sl-master-table-cell class="example" text="Text" description="Description"></sl-master-table-cell></tr>
  </tbody>
</table>

<style>
  .example {
    --border-width: 0 0 1px 0;
  }
</style>

Examples

Custom content font size

Use --font-size and --description-font-size to control font size of cell. Default --font-size is --hds-font-size-body-xl, default --description-font-size is --hds-font-size-body-sm. 

<table >
  <tbody>
    <tr><sl-master-table-cell class="first-example" text="Text" description="Description"></sl-master-table-cell></tr>
    <tr><sl-master-table-cell class="first-example" text="Text" description="Description"></sl-master-table-cell></tr>
  </tbody>
</table>

<style>
  .first-example:first-of-type {
    --font-size: 14px;
    --description-font-size: 12px;
    --border-width: 0 0 1px 0;
  }

   .first-example:last-of-type {
    --font-size: 18px;
    --description-font-size: 14px;
    --border-width: 0 0 1px 0;
  }
</style>

Alignment

Use alignment to control cell’s alignment. Default is left.

 
<table>
  <tbody>
    <tr><sl-master-table-cell class="second-example" text="Text" description="Description" alignment="right"></sl-master-table-cell></tr>
    <tr><sl-master-table-cell class="second-example" text="Text" description="Description"></sl-master-table-cell></tr>
  </tbody>
</table>

<style>
  .second-example:first-of-type {
    --font-size: 14px;
    --description-font-size: 12px;
    --border-width: 0 0 1px 0;
  }

  .second-example:last-of-type {
    --font-size: 18px;
    --description-font-size: 14px;
    --border-width: 0 0 1px 0;
  }
</style>

Border

Use --border-width to control border display.

Note: If we use all borders, it is better to do borders in table component, otherwise, we will have overlapping borders in the table. 

<table>
  <tbody>
    <tr><sl-master-table-cell class="third-example" text="Text" description="Description"></sl-master-table-cell></tr>
    <tr><sl-master-table-cell class="third-example" text="Text" description="Description"></sl-master-table-cell></tr>
  </tbody>
</table>

<style>
  .third-example:first-of-type {
    --border-width: 1px 1px 1px 1px;
  }

  .third-example:last-of-type {
    --border-width: 0px 1px 1px 1px;
  }
</style>

Padding

Use --cell-padding to control cell’s padding. Default value for padding-top and padding-bottom is --hds-space-2x. 

<table>
  <tbody>
    <tr>
      <sl-master-table-cell class="padding-example" text="Text" description="Description"></sl-master-table-cell>
    </tr>
    <tr>
      <sl-master-table-cell class="padding-example" text="Text" description="Description" alignment="right"></sl-master-table-cell>
    </tr>
  </tbody>
</table>

<style>
  .padding-example:first-of-type {
    --border-width: 1px 1px 1px 1px;
    --cell-padding: var(--hds-space-3x) 10px var(--hds-space-3x) 10px;
  }

    .padding-example:last-of-type {
    --border-width: 0px 1px 1px 1px;
    --cell-padding: var(--hds-space-5x) 12px var(--hds-space-5x) 12px;
  }
</style>

Prefix and Suffix

Use prefix and suffix slots to add prefix/suffix to master table cell.

 
<table>
  <tbody>
    <tr>
      <sl-master-table-cell class="prefix-suffix-example" text="Text" description="Description">
        <sl-icon name="fas-circle-info" slot="prefix"></sl-icon>
      </sl-master-table-cell>
    </tr>
    <tr>
      <sl-master-table-cell class="prefix-suffix-example" text="Text" description="Description" alignment="right">
        <sl-icon name="fas-circle-info" slot="suffix"></sl-icon>
      </sl-master-table-cell>
    </tr>
  </tbody>
</table>

<style>
  .prefix-suffix-example {
    --border-width: 1px 1px 1px 1px;
    --cell-padding: var(--hds-space-3x) 10px var(--hds-space-3x) 10px;
    margin-bottom: 10px;
  }
</style>

Description suffix

Use description-suffix slot to add suffix to cell’s description.

 
<table>
  <tbody>
    <tr>
      <sl-master-table-cell class="prefix-suffix-example" text="Text" description="Description">
        <sl-icon name="fas-circle-info" slot="description-suffix"></sl-icon>
      </sl-master-table-cell>
    </tr>
    <tr>
      <sl-master-table-cell class="prefix-suffix-example" text="Text" description="Description" alignment="right">
        <sl-icon name="fas-circle-info" slot="description-suffix"></sl-icon>
      </sl-master-table-cell>
    </tr>
  </tbody>
</table>

<style>
  .prefix-suffix-example {
    --border-width: 1px 1px 1px 1px;
    --cell-padding: var(--hds-space-3x) 10px var(--hds-space-3x) 10px;
    margin-bottom: 10px;
  }

  .prefix-suffix-example::part(description) {
    display: flex;
    align-items: center;
    gap: var(--hds-space-1x);
  }
</style>

Background

Use background to control background on/off. Default is off.

 
<table>
  <tbody>
    <tr>
      <sl-master-table-cell class="bg-example" text="Text" description="Description" background>
      </sl-master-table-cell>
    </tr>
  </tbody>
</table>

<style>
  .bg-example {
     --border-width: 1px 1px 1px 1px;
  }
</style>

Slots

Name Description
prefix The prefix is displayed prior to table cell content.
suffix The suffix is displayed after the table cell content.
description-suffix The suffix is displayed after the table cell description.

Learn more about using slots.

Properties

Name Description Reflects Type Default
size The size of the cell. 'compact' | 'default' 'default'
alignment The alignment of the cell’s content. 'left' | 'right' 'left'
text Cell’s content string ''
description Cell’s description content string ''
bold Display text in bold boolean false
subtle Display text in subtle style boolean false
selectable Display cell as selectable boolean false
background Whether the cell has a background color. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
select When a cell is selected. -

Learn more about events.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.