Master Table Cell
<sl-master-table-cell> | SlMasterTableCell
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>
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. |
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.