Tables - Launchpad

1. Basic table

#	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin

    <table class="lp-table">
        <thead><tr><th>#</th><th>Name</th><th>Email</th><th>Role</th></tr></thead>
        <tbody>
    <tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
    <tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
    <tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
    <tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
    <tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>
</tbody>
    </table>

2. Striped & hover

#	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin

    <table class="lp-table lp-table--striped lp-table--hover">
        <thead><tr><th>#</th><th>Name</th><th>Email</th><th>Role</th></tr></thead>
        <tbody>
    <tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
    <tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
    <tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
    <tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
    <tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>
</tbody>
    </table>

3. Bordered & borderless

Bordered

#	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin

Borderless

#	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin

    <p class="lp-fw-semibold lp-mb-2">Bordered</p>
    <table class="lp-table lp-table--bordered lp-mb-4">
        <thead><tr><th>#</th><th>Name</th><th>Email</th><th>Role</th></tr></thead>
        <tbody>
    <tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
    <tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
    <tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
    <tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
    <tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>
</tbody>
    </table>

    <p class="lp-fw-semibold lp-mb-2">Borderless</p>
    <table class="lp-table lp-table--borderless">
        <thead><tr><th>#</th><th>Name</th><th>Email</th><th>Role</th></tr></thead>
        <tbody>
    <tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
    <tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
    <tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
    <tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
    <tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>
</tbody>
    </table>

4. Size variants

Small (lp-table--sm)

#	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin

Default

#	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin

Large (lp-table--lg)

#	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin

    <p class="lp-fw-semibold lp-mb-2">Small (<code>lp-table--sm</code>)</p>
    <table class="lp-table lp-table--sm lp-table--bordered lp-mb-4">
        <thead><tr><th>#</th><th>Name</th><th>Email</th><th>Role</th></tr></thead>
        <tbody>
    <tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
    <tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
    <tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
    <tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
    <tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>
</tbody>
    </table>

    <p class="lp-fw-semibold lp-mb-2">Default</p>
    <table class="lp-table lp-table--bordered lp-mb-4">
        <thead><tr><th>#</th><th>Name</th><th>Email</th><th>Role</th></tr></thead>
        <tbody>
    <tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
    <tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
    <tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
    <tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
    <tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>
</tbody>
    </table>

    <p class="lp-fw-semibold lp-mb-2">Large (<code>lp-table--lg</code>)</p>
    <table class="lp-table lp-table--lg lp-table--bordered">
        <thead><tr><th>#</th><th>Name</th><th>Email</th><th>Role</th></tr></thead>
        <tbody>
    <tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
    <tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
    <tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
    <tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
    <tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>
</tbody>
    </table>

5. Header variants

Light header (lp-thead--light)

#	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin

Dark header (lp-thead--dark)

#	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin

    <p class="lp-fw-semibold lp-mb-2">Light header (<code>lp-thead--light</code>)</p>
    <table class="lp-table lp-table--bordered lp-mb-4">
        <thead class="lp-thead--light"><tr><th>#</th><th>Name</th><th>Email</th><th>Role</th></tr></thead>
        <tbody>
    <tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
    <tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
    <tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
    <tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
    <tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>
</tbody>
    </table>

    <p class="lp-fw-semibold lp-mb-2">Dark header (<code>lp-thead--dark</code>)</p>
    <table class="lp-table lp-table--bordered">
        <thead class="lp-thead--dark"><tr><th>#</th><th>Name</th><th>Email</th><th>Role</th></tr></thead>
        <tbody>
    <tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
    <tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
    <tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
    <tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
    <tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>
</tbody>
    </table>

6. Contextual row colors

#	Name	Email	Role
1	Primary	primary@example.com	Admin
2	Secondary	secondary@example.com	Editor
3	Success	success@example.com	Viewer
4	Danger	danger@example.com	Editor
5	Warning	warning@example.com	Admin
6	Info	info@example.com	Viewer
7	Active	active@example.com	Admin

<table class="lp-table lp-table--hover">
    <thead><tr><th>#</th><th>Name</th><th>Email</th><th>Role</th></tr></thead>
    <tbody>
        <tr class="lp-table-row--primary"><td>1</td><td>Primary</td><td>primary@example.com</td><td>Admin</td></tr>
        <tr class="lp-table-row--secondary"><td>2</td><td>Secondary</td><td>secondary@example.com</td><td>Editor</td></tr>
        <tr class="lp-table-row--success"><td>3</td><td>Success</td><td>success@example.com</td><td>Viewer</td></tr>
        <tr class="lp-table-row--danger"><td>4</td><td>Danger</td><td>danger@example.com</td><td>Editor</td></tr>
        <tr class="lp-table-row--warning"><td>5</td><td>Warning</td><td>warning@example.com</td><td>Admin</td></tr>
        <tr class="lp-table-row--info"><td>6</td><td>Info</td><td>info@example.com</td><td>Viewer</td></tr>
        <tr class="lp-table-row--active"><td>7</td><td>Active</td><td>active@example.com</td><td>Admin</td></tr>
    </tbody>
</table>

7. Responsive wrapper

A table with many columns overflows its container gracefully. Resize the window.

#	Name	Email	Phone	Department	Role	Location	Start Date	Manager	Status
1	Alice Johnson	alice@example.com	+1 555 0100	Engineering	Admin	New York	2022-03-14	Jane Doe	Active
2	Bob Smith	bob@example.com	+1 555 0101	Product	Editor	San Francisco	2021-08-02	John Lee	Active
3	Carol White	carol@example.com	+1 555 0102	Design	Viewer	London	2023-01-19	Jane Doe	Pending
4	David Brown	david@example.com	+1 555 0103	Engineering	Editor	Berlin	2020-11-05	John Lee	Inactive

<p class="lp-text-sm lp-text-muted lp-mb-2">A table with many columns overflows its container gracefully. Resize the window.</p>
<div class="lp-table-responsive">
    <table class="lp-table lp-table--bordered lp-table--nowrap">
        <thead><tr><th>#</th><th>Name</th><th>Email</th><th>Phone</th><th>Department</th><th>Role</th><th>Location</th><th>Start Date</th><th>Manager</th><th>Status</th></tr></thead>
        <tbody>
            <tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>+1 555 0100</td><td>Engineering</td><td>Admin</td><td>New York</td><td>2022-03-14</td><td>Jane Doe</td><td>Active</td></tr>
            <tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>+1 555 0101</td><td>Product</td><td>Editor</td><td>San Francisco</td><td>2021-08-02</td><td>John Lee</td><td>Active</td></tr>
            <tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>+1 555 0102</td><td>Design</td><td>Viewer</td><td>London</td><td>2023-01-19</td><td>Jane Doe</td><td>Pending</td></tr>
            <tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>+1 555 0103</td><td>Engineering</td><td>Editor</td><td>Berlin</td><td>2020-11-05</td><td>John Lee</td><td>Inactive</td></tr>
        </tbody>
    </table>
</div>

8. Sortable columns

Click any header to sort. Click again to reverse direction.

#	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin

    <p class="lp-text-sm lp-text-muted lp-mb-2">Click any header to sort. Click again to reverse direction.</p>
    <table class="lp-table lp-table--hover lp-table--bordered" data-lp-component="table">
        <thead>
            <tr>
                <th class="lp-table-sortable">#</th>
                <th class="lp-table-sortable">Name</th>
                <th class="lp-table-sortable">Email</th>
                <th class="lp-table-sortable">Role</th>
            </tr>
        </thead>
        <tbody>
    <tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
    <tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
    <tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
    <tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
    <tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>
</tbody>
    </table>

9. Selectable rows (checkboxes)

Header checkbox toggles all rows. Per-row checkboxes toggle single selections. Listen for the selection-change event.

0 rows selected

Name	Email	Role
Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	Editor
Carol White	carol@example.com	Viewer
David Brown	david@example.com	Editor

<p class="lp-text-sm lp-text-muted lp-mb-2">Header checkbox toggles all rows. Per-row checkboxes toggle single selections. Listen for the <code>selection-change</code> event.</p>
<p class="lp-table-selection-info" id="tbl-sel-info">0 rows selected</p>
<table class="lp-table lp-table--hover lp-table--bordered" data-lp-component="table" data-lp-selectable="true" id="tbl-selectable">
    <thead>
        <tr>
            <th class="lp-table-check"><input type="checkbox" aria-label="Select all"></th>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
        </tr>
    </thead>
    <tbody>
        <tr><td class="lp-table-check"><input type="checkbox"></td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
        <tr><td class="lp-table-check"><input type="checkbox"></td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
        <tr><td class="lp-table-check"><input type="checkbox"></td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
        <tr><td class="lp-table-check"><input type="checkbox"></td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
    </tbody>
</table>
<script>
document.getElementById("tbl-selectable").addEventListener("lp:table:selection-change", function (e) {
    const n = e.detail.selected.length;
    document.getElementById("tbl-sel-info").textContent = n + " row" + (n === 1 ? "" : "s") + " selected";
});
</script>

10. Toolbar & footer

#	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin

    <div class="lp-table-toolbar">
        <div class="lp-table-title">Team Members</div>
        <div class="lp-table-actions">
            <button type="button" class="lp-btn lp-btn-sm lp-btn-secondary">Export</button>
            <button type="button" class="lp-btn lp-btn-sm lp-btn-primary">Add member</button>
        </div>
    </div>
    <table class="lp-table lp-table--hover lp-table--bordered" style="border-radius:0;">
        <thead><tr><th>#</th><th>Name</th><th>Email</th><th>Role</th></tr></thead>
        <tbody>
    <tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
    <tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
    <tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
    <tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
    <tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>
</tbody>
    </table>
    <div class="lp-table-footer">
        <span class="lp-table-selection-info">Showing 5 of 42 members</span>
        <div class="lp-table-actions">
            <button type="button" class="lp-btn lp-btn-sm lp-btn-secondary">Prev</button>
            <button type="button" class="lp-btn lp-btn-sm lp-btn-secondary">Next</button>
        </div>
    </div>

11. Sticky header

Scroll inside the box — the header row stays pinned.

#	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin

<p class="lp-text-sm lp-text-muted lp-mb-2">Scroll inside the box — the header row stays pinned.</p>
<div style="max-height: 240px; overflow-y: auto; border: 1px solid var(--lp-border); border-radius: var(--lp-radius-md);">
    <table class="lp-table lp-table--sticky lp-table--hover">
        <thead><tr><th>#</th><th>Name</th><th>Email</th><th>Role</th></tr></thead>
        <tbody>
            
<tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
<tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
<tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
<tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
<tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>

<tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
<tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
<tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
<tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
<tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>

<tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
<tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
<tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
<tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
<tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>

<tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
<tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
<tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
<tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
<tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>

        </tbody>
    </table>
</div>

12. Empty & loading states

Empty state

#	Name	Email	Role
No records found. Try adjusting your filters.

Loading state (lp-table--loading)

#	Name	Email	Role
1	Alice Johnson	alice@example.com	Admin
2	Bob Smith	bob@example.com	Editor
3	Carol White	carol@example.com	Viewer
4	David Brown	david@example.com	Editor
5	Eve Davis	eve@example.com	Admin

    <p class="lp-fw-semibold lp-mb-2">Empty state</p>
    <table class="lp-table lp-table--bordered lp-mb-4">
        <thead><tr><th>#</th><th>Name</th><th>Email</th><th>Role</th></tr></thead>
        <tbody>
            <tr><td class="lp-table-empty" colspan="4">No records found. Try adjusting your filters.</td></tr>
        </tbody>
    </table>

    <p class="lp-fw-semibold lp-mb-2">Loading state (<code>lp-table--loading</code>)</p>
    <table class="lp-table lp-table--loading lp-table--bordered">
        <thead><tr><th>#</th><th>Name</th><th>Email</th><th>Role</th></tr></thead>
        <tbody>
    <tr><td>1</td><td>Alice Johnson</td><td>alice@example.com</td><td>Admin</td></tr>
    <tr><td>2</td><td>Bob Smith</td><td>bob@example.com</td><td>Editor</td></tr>
    <tr><td>3</td><td>Carol White</td><td>carol@example.com</td><td>Viewer</td></tr>
    <tr><td>4</td><td>David Brown</td><td>david@example.com</td><td>Editor</td></tr>
    <tr><td>5</td><td>Eve Davis</td><td>eve@example.com</td><td>Admin</td></tr>
</tbody>
    </table>

CSS class reference

Class	Purpose
`.lp-table`	Base table
`.lp-table--hover`	Highlight rows on hover
`.lp-table--striped`	Zebra-stripe rows
`.lp-table--striped-columns`	Stripe columns instead of rows
`.lp-table--bordered`	Full border grid
`.lp-table--borderless`	Remove all borders
`.lp-table--sm / --compact`	Reduced padding
`.lp-table--lg`	Increased padding
`.lp-table--align-{top\|middle\|bottom}`	Cell vertical alignment
`.lp-table--nowrap`	Prevent cell content wrapping
`.lp-table--caption-top`	Move caption to the top
`.lp-table--sticky`	Pin header row (inside scroll container)
`.lp-table--loading`	Dim + stripe overlay
`.lp-thead--light / --dark`	Header background variants
`.lp-table-sortable`	Sortable column header (toggles `--asc/--desc`)
`.lp-table-check`	Narrow first column for checkboxes
`.lp-table-row--{primary\|secondary\|success\|danger\|warning\|info}`	Contextual row background
`.lp-table-row--selected / --active`	Row states
`.lp-table-cell--{success\|danger\|warning\|info}`	Contextual cell text color
`.lp-table-responsive`	Horizontal scroll wrapper
`.lp-table-toolbar / -title / -actions / -selection-info`	Toolbar chrome above the table
`.lp-table-footer`	Footer chrome below the table
`.lp-table-empty`	Empty-state row cell

Events

All events are CustomEvents dispatched on the <table> element. They bubble.

Event	Fires when	`event.detail`
`lp:table:sort`	A sortable header was clicked and rows reordered	`{ column, direction }`
`lp:table:selection-change`	Row selection changed (via checkbox or API)	`{ selected, all }`

Programmatic API (selectable tables): instance.getSelection(), selectAll(), clearSelection().