Material Design 3-styled data list web components (lit-material-data-list, lit-material-data-list-item, lit-material-data-list-cell) — flexible multi-cell rows, optionally expandable.
1.5 KB gzipped
@lit-material/data-list 0.1.0
Renders on the server
Example
Data List
A list of flexible, multi-cell rows, optionally expandable.
invoice-2024-01.pdf2.1 MB
invoice-2024-02.pdf1.8 MBUploaded by Jane Doe on Feb 3.
invoice-2024-03.pdf950 KB
Markup
<lit-material-data-list>
<lit-material-data-list-item>
<lit-material-data-list-cell fill>invoice-2024-01.pdf</lit-material-data-list-cell>
<lit-material-data-list-cell>2.1 MB</lit-material-data-list-cell>
</lit-material-data-list-item>
<lit-material-data-list-item expandable>
<lit-material-data-list-cell fill>invoice-2024-02.pdf</lit-material-data-list-cell>
<lit-material-data-list-cell>1.8 MB</lit-material-data-list-cell>
<span slot="expanded-content">Uploaded by Jane Doe on Feb 3.</span>
</lit-material-data-list-item>
<lit-material-data-list-item selected>
<lit-material-data-list-cell fill>invoice-2024-03.pdf</lit-material-data-list-cell>
<lit-material-data-list-cell>950 KB</lit-material-data-list-cell>
</lit-material-data-list-item>
</lit-material-data-list>
Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-data-list-cell>
One cell within a lit-material-data-list-item row — a flex item.
fill grows to take up remaining row width (typically the row's main
content cell); cells without it size to their own content (typically an
icon or an actions cell).
Properties
Property
Attribute
Type
Default
Description
fill
fill
boolean
false
Slots
Slot
Description
default
The cell's content.
<lit-material-data-list-item>
One row within lit-material-data-list. The default slot holds this
row's lit-material-data-list-cell elements (or any content — cells are
a convenience, not a requirement), laid out as a flex row.
Properties
Property
Attribute
Type
Default
Description
selected
selected
boolean
false
expandable
expandable
boolean
false
open
open
boolean
false
Whether an expandable row's extra content is showing. Ignored otherwise.
Events
Event
Description
toggle
When expandable, fires after open changes via user interaction.
Slots
Slot
Description
default
The row's content — typically lit-material-data-list-cell elements.
expanded-content
Extra content revealed when expandable and open.
CSS parts
Part
Description
row
The row (or, when expandable, the <details> itself).
summary
The <summary>. Only rendered when expandable.
expanded
The expanded-content container. Only rendered when expandable.
<lit-material-data-list>
Groups lit-material-data-list-item rows into a native <ul> — a list
of flexible, multi-cell rows, each independently sized via
lit-material-data-list-cell's fill, optionally expandable. Distinct
from lit-material-data-table, whose rows all share the same fixed
columns: a data list's rows can each lay out their own cells differently,
and any individual row can expand to reveal extra content without
needing a whole extra table column for it.