@timlassiter11/yatl 1.0.8 → 1.0.10

package/README.md

@@ -31,80 +31,72 @@ npm install @timlassiter11/yatl
 
 Alternatively you can manually download the source files from the [releases](https://github.com/timlassiter11/YATL/releases) section.
 
+## Examples
 ### Lit
+
 ```ts
 import { html, LitElement } from 'lit';
 
-import '@timlassiter11/yatl';
-
-class MyComponent extends LitElement {
-   @state()
-   private _tableData: User[] = [];
-
-   private _tableColums: ColumnOptions<User>[] = [
-      {
-         field: 'id',
-         title: 'ID',
-         resizeable: true,
-         sortable: true,
-         searchable: false,
-      },
-      {
-         field: 'name',
-         resizeable: true,
-         sortable: true,
-         searchable: true,
-         tokenize: true,
-      },
-      {
-         field: 'status',
-         resizeable: true,
-         sortable: true,
-         searchable: false,
-      }
-   ];
-
-   protected override render() {
-      return html`
-        <yatl-table 
-          .columns=${this._columns} 
-          .data=${this._tableData} 
-          enable-virtual-scroll 
-          @yatl-row-click=${this.handleRowClicked}>
-        </yatl-table>
-      `;
-   }
-
-   private handleRowClicked = (event) => {
-      console.log(event.detail)
-   }
+import { ColumnOptions, YatlRowClickEvent } from '@timlassiter11/yatl';
+import { customElement, state } from 'lit/decorators.js';
+
+type User = { id: number; name: string; dateCreated: Date };
+
+@customElement('my-component')
+export class MyComponent extends LitElement {
+  private dateFormatter = Intl.DateTimeFormat(undefined, {
+    dateStyle: 'short',
+    timeStyle: undefined,
+  });
+
+  private colums: ColumnOptions<User>[] = [
+    {
+      field: 'id',
+      title: 'ID',
+      resizable: true,
+      sortable: true,
+      searchable: false,
+    },
+    {
+      field: 'name',
+      resizable: true,
+      sortable: true,
+      searchable: true,
+      tokenize: true,
+    },
+    {
+      field: 'dateCreated',
+      resizable: true,
+      sortable: true,
+      searchable: false,
+      valueFormatter: value => this.dateFormatter.format(value as Date),
+    },
+  ];
+
+  @state()
+  private data: User[] = [
+    { id: 0, name: 'Bjarne Stroustrup', dateCreated: new Date(1968, 11, 30) },
+    { id: 1, name: 'Guido van Rossum', dateCreated: new Date(1974, 0, 31) },
+  ];
+
+  protected override render() {
+    return html`
+      <yatl-table
+        .columns=${this.colums}
+        .data=${this.data}
+        enable-virtual-scroll
+        @yatl-row-click=${this.handleRowClicked}
+      >
+      </yatl-table>
+    `;
+  }
+
+  private handleRowClicked = (event: YatlRowClickEvent<User>) => {
+    console.log(event.detail);
+  };
 }
 ```
 
-### js
-
-```js
-const table = document.querySelector('yatl-table');
-
-table.columns = [
-  { field: 'id', title: 'ID', sortable: true, width: 60 },
-  { field: 'name', title: 'Name', sortable: true, searchable: true },
-  { field: 'role', title: 'Role', sortable: true },
-  {
-    field: 'status',
-    title: 'Status',
-    // Custom renderer example
-    cellRenderer: value => (value === 'Active' ? '🟢' : '🔴'),
-  },
-];
-
-table.data = [
-  { id: 1, name: 'Alice', role: 'Admin', status: 'Active' },
-  { id: 2, name: 'Bob', role: 'User', status: 'Inactive' },
-  // ... more data
-];
-```
-
 ### Vanilla JS
 
 ```html
@@ -159,53 +151,130 @@ table.data = [
 </html>
 ```
 
-## Styling
+## Styling Guide
 
-`yatl-table` uses the native Web Component Shadow DOM to encapsulate its styles. This prevents your global CSS from accidentally breaking the table, and prevents the table's styles from leaking out.
+YATL Table is built with extensive CSS Custom Properties (variables) to make theming easy. Styles are scoped to the shadow DOM, but you can control them from anywhere in your application (e.g., :root or a parent container) using the provided --yatl-table-\* variables.
 
-To customize the table, you use the standard CSS ::part() pseudo-element.
-### The Basics
+### Quick Start
 
-To style a specific part of the table, select the element and use ::part(name).
+You can apply styles directly to the component or inherit them globally.
 
 ```css
-/* Target the main table container */
-yatl-table::part(table) {
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  font-family: 'Inter', sans-serif;
+/* Apply globally */
+:root {
+  --yatl-table-font-size: 1rem;
+  --yatl-table-bg-light: #fdfdfd;
 }
 
-/* Target the header row */
-yatl-table::part(header) {
-  background-color: #f8fafc;
-  font-weight: 700;
-  text-transform: uppercase;
-  font-size: 0.75rem;
+/* Or scope to a specific class */
+.my-custom-table {
+  --yatl-table-border-color: #ccc;
+  --yatl-table-header-bg: #eee;
+}
+```
+
+### CSS Variables Reference
+
+#### Typography
+
+| Variable                 | Description                      |
+| ------------------------ | -------------------------------- |
+| --yatl-table-font        | The font family stack.           |
+| --yatl-table-font-size   | Base font size for all text.     |
+| --yatl-table-line-height | Line height for text legibility. |
+
+#### Spacing & Layout
+
+| Variable                    | Description                                       |
+| --------------------------- | ------------------------------------------------- |
+| --yatl-table-cell-padding   | Padding inside standard body cells.               |
+| --yatl-table-header-padding | Padding inside header cells.                      |
+| --yatl-table-resizer-width  | The width of the "grab" area for column resizing. |
+
+#### Color Variables
+
+| Variable                     | Description                                    |
+| ---------------------------- | ---------------------------------------------- |
+| --yatl-table-bg              | Main background color of the table.            |
+| --yatl-table-text            | Primary text color.                            |
+| --yatl-table-text-muted      | Secondary/footer text color.                   |
+| --yatl-table-border-color    | Border color for rows and the table container. |
+| --yatl-table-header-bg       | Background for the sticky header row.          |
+| --yatl-table-header-text     | Text color for the header row.                 |
+| --yatl-table-row-hover-bg    | Background color when hovering over a row.     |
+| --yatl-table-row-selected-bg | Background color for selected rows.            |
+
+**NOTE**: For each color variable, there is a dedicated `-light` and `-dark` variable. See [Color Scheme](#color-scheme) below for more info.
+
+### Color Scheme
+
+By default, this component adapts to the current `color-scheme` by utilizing the [light-dark()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/light-dark) CSS function. This will automatically adjust to the system theme, but can be manually overridden. If you have a theme toggler, you should have it set the document `color-scheme`. Below is an example assuming you set a `light` or `dark` class on your document element.
+
+```css
+:root {
+  color-scheme: light dark;
+}
+
+:root.light {
+  color-scheme: light;
+}
+
+:root.dark {
+  color-scheme: dark;
+}
+```
+
+To force a color regardless of the current color scheme, you can override the base variable.
+
+```css
+:root {
+  /* Always dark background */
+  --yatl-table-bg: #212121;
+}
+```
+
+If you want to update a color for one of the color schemes, use the specific theme variable instead.
+
+```css
+:root {
+  /* light background */
+  --yatl-table-bg-light: #e0e0e0;
+  /* dark background */
+  --yatl-table-bg-dark: #202020;
 }
 ```
 
+### CSS Shadow Parts
 
-### Part Reference
+For deeper customization beyond color and spacing, you can target specific elements using the ::part pseudo-element.
 
-Here is a list of all exposed parts you can target:
+```css
+yatl-table::part(header) {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+```
 
-| Part Name         | Description                                       |
-|-------------------|---------------------------------------------------|
-| table             | The main container grid.                          |
-| header            | The container for the header row.                 |
-| header-cell       | Individual header cells.                          |
-| header-title      | The text span inside a header cell.               |
-| header-sort-icon  | The sorting arrow icon.                           |
-| header-resizer    | The drag handle for resizing columns.             |
-| row               | The container for a data row.                     |
-| cell              | Targets all cells (both header and body).         |
-| body-cell         | Targets only data cells (not headers).            |
-| footer            | The footer container.                             |
-| message           | The empty state / no results message container.   |
+#### Parts Reference
+
+| Part Name        | Description                                     |
+| ---------------- | ----------------------------------------------- |
+| table            | The main container grid.                        |
+| header           | The container for the header row.               |
+| header-cell      | Individual header cells.                        |
+| header-title     | The text span inside a header cell.             |
+| header-sort-icon | The sorting arrow icon.                         |
+| header-resizer   | The drag handle for resizing columns.           |
+| row              | The container for a data row.                   |
+| cell             | Targets all cells (both header and body).       |
+| body-cell        | Targets only data cells (not headers).          |
+| footer           | The footer container.                           |
+| message          | The empty state / no results message container. |
 
 ### Common Recipes
+
 #### Zebra Striping
+
 You can use standard pseudo-classes like :nth-child combined with ::part.
 
 ```css
@@ -222,6 +291,7 @@ yatl-table::part(row):hover {
 ```
 
 #### Targeting Specific Columns
+
 Every cell automatically gets a part name based on its field property in the format cell-{field}.
 
 For example, if you have a column defined as `{ field: 'status' }`:
@@ -249,7 +319,7 @@ You can style rows based on their data using the rowParts property in JavaScript
 const table = document.querySelector('yatl-table');
 
 // Return a string (or array of strings) to add to the row's parts
-table.rowParts = (row) => {
+table.rowParts = row => {
   const parts = [];
   if (row.stock < 5) parts.push('low-stock');
   if (row.price > 1000) parts.push('expensive');
@@ -272,6 +342,7 @@ yatl-table::part(expensive) {
 ```
 
 #### Customizing the Footer
+
 ```css
 yatl-table::part(footer) {
   background-color: #1e293b;
@@ -300,4 +371,4 @@ Most of the time this isn't ideal though and instead we'd like to let the layout
     <div>... Some boring footer info or something</div>
   </div>
 </body>
-```
+```

package/dist/index.d.mts

@@ -1,5 +1,6 @@
+import * as lit_html from 'lit-html';
 import * as lit from 'lit';
-import { LitElement, TemplateResult, nothing, PropertyValues } from 'lit';
+import { LitElement, nothing, PropertyValues } from 'lit';
 
 type NestedKeyOf<ObjectType> = ObjectType extends object ? {
     [Key in keyof ObjectType & (string | number)]: NonNullable<ObjectType[Key]> extends unknown[] ? `${Key}` : NonNullable<ObjectType[Key]> extends object ? // Recurse with the non-nullable type
@@ -622,16 +623,16 @@ declare class YatlTable<T extends object = UnspecifiedRecord> extends LitElement
      * @param index - The original index of the row to delete.
      */
     deleteRow(index: number): void;
-    protected renderColumnSortIcon(column: DisplayColumnOptions<T>, state: ColumnState<T>): TemplateResult<1> | typeof nothing;
-    protected renderColumnResizer(column: DisplayColumnOptions<T>, _state: ColumnState<T>): TemplateResult<1> | typeof nothing;
-    protected renderHeaderCell(field: NestedKeyOf<T>): TemplateResult<1> | typeof nothing;
-    protected renderHeader(): TemplateResult<1>;
+    protected renderColumnSortIcon(column: DisplayColumnOptions<T>, state: ColumnState<T>): lit_html.TemplateResult<1> | typeof nothing;
+    protected renderColumnResizer(column: DisplayColumnOptions<T>, _state: ColumnState<T>): lit_html.TemplateResult<1> | typeof nothing;
+    protected renderHeaderCell(field: NestedKeyOf<T>): lit_html.TemplateResult<1> | typeof nothing;
+    protected renderHeader(): lit_html.TemplateResult<1>;
     protected renderCellContents(value: unknown, column: DisplayColumnOptions<T>, row: T): unknown;
-    protected renderCell(field: NestedKeyOf<T>, row: T): TemplateResult<1> | typeof nothing | undefined;
-    protected renderRow(row: T, index: number): TemplateResult<1>;
-    protected renderBody(): TemplateResult<1>;
-    protected renderFooter(): TemplateResult<1> | typeof nothing;
-    protected render(): TemplateResult<1>;
+    protected renderCell(field: NestedKeyOf<T>, row: T): lit_html.TemplateResult<1> | typeof nothing | undefined;
+    protected renderRow(row: T, index: number): lit_html.TemplateResult<1>;
+    protected renderBodyContents(): lit_html.TemplateResult<1>;
+    protected renderFooter(): lit_html.TemplateResult<1> | typeof nothing;
+    protected render(): lit_html.TemplateResult<1>;
     protected updated(changedProperties: PropertyValues<YatlTable<T>>): void;
     disconnectedCallback(): void;
     /**

package/dist/index.d.ts

@@ -1,5 +1,6 @@
+import * as lit_html from 'lit-html';
 import * as lit from 'lit';
-import { LitElement, TemplateResult, nothing, PropertyValues } from 'lit';
+import { LitElement, nothing, PropertyValues } from 'lit';
 
 type NestedKeyOf<ObjectType> = ObjectType extends object ? {
     [Key in keyof ObjectType & (string | number)]: NonNullable<ObjectType[Key]> extends unknown[] ? `${Key}` : NonNullable<ObjectType[Key]> extends object ? // Recurse with the non-nullable type
@@ -622,16 +623,16 @@ declare class YatlTable<T extends object = UnspecifiedRecord> extends LitElement
      * @param index - The original index of the row to delete.
      */
     deleteRow(index: number): void;
-    protected renderColumnSortIcon(column: DisplayColumnOptions<T>, state: ColumnState<T>): TemplateResult<1> | typeof nothing;
-    protected renderColumnResizer(column: DisplayColumnOptions<T>, _state: ColumnState<T>): TemplateResult<1> | typeof nothing;
-    protected renderHeaderCell(field: NestedKeyOf<T>): TemplateResult<1> | typeof nothing;
-    protected renderHeader(): TemplateResult<1>;
+    protected renderColumnSortIcon(column: DisplayColumnOptions<T>, state: ColumnState<T>): lit_html.TemplateResult<1> | typeof nothing;
+    protected renderColumnResizer(column: DisplayColumnOptions<T>, _state: ColumnState<T>): lit_html.TemplateResult<1> | typeof nothing;
+    protected renderHeaderCell(field: NestedKeyOf<T>): lit_html.TemplateResult<1> | typeof nothing;
+    protected renderHeader(): lit_html.TemplateResult<1>;
     protected renderCellContents(value: unknown, column: DisplayColumnOptions<T>, row: T): unknown;
-    protected renderCell(field: NestedKeyOf<T>, row: T): TemplateResult<1> | typeof nothing | undefined;
-    protected renderRow(row: T, index: number): TemplateResult<1>;
-    protected renderBody(): TemplateResult<1>;
-    protected renderFooter(): TemplateResult<1> | typeof nothing;
-    protected render(): TemplateResult<1>;
+    protected renderCell(field: NestedKeyOf<T>, row: T): lit_html.TemplateResult<1> | typeof nothing | undefined;
+    protected renderRow(row: T, index: number): lit_html.TemplateResult<1>;
+    protected renderBodyContents(): lit_html.TemplateResult<1>;
+    protected renderFooter(): lit_html.TemplateResult<1> | typeof nothing;
+    protected render(): lit_html.TemplateResult<1>;
     protected updated(changedProperties: PropertyValues<YatlTable<T>>): void;
     disconnectedCallback(): void;
     /**

package/dist/index.js

@@ -240,12 +240,12 @@ var import_class_map = require("lit/directives/class-map.js");
 var import_if_defined = require("lit/directives/if-defined.js");
 var import_repeat = require("lit/directives/repeat.js");
 var import_style_map = require("lit/directives/style-map.js");
-var import_virtualizer = require("@lit-labs/virtualizer");
+var import_virtualize = require("@lit-labs/virtualizer/virtualize.js");
 
 // src/yatl-table.styles.ts
 var import_lit2 = require("lit");
 var yatl_table_styles_default = import_lit2.css`
-  /* Style declarations */
+  /* Theme declarations */
   :host {
     /* Typography */
     --yatl-font-family: var(
@@ -267,62 +267,106 @@ var yatl_table_styles_default = import_lit2.css`
     --yatl-cell-padding: var(--yatl-table-cell-padding, 10px 16px);
     --yatl-header-padding: var(--yatl-table-header-padding, 12px 16px);
 
-    /* Colors */
-    --yatl-bg: var(--yatl-table-bg, #ffffff);
-    --yatl-text: var(--yatl-table-text, #0f172a);
-    --yatl-text-muted: var(--yatl-table-text-muted, #64748b);
-    --yatl-border-color: var(--yatl-table-border-color, #e2e8f0);
+    /* Light colors */
+    --yatl-bg-light: var(--yatl-table-bg-light, #ffffff);
+    --yatl-text-light: var(--yatl-table-text-light, #0f172a);
+    --yatl-text-muted-light: var(--yatl-table-text-muted-light, #64748b);
+    --yatl-border-color-light: var(--yatl-table-border-color-light, #e2e8f0);
+    --yatl-header-bg-light: var(
+      --yatl-table-header-bg-light,
+      color-mix(in srgb, black 5%, var(--yatl-bg))
+    );
+    --yatl-header-text-light: var(--yatl-table-header-text-light, #475569);
+    --yatl-header-drop-bg-light: var(
+      --yatl-table-drop-bg-light,
+      color-mix(in srgb, black 5%, transparent)
+    );
+    --yatl-row-hover-bg-light: var(
+      --yatl-table-row-hover-bg-light,
+      color-mix(in srgb, black 5%, transparent)
+    );
+    --yatl-row-selected-bg-light: var(
+      --yatl-table-row-selected-bg-light,
+      color-mix(in srgb, black 20%, transparent)
+    );
 
-    --yatl-header-bg: var(--yatl-table-header-bg, #f8fafc);
-    --yatl-header-text: var(--yatl-table-header-text, #475569);
+    /* Dark colors */
+    --yatl-bg-dark: var(--yatl-table-bg-dark, #101219);
+    --yatl-text-dark: var(--yatl-table-text-dark, #f1f5f9);
+    --yatl-text-muted-dark: var(--yatl-table-text-muted-dark, #94a3b8);
+    --yatl-border-color-dark: var(--yatl-table-border-color-dark, #1a1b1e);
+    --yatl-header-bg-dark: var(
+      --yatl-table-header-bg-dark,
+      color-mix(in srgb, white 5%, var(--yatl-bg))
+    );
+    --yatl-header-text-dark: var(--yatl-table-header-text-dark, #cbd5e1);
+    --yatl-header-drop-bg-dark: var(
+      --yatl-table-drop-bg-dark,
+      color-mix(in srgb, white 5%, transparent)
+    );
+    --yatl-row-hover-bg-dark: var(
+      --yatl-table-row-hover-bg-dark,
+      color-mix(in srgb, white 5%, transparent)
+    );
+    --yatl-row-selected-bg-dark: var(
+      --yatl-table-row-selected-bg-dark,
+      color-mix(in srgb, white 20%, transparent)
+    );
 
-    --yatl-row-hover-bg: var(--yatl-table-row-hover-bg, #f1f5f9);
-    --yatl-row-selected-bg: var(--yatl-table-row-selected-bg, #e0f2fe);
+    /* Applied colors */
+    --yatl-bg: var(
+      --yatl-table-bg,
+      light-dark(var(--yatl-bg-light), var(--yatl-bg-dark))
+    );
+    --yatl-text: var(
+      --yatl-table-text,
+      light-dark(var(--yatl-text-light), var(--yatl-text-dark))
+    );
+    --yatl-text-muted: var(
+      --yatl-table-text-muted,
+      light-dark(var(--yatl-text-muted-light), var(--yatl-text-muted-dark))
+    );
+    --yatl-border-color: var(
+      --yatl-table-border-color,
+      light-dark(var(--yatl-border-color-light), var(--yatl-border-color-dark))
+    );
+    --yatl-header-bg: var(
+      --yatl-table-header-bg,
+      light-dark(var(--yatl-header-bg-light), var(--yatl-header-bg-dark))
+    );
+    --yatl-header-text: var(
+      --yatl-table-header,
+      light-dark(var(--yatl-header-text-light), var(--yatl-header-text-dark))
+    );
+    --yatl-header-drop-bg: var(
+      --yatl-table-header-drop-bg,
+      light-dark(
+        var(--yatl-header-drop-bg-light),
+        var(--yatl-header-drop-bg-dark)
+      )
+    );
+    --yatl-row-hover-bg: var(
+      --yatl-table-row-hover-bg,
+      light-dark(var(--yatl-row-hover-bg-light), var(--yatl-row-hover-bg-dark))
+    );
+    --yatl-row-selected-bg: var(
+      --yatl-table-row-selected-bg,
+      light-dark(
+        var(--yatl-row-selected-bg-light),
+        var(--yatl-row-selected-bg-dark)
+      )
+    );
 
     /* Resize grab handle width */
-    --yatl-resizer-width: 10px;
+    --yatl-resizer-width: var(--yatl-table-resizer-width, 10px);
     /* z-index for the header */
     --header-z-index: 2;
-    /* Drop target background color */
-    --header-drop-color: rgba(255, 255, 255, 0.1);
 
     font-family: var(--yatl-font-family);
     font-size: var(--yatl-font-size);
     color: var(--yatl-text);
   }
 
-  :host(.dark) {
-    --yatl-table-bg: #1e293b;
-    --yatl-table-text: #f1f5f9;
-    --yatl-table-text-muted: #94a3b8;
-    --yatl-table-border-color: #334155;
-
-    --yatl-table-header-bg: #0f172a;
-    --yatl-table-header-text: #cbd5e1;
-
-    --yatl-table-row-hover-bg: #334155;
-    --yatl-table-row-selected-bg: #1e3a8a;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :host {
-      --yatl-bg: var(--yatl-table-bg, #1e293b);
-      --yatl-text: var(--yatl-table-text, #f1f5f9);
-      --yatl-text-muted: var(--yatl-table-text-muted, #94a3b8);
-      --yatl-border-color: var(--yatl-table-border-color, #334155);
-
-      --yatl-header-bg: var(--yatl-table-header-bg, #0f172a);
-      --yatl-header-text: var(--yatl-table-header-text, #cbd5e1);
-
-      --yatl-row-hover-bg: var(--yatl-table-row-hover-bg, #334155);
-      --yatl-row-selected-bg: var(--yatl-table-row-selected-bg, #1e3a8a);
-    }
-  }
-
-  :host {
-    font-family: system-ui, sans-serif;
-  }
-
   .table {
     background-color: var(--yatl-bg);
     border: 1px solid var(--yatl-border-color);
@@ -361,7 +405,7 @@ var yatl_table_styles_default = import_lit2.css`
 
   .header .cell:hover::after,
   .row:not(.header):hover::after {
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: var(--yatl-row-hover-bg);
   }
 
   .cell {
@@ -394,7 +438,7 @@ var yatl_table_styles_default = import_lit2.css`
   }
 
   .drop-indicator {
-    background: rgba(0, 0, 0, 0.4);
+    background: var(--yatl-header-drop-bg);
   }
 
   .message {
@@ -542,6 +586,10 @@ var yatl_table_styles_default = import_lit2.css`
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  .body {
+    height: 100%;
+  }
 `;
 
 // src/yatl-table.ts
@@ -1364,28 +1412,28 @@ var YatlTable = class extends import_lit3.LitElement {
       </div>
     `;
   }
-  renderBody() {
+  renderBodyContents() {
     if (!this.hasVisibleColumn()) {
       return import_lit3.html`
         <div part="message" class="message">No visible columns.</div>
       `;
     }
     if (this.data.length === 0) {
-      return import_lit3.html`<div part="message" class="message">
-        ${this.emptyMessage}
-      </div>`;
+      return import_lit3.html`
+        <div part="message" class="message">${this.emptyMessage}</div>
+      `;
     }
     if (this.filteredData.length === 0) {
-      return import_lit3.html`<div part="message" class="message">
-        ${this.noResultsMessage}
-      </div>`;
+      return import_lit3.html`
+        <div part="message" class="message">${this.noResultsMessage}</div>
+      `;
     }
     if (this.enableVirtualScroll) {
       return import_lit3.html`
-        <lit-virtualizer
-          .items=${this.filteredData}
-          .renderItem=${(item, index) => this.renderRow(item, index)}
-        ></lit-virtualizer>
+        ${(0, import_virtualize.virtualize)({
+        items: this.filteredData,
+        renderItem: (item, index) => this.renderRow(item, index)
+      })}
       `;
     }
     return import_lit3.html`
@@ -1430,7 +1478,10 @@ var YatlTable = class extends import_lit3.LitElement {
         style=${(0, import_style_map.styleMap)({ "--grid-template": gridTemplate })}
       >
         ${this.renderHeader()}
-        <slot> ${this.renderBody()} ${this.renderFooter()} </slot>
+        <div class="body">
+          <slot> ${this.renderBodyContents()}</slot>
+        </div>
+        ${this.renderFooter()}
       </div>
     `;
   }