clean up table

Author: SuaYoo

frontend/src/components/ui/data-grid/controllers/rows.ts

@@ -27,7 +27,7 @@ export class DataGridRowsController implements ReactiveController {
 
   #prevItems?: GridItem[];
 
-  public rows: GridRows = new Map<GridRowId, GridItem>();
+  public rows: GridRows<GridItem> = new Map<GridRowId, GridItem>();
 
   constructor(host: ReactiveControllerHost & EventTarget) {
     this.#host = host;
@@ -46,7 +46,7 @@ export class DataGridRowsController implements ReactiveController {
     }
   }
 
-  private setRowsFromItems(items: GridItem[]) {
+  private setRowsFromItems<T extends GridItem = GridItem>(items: T[]) {
     const rowKey = this.#host.rowKey;
 
     this.rows = new Map(
@@ -61,15 +61,20 @@ export class DataGridRowsController implements ReactiveController {
     );
   }
 
-  public setItems(items: GridItem[]) {
+  public setItems<T extends GridItem = GridItem>(items: T[]) {
     if (!this.#prevItems || items !== this.#prevItems) {
       this.setRowsFromItems(items);
 
+      // this.#host.requestUpdate();
+
       this.#prevItems = items;
     }
   }
 
-  public addRows(defaultItem: GridItem | EmptyObject = {}, count = 1) {
+  public addRows<T extends GridItem = GridItem>(
+    defaultItem: T | EmptyObject = {},
+    count = 1,
+  ) {
     for (let i = 0; i < count; i++) {
       const id = nanoid();
 

frontend/src/components/ui/data-grid/data-grid-cell.ts

@@ -134,8 +134,13 @@ export class DataGridCell extends TableCell {
               ?required=${col.required}
               hoist
             >
-              <!-- TODO Cache -->
-              ${(col as GridColumnSelectType).renderSelectOptions()}
+              ${(col as GridColumnSelectType).selectOptions.map(
+                (opt) => html`
+                  <sl-option value=${opt.value}>
+                    ${opt.label ?? opt.value}
+                  </sl-option>
+                `,
+              )}
             </sl-select>
           </div>
         `;

frontend/src/components/ui/data-grid/data-grid-row.ts

@@ -182,7 +182,7 @@ export class DataGridRow extends TableRow {
           class=${clsx(tw`border-l p-0`, cellStyle)}
           @keydown=${this.onKeydown}
         >
-          <sl-tooltip content=${msg("Remove")}>
+          <sl-tooltip content=${msg("Remove")} hoist>
             <sl-icon-button
               class="p-1 text-base hover:text-danger"
               name="trash3"

frontend/src/components/ui/data-grid/data-grid.ts

@@ -4,12 +4,12 @@ import clsx from "clsx";
 import { css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { repeat } from "lit/directives/repeat.js";
 import { nanoid } from "nanoid";
 import type { EmptyObject } from "type-fest";
 
 import { DataGridRowsController } from "./controllers/rows";
 import type { DataGridRow, RowRemoveEventDetail } from "./data-grid-row";
+import { renderRows } from "./renderRows";
 import type { GridColumn, GridItem } from "./types";
 
 import { TailwindElement } from "@/classes/TailwindElement";
@@ -185,7 +185,7 @@ export class DataGrid extends TailwindElement {
           )}
           ${this.removeRows
             ? html`<btrix-table-header-cell>
-                <span class="sr-only">${msg("Remove")}</span>
+                <span class="sr-only">${msg("Remove row")}</span>
               </btrix-table-header-cell>`
             : nothing}
         </btrix-table-head>
@@ -257,10 +257,9 @@ export class DataGrid extends TailwindElement {
     return html`
       <slot name="rows" class="contents" @slotchange=${this.onRowSlotChange}>
         ${this.items
-          ? repeat(
+          ? renderRows(
               this.rowsController.rows,
-              ([id]) => id,
-              ([id, item]) => html`
+              ({ id, item }) => html`
                 <btrix-data-grid-row
                   key=${id}
                   .item=${item}

frontend/src/components/ui/data-grid/renderRows.ts

@@ -0,0 +1,15 @@
+import { type TemplateResult } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+
+import type { GridItem, GridRowId, GridRows } from "./types";
+
+export function renderRows<T = GridItem>(
+  rows: GridRows<GridItem>,
+  renderRow: ({ id, item }: { id: GridRowId; item: T }) => TemplateResult,
+) {
+  return repeat(
+    rows,
+    ([id]) => id,
+    ([id, item]) => renderRow({ id, item: item as T }),
+  );
+}

frontend/src/components/ui/data-grid/types.ts

@@ -16,7 +16,10 @@ export enum GridColumnType {
 
 export type GridColumnSelectType = {
   inputType: GridColumnType.Select;
-  renderSelectOptions: () => TemplateResult;
+  selectOptions: {
+    value: string;
+    label?: string | TemplateResult;
+  }[];
 };
 
 export type GridColumn<T = string> = {
@@ -39,4 +42,4 @@ export type GridColumn<T = string> = {
 const rowIdSchema = z.string().nanoid();
 export type GridRowId = z.infer<typeof rowIdSchema>;
 
-export interface GridRows extends Map<GridRowId, GridItem> {}
+export interface GridRows<T> extends Map<GridRowId, T> {}

frontend/src/stories/components/DataGrid.stories.ts

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
-import { repeat } from "lit/directives/repeat.js";
 
 import { defaultArgs, renderComponent, type RenderProps } from "./DataGrid";
 import {
@@ -9,6 +8,7 @@ import {
 } from "./decorators/dataGridDecorator";
 
 import { DataGridRowsController } from "@/components/ui/data-grid/controllers/rows";
+import { renderRows } from "@/components/ui/data-grid/renderRows";
 import { GridColumnType } from "@/components/ui/data-grid/types";
 
 const meta = {
@@ -149,6 +149,7 @@ export const EditCells: Story = {
  *
  * A few helpers are included to make managing rows easier:
  * - `DataGridController` to add and remove slotted rows
+ * - `renderRows` to render `<btrix-data-grid-row>`
  * - `serializeDeep` to parse form values
  *
  * Open console logs to view the form value submitted in this example.
@@ -180,7 +181,7 @@ export const FormControl: Story = {
           return html`
             <btrix-syntax-input
               name="selector"
-              class="flex-1 [--sl-input-border-color:transparent] [--sl-input-border-radius-medium:0]"
+              class="flex-1 [--sl-input-border-radius-medium:0] [--sl-input-border-color:transparent]"
               value=${item.selector || ""}
               language="css"
             ></btrix-syntax-input>
@@ -199,12 +200,14 @@ export const FormControl: Story = {
         label: "Status",
         editable: true,
         inputType: GridColumnType.Select,
-        renderSelectOptions() {
-          return html`
-            <sl-option value="Pending">Pending</sl-option>
-            <sl-option value="Approved">Approved</sl-option>
-          `;
-        },
+        selectOptions: [
+          {
+            value: "Pending",
+          },
+          {
+            value: "Approved",
+          },
+        ],
       },
     ],
     items: [
@@ -244,10 +247,9 @@ export const FormControl: Story = {
         removeRows
         editCells
       >
-        ${repeat(
+        ${renderRows(
           rows,
-          ([id]) => id,
-          ([id, item]) => html`
+          ({ id, item }) => html`
             <btrix-data-grid-row
               slot="rows"
               name="${formControlName}"