@lit-material/data-table 0.0.1 → 0.0.2

package/README.md

@@ -63,12 +63,18 @@ column alignment.
 
 ### `lit-material-data-table`
 
-| Property        | Attribute         | Type                                    | Default        |
+| Property        | Attribute          | Type                                     | Default       |
 | ---------------- | ------------------ | ----------------------------------------- | -------------- |
-| `sortKey`        | `sort-key`          | `string \| undefined`                     | `undefined`     |
-| `sortDirection`  | `sort-direction`    | `"none" \| "ascending" \| "descending"`   | `"ascending"`   |
+| `sortKey`        | `sort-key`          | `string \| undefined`                     | `undefined`    |
+| `sortDirection`  | `sort-direction`    | `"none" \| "ascending" \| "descending"`   | `"ascending"`  |
+| `items`          | —                   | `readonly unknown[]`                      | `[]`           |
+| `rowRenderer`    | —                   | `(item, index) => unknown` \| `undefined` | `undefined`    |
+| `rowKey`         | —                   | `(item, index) => string \| number` \| `undefined` | `undefined` |
+| `rowHeight`      | `row-height`        | `number`                                  | `44`           |
+| `viewportHeight` | `viewport-height`   | `number`                                  | `400`          |
+| `overscan`       | `overscan`          | `number`                                  | `4`            |
 
-Slot: default (`lit-material-data-table-row` elements).
+Slot: default (`lit-material-data-table-row` elements — in virtualized mode, the header row only).
 
 This component owns UI *state* (which column is sorted which way, which rows are checked) and
 *notifies* you of it via events — it never reorders rows or owns your data. Activating a sortable
@@ -89,16 +95,51 @@ values.
 Fires `sort-change` (`detail: { sortKey, sortDirection }`) and `selection-change`
 (`detail: { selected: string[] }`).
 
+#### Row virtualization
+
+Set `.items` (your full dataset) and `.rowRenderer` (a function returning one body row per item)
+to switch on fixed-height virtualization — only the rows within (or near) the visible scroll window
+are ever mounted, however large `items` is:
+
+```ts
+table.items = people; // e.g. 50,000 rows
+table.rowRenderer = (person, index) => html`
+  <lit-material-data-table-row flex data-row-id=${person.id}>
+    <lit-material-data-table-cell flex width="200px">${person.name}</lit-material-data-table-cell>
+    <lit-material-data-table-cell flex width="80px" numeric>${person.age}</lit-material-data-table-cell>
+  </lit-material-data-table-row>
+`;
+```
+
+This is the one thing here that isn't purely headless — true virtualization requires knowing the
+full item count up front, which "you slot real rows" (the table's normal mode) can't provide.
+Notes:
+
+- **Slot only the header row.** Body rows come from `rowRenderer`; anything else slotted alongside
+  it is ignored by the virtualized viewport (though still slotted, so don't put extra body rows
+  there).
+- **Both the header row and every `rowRenderer` row need `flex`** (see
+  `lit-material-data-table-row`'s own docs) — virtualized rows are positioned with `transform`,
+  which the table's normal `display: table` column-alignment trick can't do, so virtualized mode
+  uses explicit flexbox widths (`lit-material-data-table-cell`'s `width` property) instead. Keep
+  the header's cell widths and the body rows' cell widths in sync yourself.
+- **Row height is fixed** — set `row-height` to whatever your actual row content needs; there's no
+  per-row measurement.
+- Sorting and row-selection delegation both keep working on virtualized rows exactly as they do on
+  slotted ones.
+
 ### `lit-material-data-table-row`
 
 | Property   | Attribute  | Type      | Default |
 | ---------- | ---------- | --------- | ------- |
 | `header`   | `header`   | `boolean` | `false` |
 | `selected` | `selected` | `boolean` | `false` |
+| `flex`     | `flex`     | `boolean` | `false` |
 
 Slot: default (`lit-material-data-table-cell` elements). Set `header` on the row made up of
 header cells (typically the first). `selected` is normally managed by the parent table from a
-`data-row-select` checkbox's checked state, not set directly.
+`data-row-select` checkbox's checked state, not set directly. Set `flex` to switch the row from
+`display: table-row` to `display: flex` — only needed for virtualized rows (see above).
 
 ### `lit-material-data-table-cell`
 
@@ -108,6 +149,10 @@ header cells (typically the first). `selected` is normally managed by the parent
 | `numeric`        | `numeric`           | `boolean`                                  | `false` |
 | `sortKey`        | `sort-key`          | `string \| undefined`                     | `undefined` |
 | `sortDirection`  | `sort-direction`    | `"none" \| "ascending" \| "descending"`   | `"none"` |
+| `resizable`      | `resizable`         | `boolean`                                  | `false` |
+| `minWidth`       | `min-width`         | `number`                                   | `60`    |
+| `flex`           | `flex`              | `boolean`                                  | `false` |
+| `width`          | `width`             | `string \| undefined`                     | `undefined` |
 
 Slot: default (the cell's content). `numeric` right-aligns content (and applies tabular figures)
 — use it for numeric columns per the MD3 spec. Set `sort-key` on a `header` cell to make it
@@ -115,6 +160,14 @@ sortable: that wraps its content in a real `<button>` (the ARIA APG pattern for
 headers is an interactive element *inside* the columnheader cell, not the cell itself carrying the
 interaction). `sortDirection` is kept in sync by the parent table, not set directly.
 
+Set `resizable` on a `header` cell to add a drag handle at its trailing edge; dragging it fires
+`column-resize` (`detail: { width }`, pixels) on the cell, which `lit-material-data-table` listens
+for and applies to every cell in that column (not just the header one — see the table's own docs
+for why). `min-width` floors how narrow a drag can make it. `flex`/`width` are for virtualized mode
+— see the table's docs above.
+
+Fires `column-resize` (`detail: { width: number }`) while dragging a `resizable` cell's handle.
+
 ## Accessibility
 
 Built entirely on ARIA `table`/`row`/`columnheader`/`cell` roles (set automatically — the
@@ -122,11 +175,36 @@ underlying elements aren't real `<table>`/`<tr>`/`<th>`/`<td>`, see above for wh
 requiring you to wire them up. Row-select and select-all checkboxes need their own `aria-label` (a
 bare checkbox has no accessible name of its own) — see the usage example above.
 
+## Pagination
+
+`lit-material-data-table-pagination` is a standalone footer control, not something the table
+renders itself — pagination is exactly as data-shaped a concern as sorting/selection, and the
+table never owns your data (see above). Feed it a total row count and it works out page count,
+range, and button disabled-state itself:
+
+```html
+<lit-material-data-table-pagination id="pager" total="97" page-size="10"></lit-material-data-table-pagination>
+<script type="module">
+  document.querySelector("#pager").addEventListener("page-change", (e) => {
+    console.log(e.detail); // { page, pageSize } — re-slice or re-fetch your rows in response
+  });
+</script>
+```
+
+| Property          | Attribute    | Type                  | Default        |
+| ------------------ | ------------ | ----------------------- | -------------- |
+| `page`             | `page`       | `number`                | `0` (0-based)  |
+| `pageSize`         | `page-size`  | `number`                | `10`           |
+| `total`            | `total`      | `number`                | `0`            |
+| `pageSizeOptions`  | —            | `readonly number[]`     | `[10, 25, 50]` |
+
+Fires `page-change` (`detail: { page, pageSize }`) when a nav button is clicked or the page-size
+select changes (which also resets `page` back to `0`).
+
 ## Scope
 
-Deliberately out of scope for this first pass: pagination, column resizing, column reordering, row
-virtualization for very large datasets, and multi-column sort. All reasonable follow-ups, not
-silently missing pieces.
+Deliberately out of scope: column reordering and multi-column sort. Both reasonable follow-ups,
+not silently missing pieces.
 
 ## License
 

package/dist/data-table-cell-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-cell-styles.d.ts","sourceRoot":"","sources":["../src/data-table-cell-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAsElB,CAAC"}
+{"version":3,"file":"data-table-cell-styles.d.ts","sourceRoot":"","sources":["../src/data-table-cell-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAoHlB,CAAC"}

package/dist/data-table-cell-styles.js

@@ -2,6 +2,7 @@ import { css } from "lit";
 export const styles = css `
   :host {
     display: table-cell;
+    position: relative;
     box-sizing: border-box;
     padding: 12px 16px;
     vertical-align: middle;
@@ -16,6 +17,12 @@ export const styles = css `
     font-variant-numeric: tabular-nums;
   }
 
+  :host([flex]) {
+    display: block;
+    flex: 0 0 auto;
+    min-width: 0;
+  }
+
   :host([header]) {
     color: var(--md-sys-color-on-surface-variant, #49454f);
     font-family: var(--md-sys-typescale-label-large-font, Roboto, system-ui, sans-serif);
@@ -28,6 +35,11 @@ export const styles = css `
     display: inline-flex;
     align-items: center;
     gap: 4px;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
   }
 
   :host([numeric]) .content {
@@ -69,5 +81,39 @@ export const styles = css `
   :host([sort-direction="descending"]) .sort-icon {
     opacity: 1;
   }
+
+  .resize-handle {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    inset-inline-end: -4px;
+    width: 8px;
+    cursor: col-resize;
+    touch-action: none;
+    z-index: 1;
+  }
+
+  .resize-handle::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    inset-inline-start: 3px;
+    width: 2px;
+    background-color: var(--md-sys-color-outline-variant, #cac4d0);
+    opacity: 0;
+    transition: opacity 100ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  .resize-handle:hover::after {
+    opacity: 1;
+    background-color: var(--md-sys-color-primary, #6750a4);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .resize-handle::after {
+      transition: none;
+    }
+  }
 `;
 //# sourceMappingURL=data-table-cell-styles.js.map

package/dist/data-table-cell-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-cell-styles.js","sourceRoot":"","sources":["../src/data-table-cell-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsExB,CAAC"}
+{"version":3,"file":"data-table-cell-styles.js","sourceRoot":"","sources":["../src/data-table-cell-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoHxB,CAAC"}

package/dist/data-table-cell.d.ts

@@ -12,6 +12,14 @@ export type SortDirection = "none" | "ascending" | "descending";
  * table on click; `sort-direction` is then kept in sync by the table, not
  * set directly.
  *
+ * Set `resizable` on a header cell to add a drag handle at its trailing
+ * edge. Dragging it dispatches a bubbling, composed `column-resize` event
+ * (`detail: { width }`, in pixels) — the cell only reports the drag, it
+ * never resizes itself or its column-mates; `lit-material-data-table`
+ * listens for that event and applies the resulting width to every cell in
+ * the same column (see its own class docs for why that has to happen
+ * one level up).
+ *
  * `:host` uses `display: table-cell` (not a real `<td>`) so cells still
  * align into columns via the browser's native table layout algorithm
  * without needing an actual `<table>` element — see `lit-material-data-table`
@@ -26,6 +34,9 @@ export type SortDirection = "none" | "ascending" | "descending";
  *
  * @csspart sort-button - The button wrapping content, for sortable header cells.
  * @csspart sort-icon - The ascending/descending indicator.
+ * @csspart resize-handle - The drag handle for a `resizable` header cell.
+ *
+ * @fires column-resize - `detail: { width }` (pixels), while dragging a `resizable` cell's handle.
  */
 export declare class LitMaterialDataTableCell extends LitElement {
     static styles: import("lit").CSSResult;
@@ -34,10 +45,24 @@ export declare class LitMaterialDataTableCell extends LitElement {
     sortKey?: string;
     /** Kept in sync by the parent table — see the class docs. Not meant to be set directly. */
     sortDirection: SortDirection;
+    /** Adds a drag handle at the trailing edge. Only meaningful on a `header` cell. */
+    resizable: boolean;
+    /** Floor for the width this cell's handle will report while dragging. */
+    minWidth: number;
+    /** Lays the cell out with flexbox instead of `display: table-cell` — see `lit-material-data-table-row`. */
+    flex: boolean;
+    /** This cell's width in `flex` mode (any CSS `flex-basis` value, e.g. `"96px"`). Ignored otherwise. */
+    width?: string;
+    private resizeStartX;
+    private resizeStartWidth;
     protected willUpdate(changed: Map<string, unknown>): void;
     private get isSortable();
     render(): import("lit").TemplateResult<1>;
     private readonly handleSortClick;
+    private readonly handleResizePointerDown;
+    private readonly handleResizePointerMove;
+    private readonly handleResizePointerUp;
+    private dispatchResize;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/data-table-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-cell.d.ts","sourceRoot":"","sources":["../src/data-table-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,WAAW,GAAG,YAAY,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IACtD,OAAgB,MAAM,0BAAU;IAEY,MAAM,UAAS;IACf,OAAO,UAAS;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACtD,2FAA2F;IACjC,aAAa,EAAE,aAAa,CAAU;cAE7E,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMlE,OAAO,KAAK,UAAU,GAErB;IAEQ,MAAM;IAaf,OAAO,CAAC,QAAQ,CAAC,eAAe,CAQ9B;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,wBAAwB,CAAC;KAC1D;CACF"}
+{"version":3,"file":"data-table-cell.d.ts","sourceRoot":"","sources":["../src/data-table-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,WAAW,GAAG,YAAY,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IACtD,OAAgB,MAAM,0BAAU;IAEY,MAAM,UAAS;IACf,OAAO,UAAS;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACtD,2FAA2F;IACjC,aAAa,EAAE,aAAa,CAAU;IAChG,mFAAmF;IACvC,SAAS,UAAS;IAC9D,yEAAyE;IACrB,QAAQ,SAAM;IAClE,2GAA2G;IAC/D,IAAI,UAAS;IACzD,uGAAuG;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;IAE3B,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,gBAAgB,CAAK;cAEV,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAWlE,OAAO,KAAK,UAAU,GAErB;IAEQ,MAAM;IAqBf,OAAO,CAAC,QAAQ,CAAC,eAAe,CAQ9B;IAEF,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAgBtC;IAEF,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAEtC;IAEF,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAMpC;IAEF,OAAO,CAAC,cAAc;CAQvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,wBAAwB,CAAC;KAC1D;CACF"}

package/dist/data-table-cell.js

@@ -19,6 +19,14 @@ import { styles } from "./data-table-cell-styles.js";
  * table on click; `sort-direction` is then kept in sync by the table, not
  * set directly.
  *
+ * Set `resizable` on a header cell to add a drag handle at its trailing
+ * edge. Dragging it dispatches a bubbling, composed `column-resize` event
+ * (`detail: { width }`, in pixels) — the cell only reports the drag, it
+ * never resizes itself or its column-mates; `lit-material-data-table`
+ * listens for that event and applies the resulting width to every cell in
+ * the same column (see its own class docs for why that has to happen
+ * one level up).
+ *
  * `:host` uses `display: table-cell` (not a real `<td>`) so cells still
  * align into columns via the browser's native table layout algorithm
  * without needing an actual `<table>` element — see `lit-material-data-table`
@@ -33,6 +41,9 @@ import { styles } from "./data-table-cell-styles.js";
  *
  * @csspart sort-button - The button wrapping content, for sortable header cells.
  * @csspart sort-icon - The ascending/descending indicator.
+ * @csspart resize-handle - The drag handle for a `resizable` header cell.
+ *
+ * @fires column-resize - `detail: { width }` (pixels), while dragging a `resizable` cell's handle.
  */
 let LitMaterialDataTableCell = class LitMaterialDataTableCell extends LitElement {
     constructor() {
@@ -41,6 +52,14 @@ let LitMaterialDataTableCell = class LitMaterialDataTableCell extends LitElement
         this.numeric = false;
         /** Kept in sync by the parent table — see the class docs. Not meant to be set directly. */
         this.sortDirection = "none";
+        /** Adds a drag handle at the trailing edge. Only meaningful on a `header` cell. */
+        this.resizable = false;
+        /** Floor for the width this cell's handle will report while dragging. */
+        this.minWidth = 60;
+        /** Lays the cell out with flexbox instead of `display: table-cell` — see `lit-material-data-table-row`. */
+        this.flex = false;
+        this.resizeStartX = 0;
+        this.resizeStartWidth = 0;
         this.handleSortClick = () => {
             this.dispatchEvent(new CustomEvent("sort-request", {
                 bubbles: true,
@@ -48,17 +67,57 @@ let LitMaterialDataTableCell = class LitMaterialDataTableCell extends LitElement
                 detail: { sortKey: this.sortKey },
             }));
         };
+        this.handleResizePointerDown = (event) => {
+            event.preventDefault();
+            const handle = event.currentTarget;
+            // Pointer capture keeps drag events flowing to the handle even once the cursor leaves its
+            // small hit area mid-drag; synthetic pointer events (as in tests) don't register as an
+            // "active" pointer the platform will accept, so degrade to plain bubbling instead of throwing.
+            try {
+                handle.setPointerCapture(event.pointerId);
+            }
+            catch {
+                // no-op — see comment above.
+            }
+            this.resizeStartX = event.clientX;
+            this.resizeStartWidth = this.getBoundingClientRect().width;
+            handle.addEventListener("pointermove", this.handleResizePointerMove);
+            handle.addEventListener("pointerup", this.handleResizePointerUp);
+            handle.addEventListener("pointercancel", this.handleResizePointerUp);
+        };
+        this.handleResizePointerMove = (event) => {
+            this.dispatchResize(event.clientX);
+        };
+        this.handleResizePointerUp = (event) => {
+            this.dispatchResize(event.clientX);
+            const handle = event.currentTarget;
+            handle.removeEventListener("pointermove", this.handleResizePointerMove);
+            handle.removeEventListener("pointerup", this.handleResizePointerUp);
+            handle.removeEventListener("pointercancel", this.handleResizePointerUp);
+        };
     }
     static { this.styles = styles; }
     willUpdate(changed) {
         if (changed.has("header")) {
             this.setAttribute("role", this.header ? "columnheader" : "cell");
         }
+        // @lit-labs/ssr's light-DOM shim doesn't implement `style` on the host — skip rather than
+        // throw, there's no layout to compute server-side anyway.
+        if ((changed.has("flex") || changed.has("width")) && this.style) {
+            this.style.flex = this.flex ? `0 0 ${this.width ?? "auto"}` : "";
+        }
     }
     get isSortable() {
         return this.header && !!this.sortKey;
     }
     render() {
+        const handle = this.resizable
+            ? html `<span
+          class="resize-handle"
+          part="resize-handle"
+          @pointerdown=${this.handleResizePointerDown}
+        ></span>`
+            : "";
         if (this.isSortable) {
             const icon = this.sortDirection === "descending" ? "▼" : "▲";
             return html `
@@ -66,9 +125,16 @@ let LitMaterialDataTableCell = class LitMaterialDataTableCell extends LitElement
           <span class="content"><slot></slot></span>
           <span class="sort-icon" part="sort-icon" aria-hidden="true">${icon}</span>
         </button>
+        ${handle}
       `;
         }
-        return html `<span class="content"><slot></slot></span>`;
+        return html `<span class="content"><slot></slot></span>${handle}`;
+    }
+    dispatchResize(clientX) {
+        const isRtl = getComputedStyle(this).direction === "rtl";
+        const delta = isRtl ? this.resizeStartX - clientX : clientX - this.resizeStartX;
+        const width = Math.max(this.minWidth, Math.round(this.resizeStartWidth + delta));
+        this.dispatchEvent(new CustomEvent("column-resize", { bubbles: true, composed: true, detail: { width } }));
     }
 };
 __decorate([
@@ -83,6 +149,18 @@ __decorate([
 __decorate([
     property({ attribute: "sort-direction", reflect: true })
 ], LitMaterialDataTableCell.prototype, "sortDirection", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialDataTableCell.prototype, "resizable", void 0);
+__decorate([
+    property({ attribute: "min-width", type: Number })
+], LitMaterialDataTableCell.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialDataTableCell.prototype, "flex", void 0);
+__decorate([
+    property()
+], LitMaterialDataTableCell.prototype, "width", void 0);
 LitMaterialDataTableCell = __decorate([
     customElement("lit-material-data-table-cell")
 ], LitMaterialDataTableCell);

package/dist/data-table-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-cell.js","sourceRoot":"","sources":["../src/data-table-cell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAAjD;;QAGuC,WAAM,GAAG,KAAK,CAAC;QACf,YAAO,GAAG,KAAK,CAAC;QAE5D,2FAA2F;QACjC,kBAAa,GAAkB,MAAM,CAAC;QAyB/E,oBAAe,GAAG,GAAS,EAAE;YAC5C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;aAClC,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;aAxCiB,WAAM,GAAG,MAAM,AAAT,CAAU;IAQb,UAAU,CAAC,OAA6B;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QACnE,CAAC;IACH,CAAC;IAED,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;IACvC,CAAC;IAEQ,MAAM;QACb,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;YAC7D,OAAO,IAAI,CAAA;8EAC6D,IAAI,CAAC,eAAe;;wEAE1B,IAAI;;OAErE,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAA,4CAA4C,CAAC;IAC1D,CAAC;;AA3B2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDAAgB;AACf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAAiB;AACvB;IAApC,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;yDAAkB;AAEI;IAAzD,QAAQ,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+DAAuC;AAPrF,wBAAwB;IADpC,aAAa,CAAC,8BAA8B,CAAC;GACjC,wBAAwB,CAyCpC"}
+{"version":3,"file":"data-table-cell.js","sourceRoot":"","sources":["../src/data-table-cell.ts"],"names":[],"mappings":"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"}

package/dist/data-table-pagination-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=data-table-pagination-styles.d.ts.map

package/dist/data-table-pagination-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination-styles.d.ts","sourceRoot":"","sources":["../src/data-table-pagination-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgFlB,CAAC"}

package/dist/data-table-pagination-styles.js

@@ -0,0 +1,83 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 24px;
+    box-sizing: border-box;
+    padding: 0 16px;
+    min-height: 52px;
+    color: var(--md-sys-color-on-surface-variant, #49454f);
+    font-family: var(--md-sys-typescale-body-medium-font, Roboto, system-ui, sans-serif);
+    font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
+  }
+
+  .page-size {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .page-size select {
+    box-sizing: border-box;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    padding: 4px 24px 4px 4px;
+    cursor: pointer;
+  }
+
+  .range {
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .controls {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--md-sys-color-on-surface-variant, #49454f);
+    cursor: pointer;
+    font-size: 1.1rem;
+    -webkit-appearance: none;
+    appearance: none;
+    transition: background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  button:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 8%, transparent);
+  }
+
+  button:focus-visible {
+    outline: 2px solid var(--md-sys-color-secondary, #625b71);
+    outline-offset: 2px;
+  }
+
+  button:disabled {
+    color: var(--md-sys-color-on-surface, #1c1b1f);
+    opacity: 0.38;
+    cursor: default;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    button {
+      transition: none;
+    }
+  }
+`;
+//# sourceMappingURL=data-table-pagination-styles.js.map

package/dist/data-table-pagination-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination-styles.js","sourceRoot":"","sources":["../src/data-table-pagination-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFxB,CAAC"}

package/dist/data-table-pagination.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from "lit";
+/**
+ * A pagination footer for `lit-material-data-table` — a standalone,
+ * headless control rather than something the table renders itself, since
+ * the table never owns your data (see its own class docs) and paging is
+ * exactly as data-shaped a concern as sorting/selection. Place one below a
+ * table, feed it `total`/`page`/`page-size`, and re-render (or re-fetch) the
+ * table's rows in response to `page-change` — this component never touches
+ * the table directly.
+ *
+ * @element lit-material-data-table-pagination
+ *
+ * @fires page-change - `detail: { page, pageSize }`, when a nav button is activated or the page-size
+ *   select changes (which also resets `page` to `0`).
+ */
+export declare class LitMaterialDataTablePagination extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** 0-based current page index. */
+    page: number;
+    pageSize: number;
+    /** Total row count across every page — this control has no idea what a "row" is beyond this number. */
+    total: number;
+    pageSizeOptions: readonly number[];
+    protected willUpdate(): void;
+    private get pageCount();
+    private get clampedPage();
+    private get rangeStart();
+    private get rangeEnd();
+    private emitChange;
+    private readonly handleFirst;
+    private readonly handlePrevious;
+    private readonly handleNext;
+    private readonly handleLast;
+    private readonly handlePageSizeChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "lit-material-data-table-pagination": LitMaterialDataTablePagination;
+    }
+}
+//# sourceMappingURL=data-table-pagination.d.ts.map

package/dist/data-table-pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination.d.ts","sourceRoot":"","sources":["../src/data-table-pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;;GAaG;AACH,qBACa,8BAA+B,SAAQ,UAAU;IAC5D,OAAgB,MAAM,0BAAU;IAEhC,kCAAkC;IACN,IAAI,SAAK;IACe,QAAQ,SAAM;IAClE,uGAAuG;IAC3E,KAAK,SAAK;IACN,eAAe,EAAE,SAAS,MAAM,EAAE,CAAgB;cAE/D,UAAU,IAAI,IAAI;IASrC,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAkC;IAC9D,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAkE;IACjG,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmF;IAC9G,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAmD;IAE9E,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAGnC;IAEO,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oCAAoC,EAAE,8BAA8B,CAAC;KACtE;CACF"}

package/dist/data-table-pagination.js

@@ -0,0 +1,106 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styles } from "./data-table-pagination-styles.js";
+/**
+ * A pagination footer for `lit-material-data-table` — a standalone,
+ * headless control rather than something the table renders itself, since
+ * the table never owns your data (see its own class docs) and paging is
+ * exactly as data-shaped a concern as sorting/selection. Place one below a
+ * table, feed it `total`/`page`/`page-size`, and re-render (or re-fetch) the
+ * table's rows in response to `page-change` — this component never touches
+ * the table directly.
+ *
+ * @element lit-material-data-table-pagination
+ *
+ * @fires page-change - `detail: { page, pageSize }`, when a nav button is activated or the page-size
+ *   select changes (which also resets `page` to `0`).
+ */
+let LitMaterialDataTablePagination = class LitMaterialDataTablePagination extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** 0-based current page index. */
+        this.page = 0;
+        this.pageSize = 10;
+        /** Total row count across every page — this control has no idea what a "row" is beyond this number. */
+        this.total = 0;
+        this.pageSizeOptions = [10, 25, 50];
+        this.handleFirst = () => this.emitChange(0);
+        this.handlePrevious = () => this.emitChange(Math.max(0, this.clampedPage - 1));
+        this.handleNext = () => this.emitChange(Math.min(this.pageCount - 1, this.clampedPage + 1));
+        this.handleLast = () => this.emitChange(this.pageCount - 1);
+        this.handlePageSizeChange = (event) => {
+            this.pageSize = Number(event.target.value);
+            this.emitChange(0);
+        };
+    }
+    static { this.styles = styles; }
+    willUpdate() {
+        if (!this.hasAttribute("role")) {
+            this.setAttribute("role", "group");
+        }
+        if (!this.hasAttribute("aria-label")) {
+            this.setAttribute("aria-label", "Pagination");
+        }
+    }
+    get pageCount() {
+        return Math.max(1, Math.ceil(this.total / this.pageSize));
+    }
+    get clampedPage() {
+        return Math.min(Math.max(this.page, 0), this.pageCount - 1);
+    }
+    get rangeStart() {
+        return this.total === 0 ? 0 : this.clampedPage * this.pageSize + 1;
+    }
+    get rangeEnd() {
+        return Math.min(this.total, (this.clampedPage + 1) * this.pageSize);
+    }
+    emitChange(page) {
+        this.page = page;
+        this.dispatchEvent(new CustomEvent("page-change", { bubbles: true, detail: { page: this.page, pageSize: this.pageSize } }));
+    }
+    render() {
+        const page = this.clampedPage;
+        const isFirst = page <= 0;
+        const isLast = page >= this.pageCount - 1;
+        return html `
+      <div class="page-size">
+        <label id="page-size-label">Rows per page</label>
+        <select aria-labelledby="page-size-label" .value=${String(this.pageSize)} @change=${this.handlePageSizeChange}>
+          ${this.pageSizeOptions.map((size) => html `<option value=${size} ?selected=${size === this.pageSize}>${size}</option>`)}
+        </select>
+      </div>
+      <div class="range">${this.rangeStart}–${this.rangeEnd} of ${this.total}</div>
+      <div class="controls">
+        <button type="button" aria-label="First page" ?disabled=${isFirst} @click=${this.handleFirst}>⏮</button>
+        <button type="button" aria-label="Previous page" ?disabled=${isFirst} @click=${this.handlePrevious}>
+          ◀
+        </button>
+        <button type="button" aria-label="Next page" ?disabled=${isLast} @click=${this.handleNext}>▶</button>
+        <button type="button" aria-label="Last page" ?disabled=${isLast} @click=${this.handleLast}>⏭</button>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], LitMaterialDataTablePagination.prototype, "page", void 0);
+__decorate([
+    property({ attribute: "page-size", type: Number })
+], LitMaterialDataTablePagination.prototype, "pageSize", void 0);
+__decorate([
+    property({ type: Number })
+], LitMaterialDataTablePagination.prototype, "total", void 0);
+__decorate([
+    property({ attribute: false })
+], LitMaterialDataTablePagination.prototype, "pageSizeOptions", void 0);
+LitMaterialDataTablePagination = __decorate([
+    customElement("lit-material-data-table-pagination")
+], LitMaterialDataTablePagination);
+export { LitMaterialDataTablePagination };
+//# sourceMappingURL=data-table-pagination.js.map

package/dist/data-table-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination.js","sourceRoot":"","sources":["../src/data-table-pagination.ts"],"names":[],"mappings":"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"}

package/dist/data-table-row-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-row-styles.d.ts","sourceRoot":"","sources":["../src/data-table-row-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwBlB,CAAC"}
+{"version":3,"file":"data-table-row-styles.d.ts","sourceRoot":"","sources":["../src/data-table-row-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8BlB,CAAC"}

package/dist/data-table-row-styles.js

@@ -6,6 +6,12 @@ export const styles = css `
     transition: background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   }
 
+  :host([flex]) {
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+  }
+
   :host(:last-of-type) {
     border-bottom: none;
   }

package/dist/data-table-row-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-row-styles.js","sourceRoot":"","sources":["../src/data-table-row-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwBxB,CAAC"}
+{"version":3,"file":"data-table-row-styles.js","sourceRoot":"","sources":["../src/data-table-row-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BxB,CAAC"}

package/dist/data-table-row.d.ts

@@ -8,6 +8,14 @@ import { LitElement } from "lit";
  * uses `display: table-cell` — native table column alignment without an
  * actual `<table>` element.
  *
+ * Set `flex` instead when this row is used with `lit-material-data-table`'s
+ * virtualized (`items`/`.rowRenderer`) mode: rows rendered inside an
+ * absolutely-positioned, transformed viewport can't participate in the
+ * browser's table layout algorithm (that requires normal in-flow siblings),
+ * so virtualized rows lay themselves out with flexbox instead — give each
+ * `lit-material-data-table-cell` inside a matching `flex` and a `width` so
+ * columns still line up with the (still table-laid-out) header row.
+ *
  * @element lit-material-data-table-row
  *
  * @slot - `lit-material-data-table-cell` elements.
@@ -17,6 +25,8 @@ export declare class LitMaterialDataTableRow extends LitElement {
     header: boolean;
     /** Highlights the row — set by the table from a row-select checkbox's checked state, not directly. */
     selected: boolean;
+    /** Lays the row out with flexbox instead of `display: table-row` — see the class docs. */
+    flex: boolean;
     protected willUpdate(changed: Map<string, unknown>): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/data-table-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-row.d.ts","sourceRoot":"","sources":["../src/data-table-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;GAYG;AACH,qBACa,uBAAwB,SAAQ,UAAU;IACrD,OAAgB,MAAM,0BAAU;IAEY,MAAM,UAAS;IAC3D,sGAAsG;IAC1D,QAAQ,UAAS;cAE1C,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMzD,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,uBAAuB,CAAC;KACxD;CACF"}
+{"version":3,"file":"data-table-row.d.ts","sourceRoot":"","sources":["../src/data-table-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,uBAAwB,SAAQ,UAAU;IACrD,OAAgB,MAAM,0BAAU;IAEY,MAAM,UAAS;IAC3D,sGAAsG;IAC1D,QAAQ,UAAS;IAC7D,0FAA0F;IAC9C,IAAI,UAAS;cAEtC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMzD,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,uBAAuB,CAAC;KACxD;CACF"}

package/dist/data-table-row.js

@@ -16,6 +16,14 @@ import { styles } from "./data-table-row-styles.js";
  * uses `display: table-cell` — native table column alignment without an
  * actual `<table>` element.
  *
+ * Set `flex` instead when this row is used with `lit-material-data-table`'s
+ * virtualized (`items`/`.rowRenderer`) mode: rows rendered inside an
+ * absolutely-positioned, transformed viewport can't participate in the
+ * browser's table layout algorithm (that requires normal in-flow siblings),
+ * so virtualized rows lay themselves out with flexbox instead — give each
+ * `lit-material-data-table-cell` inside a matching `flex` and a `width` so
+ * columns still line up with the (still table-laid-out) header row.
+ *
  * @element lit-material-data-table-row
  *
  * @slot - `lit-material-data-table-cell` elements.
@@ -26,6 +34,8 @@ let LitMaterialDataTableRow = class LitMaterialDataTableRow extends LitElement {
         this.header = false;
         /** Highlights the row — set by the table from a row-select checkbox's checked state, not directly. */
         this.selected = false;
+        /** Lays the row out with flexbox instead of `display: table-row` — see the class docs. */
+        this.flex = false;
     }
     static { this.styles = styles; }
     willUpdate(changed) {
@@ -43,6 +53,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LitMaterialDataTableRow.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialDataTableRow.prototype, "flex", void 0);
 LitMaterialDataTableRow = __decorate([
     customElement("lit-material-data-table-row")
 ], LitMaterialDataTableRow);

package/dist/data-table-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-row.js","sourceRoot":"","sources":["../src/data-table-row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD;;;;;;;;;;;;GAYG;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAGuC,WAAM,GAAG,KAAK,CAAC;QAC3D,sGAAsG;QAC1D,aAAQ,GAAG,KAAK,CAAC;IAW/D,CAAC;aAfiB,WAAM,GAAG,MAAM,AAAT,CAAU;IAMb,UAAU,CAAC,OAA6B;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YACxD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAZ2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAgB;AAEf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAAkB;AALlD,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CAgBnC"}
+{"version":3,"file":"data-table-row.js","sourceRoot":"","sources":["../src/data-table-row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAGuC,WAAM,GAAG,KAAK,CAAC;QAC3D,sGAAsG;QAC1D,aAAQ,GAAG,KAAK,CAAC;QAC7D,0FAA0F;QAC9C,SAAI,GAAG,KAAK,CAAC;IAW3D,CAAC;aAjBiB,WAAM,GAAG,MAAM,AAAT,CAAU;IAQb,UAAU,CAAC,OAA6B;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YACxD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAd2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAgB;AAEf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAAkB;AAEjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAAc;AAP9C,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CAkBnC"}

package/dist/data-table-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-styles.d.ts","sourceRoot":"","sources":["../src/data-table-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAelB,CAAC"}
+{"version":3,"file":"data-table-styles.d.ts","sourceRoot":"","sources":["../src/data-table-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkClB,CAAC"}

package/dist/data-table-styles.js

@@ -14,5 +14,24 @@ export const styles = css `
     width: 100%;
     border-collapse: collapse;
   }
+
+  .viewport {
+    display: block;
+    width: 100%;
+    overflow-y: auto;
+    position: relative;
+  }
+
+  .spacer {
+    position: relative;
+    width: 100%;
+  }
+
+  .virtual-row {
+    position: absolute;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    top: 0;
+  }
 `;
 //# sourceMappingURL=data-table-styles.js.map

package/dist/data-table-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-styles.js","sourceRoot":"","sources":["../src/data-table-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;CAexB,CAAC"}
+{"version":3,"file":"data-table-styles.js","sourceRoot":"","sources":["../src/data-table-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCxB,CAAC"}

package/dist/data-table.d.ts

@@ -24,11 +24,35 @@ import type { SortDirection } from "./data-table-cell.js";
  * closest-`<tr>`-equivalent (`lit-material-data-table-row`) `data-row-id`
  * attribute.
  *
+ * A `resizable` header cell's drag handle reports its own width via a
+ * `column-resize` event — this table is the one that actually applies it,
+ * setting an explicit `width`/`min-width`/`max-width` on every cell that
+ * shares that column index (header and body alike), not just the header
+ * cell that was dragged. That has to happen up here rather than in the cell
+ * itself: with `display: table-cell` and no real `<colgroup>`, the browser's
+ * table layout algorithm treats "same child index across sibling rows" as
+ * the column, so keeping a whole column in sync means reaching into every
+ * row, which only the table can see.
+ *
+ * Set `.items`/`.rowRenderer` for large datasets to switch on fixed-height
+ * row virtualization: only the rows within (or near) the visible scroll
+ * window are ever rendered, however many thousand `items` there are. This
+ * is the one thing here that isn't purely headless — the table owns
+ * scroll position and which slice of `items` is currently mounted — because
+ * true virtualization requires knowing the full item count up front, which
+ * "you slot real rows" (this table's normal mode) can't provide. Slot only
+ * the header row in this mode; body rows come from `rowRenderer` instead,
+ * and both the header row and every `rowRenderer`-returned row need `flex`
+ * set (see `lit-material-data-table-row`'s docs) since virtualized rows are
+ * positioned with `transform`, which native table layout can't do.
+ *
  * @element lit-material-data-table
  *
- * @slot - `lit-material-data-table-row` elements.
+ * @slot - `lit-material-data-table-row` elements (in virtualized mode, the header row only).
  *
  * @csspart table - The table layout container.
+ * @csspart viewport - The scrollable viewport, in virtualized mode.
+ * @csspart spacer - The full-height spacer inside the viewport, in virtualized mode.
  *
  * @fires sort-change - `detail: { sortKey, sortDirection }`, when a sortable header cell is activated.
  * @fires selection-change - `detail: { selected: string[] }` (the checked rows' `data-row-id` values),
@@ -38,11 +62,28 @@ export declare class LitMaterialDataTable extends LitElement {
     static styles: import("lit").CSSResult;
     sortKey?: string;
     sortDirection: SortDirection;
+    /** The full dataset for virtualized mode. Empty (the default) means "not virtualized". */
+    items: readonly unknown[];
+    /** Renders one virtualized body row. Required alongside `items` to turn virtualization on. */
+    rowRenderer?: (item: unknown, index: number) => unknown;
+    /** Stable key per item, for correct DOM reuse as the visible window scrolls. Defaults to the index. */
+    rowKey?: (item: unknown, index: number) => string | number;
+    /** Fixed row height in pixels — every virtualized row is assumed to be exactly this tall. */
+    rowHeight: number;
+    /** Visible scroll-viewport height in pixels. */
+    viewportHeight: number;
+    /** Extra rows rendered beyond each edge of the visible window, to absorb fast scrolling. */
+    overscan: number;
+    private viewportScrollTop;
+    private scrollUpdatePending;
     constructor();
     protected willUpdate(changed: Map<string, unknown>): void;
+    private queryAllInTable;
     private get headerCells();
     private get rowCheckboxes();
     private get selectAllCheckbox();
+    private get rows();
+    private get isVirtualized();
     private syncSortIndicators;
     private syncSelectAllState;
     private syncRowSelectedState;
@@ -50,6 +91,9 @@ export declare class LitMaterialDataTable extends LitElement {
     private readonly handleSlotChange;
     private readonly handleSortRequest;
     private readonly handleChange;
+    private readonly handleColumnResize;
+    private readonly handleViewportScroll;
+    private renderVirtualizedRows;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../src/data-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,KAAK,EAA4B,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAIpF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IAClD,OAAgB,MAAM,0BAAU;IAEK,OAAO,CAAC,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,aAAa,CAAe;;cAQnE,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAalE,OAAO,KAAK,WAAW,GAMtB;IAED,OAAO,KAAK,aAAa,GAGxB;IAED,OAAO,KAAK,iBAAiB,GAG5B;IAED,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,uBAAuB;IAQ/B,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAI/B;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAehC;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAe3B;IAEO,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../src/data-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAGvC,OAAO,KAAK,EAA4B,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAIpF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IAClD,OAAgB,MAAM,0BAAU;IAEK,OAAO,CAAC,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,aAAa,CAAe;IAEtF,0FAA0F;IAC1D,KAAK,EAAE,SAAS,OAAO,EAAE,CAAM;IAC/D,8FAA8F;IAC9D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACxF,uGAAuG;IACvE,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IAC3F,6FAA6F;IACxC,SAAS,SAAM;IACpE,gDAAgD;IACU,cAAc,SAAO;IAC/E,4FAA4F;IAChE,QAAQ,SAAK;IAEhC,OAAO,CAAC,iBAAiB,CAAK;IACvC,OAAO,CAAC,mBAAmB,CAAS;;cASjB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAkBlE,OAAO,CAAC,eAAe;IAUvB,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,IAAI,GAEf;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,uBAAuB;IAQ/B,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAI/B;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAehC;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAe3B;IAEF,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAcjC;IAEF,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAQnC;IAEF,OAAO,CAAC,qBAAqB;IA+BpB,MAAM;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}

package/dist/data-table.js

@@ -5,7 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
 import { styles } from "./data-table-styles.js";
 /**
  * Material Design 3 data table — a container for `lit-material-data-table-row`
@@ -31,11 +32,35 @@ import { styles } from "./data-table-styles.js";
  * closest-`<tr>`-equivalent (`lit-material-data-table-row`) `data-row-id`
  * attribute.
  *
+ * A `resizable` header cell's drag handle reports its own width via a
+ * `column-resize` event — this table is the one that actually applies it,
+ * setting an explicit `width`/`min-width`/`max-width` on every cell that
+ * shares that column index (header and body alike), not just the header
+ * cell that was dragged. That has to happen up here rather than in the cell
+ * itself: with `display: table-cell` and no real `<colgroup>`, the browser's
+ * table layout algorithm treats "same child index across sibling rows" as
+ * the column, so keeping a whole column in sync means reaching into every
+ * row, which only the table can see.
+ *
+ * Set `.items`/`.rowRenderer` for large datasets to switch on fixed-height
+ * row virtualization: only the rows within (or near) the visible scroll
+ * window are ever rendered, however many thousand `items` there are. This
+ * is the one thing here that isn't purely headless — the table owns
+ * scroll position and which slice of `items` is currently mounted — because
+ * true virtualization requires knowing the full item count up front, which
+ * "you slot real rows" (this table's normal mode) can't provide. Slot only
+ * the header row in this mode; body rows come from `rowRenderer` instead,
+ * and both the header row and every `rowRenderer`-returned row need `flex`
+ * set (see `lit-material-data-table-row`'s docs) since virtualized rows are
+ * positioned with `transform`, which native table layout can't do.
+ *
  * @element lit-material-data-table
  *
- * @slot - `lit-material-data-table-row` elements.
+ * @slot - `lit-material-data-table-row` elements (in virtualized mode, the header row only).
  *
  * @csspart table - The table layout container.
+ * @csspart viewport - The scrollable viewport, in virtualized mode.
+ * @csspart spacer - The full-height spacer inside the viewport, in virtualized mode.
  *
  * @fires sort-change - `detail: { sortKey, sortDirection }`, when a sortable header cell is activated.
  * @fires selection-change - `detail: { selected: string[] }` (the checked rows' `data-row-id` values),
@@ -46,6 +71,16 @@ let LitMaterialDataTable = class LitMaterialDataTable extends LitElement {
     constructor() {
         super();
         this.sortDirection = "ascending";
+        /** The full dataset for virtualized mode. Empty (the default) means "not virtualized". */
+        this.items = [];
+        /** Fixed row height in pixels — every virtualized row is assumed to be exactly this tall. */
+        this.rowHeight = 44;
+        /** Visible scroll-viewport height in pixels. */
+        this.viewportHeight = 400;
+        /** Extra rows rendered beyond each edge of the visible window, to absorb fast scrolling. */
+        this.overscan = 4;
+        this.viewportScrollTop = 0;
+        this.scrollUpdatePending = false;
         this.handleSlotChange = () => {
             this.syncSortIndicators();
             this.syncSelectAllState();
@@ -86,8 +121,37 @@ let LitMaterialDataTable = class LitMaterialDataTable extends LitElement {
                 this.dispatchSelectionChange();
             }
         };
+        this.handleColumnResize = (event) => {
+            const cell = event.composedPath()[0];
+            const row = cell?.parentElement;
+            if (!cell || !row)
+                return;
+            const index = Array.from(row.children).indexOf(cell);
+            if (index === -1)
+                return;
+            const width = `${event.detail.width}px`;
+            this.rows.forEach((otherRow) => {
+                const target = otherRow.children[index];
+                if (!target)
+                    return;
+                target.style.width = width;
+                target.style.minWidth = width;
+                target.style.maxWidth = width;
+            });
+        };
+        this.handleViewportScroll = (event) => {
+            const target = event.currentTarget;
+            if (this.scrollUpdatePending)
+                return;
+            this.scrollUpdatePending = true;
+            requestAnimationFrame(() => {
+                this.scrollUpdatePending = false;
+                this.viewportScrollTop = target.scrollTop;
+            });
+        };
         this.addEventListener("sort-request", this.handleSortRequest);
         this.addEventListener("change", this.handleChange);
+        this.addEventListener("column-resize", this.handleColumnResize);
     }
     willUpdate(changed) {
         // Not connectedCallback(): attribute mutations made there don't make it
@@ -101,23 +165,35 @@ let LitMaterialDataTable = class LitMaterialDataTable extends LitElement {
             this.syncSortIndicators();
         }
     }
-    get headerCells() {
+    // Virtualized body rows live in this table's own shadow root (rendered by
+    // `rowRenderer`, not slotted), while everything else lives in the light
+    // DOM as usual — merge both trees rather than picking one, so sorting/
+    // selection delegation keeps working regardless of which mode produced a
+    // given row.
+    queryAllInTable(selector) {
         // @lit-labs/ssr's light-DOM shim doesn't implement querySelectorAll on
-        // the host during connectedCallback — degrade to no cells rather than
+        // the host during connectedCallback — degrade to no elements rather than
         // throwing (there's no sort/selection state to sync server-side anyway).
         if (typeof this.querySelectorAll !== "function")
             return [];
-        return Array.from(this.querySelectorAll("lit-material-data-table-cell[header]"));
+        const lightMatches = Array.from(this.querySelectorAll(selector));
+        const shadowMatches = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+        return [...lightMatches, ...shadowMatches];
+    }
+    get headerCells() {
+        return this.queryAllInTable("lit-material-data-table-cell[header]");
     }
     get rowCheckboxes() {
-        if (typeof this.querySelectorAll !== "function")
-            return [];
-        return Array.from(this.querySelectorAll("[data-row-select]"));
+        return this.queryAllInTable("[data-row-select]");
     }
     get selectAllCheckbox() {
-        if (typeof this.querySelector !== "function")
-            return null;
-        return this.querySelector("[data-select-all]");
+        return this.queryAllInTable("[data-select-all]")[0] ?? null;
+    }
+    get rows() {
+        return this.queryAllInTable("lit-material-data-table-row");
+    }
+    get isVirtualized() {
+        return this.items.length > 0 && !!this.rowRenderer;
     }
     syncSortIndicators() {
         this.headerCells.forEach((cell) => {
@@ -147,8 +223,38 @@ let LitMaterialDataTable = class LitMaterialDataTable extends LitElement {
             .filter((id) => id !== null && id !== undefined);
         this.dispatchEvent(new CustomEvent("selection-change", { bubbles: true, detail: { selected } }));
     }
+    renderVirtualizedRows() {
+        const total = this.items.length;
+        const totalHeight = total * this.rowHeight;
+        const start = Math.max(0, Math.floor(this.viewportScrollTop / this.rowHeight) - this.overscan);
+        const visibleCount = Math.ceil(this.viewportHeight / this.rowHeight) + this.overscan * 2;
+        const end = Math.min(total, start + visibleCount);
+        const visible = this.items.slice(start, end);
+        return html `
+      <div
+        class="viewport"
+        part="viewport"
+        style="height: ${this.viewportHeight}px"
+        @scroll=${this.handleViewportScroll}
+      >
+        <div class="spacer" part="spacer" style="height: ${totalHeight}px">
+          ${repeat(visible, (item, i) => (this.rowKey ? this.rowKey(item, start + i) : start + i), (item, i) => {
+            const index = start + i;
+            return html `<div class="virtual-row" style="transform: translateY(${index * this.rowHeight}px)">
+                ${this.rowRenderer(item, index)}
+              </div>`;
+        })}
+        </div>
+      </div>
+    `;
+    }
     render() {
-        return html `<div class="table" part="table"><slot @slotchange=${this.handleSlotChange}></slot></div>`;
+        return html `
+      <div class="table" part="table">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        ${this.isVirtualized ? this.renderVirtualizedRows() : ""}
+      </div>
+    `;
     }
 };
 __decorate([
@@ -157,6 +263,27 @@ __decorate([
 __decorate([
     property({ attribute: "sort-direction" })
 ], LitMaterialDataTable.prototype, "sortDirection", void 0);
+__decorate([
+    property({ attribute: false })
+], LitMaterialDataTable.prototype, "items", void 0);
+__decorate([
+    property({ attribute: false })
+], LitMaterialDataTable.prototype, "rowRenderer", void 0);
+__decorate([
+    property({ attribute: false })
+], LitMaterialDataTable.prototype, "rowKey", void 0);
+__decorate([
+    property({ attribute: "row-height", type: Number })
+], LitMaterialDataTable.prototype, "rowHeight", void 0);
+__decorate([
+    property({ attribute: "viewport-height", type: Number })
+], LitMaterialDataTable.prototype, "viewportHeight", void 0);
+__decorate([
+    property({ type: Number })
+], LitMaterialDataTable.prototype, "overscan", void 0);
+__decorate([
+    state()
+], LitMaterialDataTable.prototype, "viewportScrollTop", void 0);
 LitMaterialDataTable = __decorate([
     customElement("lit-material-data-table")
 ], LitMaterialDataTable);

package/dist/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../src/data-table.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../src/data-table.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -2,4 +2,5 @@ export { LitMaterialDataTable } from "./data-table.js";
 export { LitMaterialDataTableRow } from "./data-table-row.js";
 export { LitMaterialDataTableCell } from "./data-table-cell.js";
 export type { SortDirection } from "./data-table-cell.js";
+export { LitMaterialDataTablePagination } from "./data-table-pagination.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAChE,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAChE,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,8BAA8B,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
 export { LitMaterialDataTable } from "./data-table.js";
 export { LitMaterialDataTableRow } from "./data-table-row.js";
 export { LitMaterialDataTableCell } from "./data-table-cell.js";
+export { LitMaterialDataTablePagination } from "./data-table-pagination.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,OAAO,EAAE,8BAA8B,EAAE,MAAM,4BAA4B,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lit-material/data-table",
-  "version": "0.0.1",
-  "description": "Material Design 3 data table web components (sortable, selectable).",
+  "version": "0.0.2",
+  "description": "Material Design 3 data table web components (sortable, selectable, paginated, resizable, virtualized).",
   "license": "MIT",
   "author": {
     "name": "bohdaq",