@inglorious/web 2.0.0 → 2.1.0

package/README.md

@@ -164,6 +164,77 @@ mount(store, renderApp, document.getElementById("root"))
 
 The router automatically intercepts clicks on local `<a>` tags and handles browser back/forward events, keeping your UI in sync with the URL.
 
+### 3. Programmatic Navigation
+
+To navigate from your JavaScript code, dispatch a `navigate` event.
+
+```javascript
+api.notify("navigate", "/users/456")
+
+// Or navigate back in history
+api.notify("navigate", -1)
+```
+
+---
+
+## Table
+
+`@inglorious/web` includes a `table` type for displaying data in a tabular format. It's designed to be flexible and customizable.
+
+### 1. Add the `table` type
+
+To use it, import the `table` type and its CSS, then create an entity for your table. You must define the `data` to be displayed and can optionally provide `columns` definitions.
+
+```javascript
+// In your entity definition file
+import { table } from "@inglorious/web"
+
+// Import base styles and a theme. You can create your own theme.
+import "@inglorious/web/table/base.css"
+import "@inglorious/web/table/theme.css"
+
+export default {
+  ...table,
+  data: [
+    { id: 1, name: "Product A", price: 100 },
+    { id: 2, name: "Product B", price: 150 },
+  ],
+  columns: [
+    { id: "id", label: "ID" },
+    { id: "name", label: "Product Name" },
+    { id: "price", label: "Price" },
+  ],
+}
+```
+
+### 2. Custom Rendering
+
+You can customize how data is rendered in the table cells by overriding the `renderValue` method. This is useful for formatting values or displaying custom content.
+
+The example below from `examples/apps/web-table/src/product-table/product-table.js` shows how to format values based on a `formatter` property in the column definition.
+
+```javascript
+import { table } from "@inglorious/web"
+import { format } from "date-fns"
+
+const formatters = {
+  isAvailable: (val) => (val ? "✔️" : "❌"),
+  createdAt: (val) => format(val, "dd/MM/yyyy HH:mm"),
+}
+
+export const productTable = {
+  ...table,
+
+  renderValue(value, column) {
+    return formatters[column.formatter]?.(value) ?? value
+  },
+}
+```
+
+### 3. Theming
+
+The table comes with a base stylesheet (`@inglorious/web/table/base.css`) and a default theme (`@inglorious/web/table/theme.css`). You can create your own theme by creating a new CSS file and styling the table elements to match your application's design.
+
 ---
 
 ## Forms
@@ -315,17 +386,6 @@ const store = createStore({ types, entities })
 
 See `src/list.js` in the package for the implementation details and the `examples/apps/web-list` demo for a complete working example. In the demo the `productList` type extends the `list` type and provides `renderItem(item, index)` to render each visible item — see `examples/apps/web-list/src/product-list/product-list.js`.
 
-### 3. Programmatic Navigation
-
-To navigate from your JavaScript code, dispatch a `navigate` event.
-
-```javascript
-api.notify("navigate", "/users/456")
-
-// Or navigate back in history
-api.notify("navigate", -1)
-```
-
 ## API Reference
 
 **`mount(store, renderFn, element)`**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/web",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A new web framework that leverages the power of the Inglorious Store combined with the performance and simplicity of lit-html.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -25,7 +25,9 @@
     ".": {
       "types": "./types/index.d.ts",
       "import": "./src/index.js"
-    }
+    },
+    "./table/base.css": "./src/table/base.css",
+    "./table/theme.css": "./src/table/theme.css"
   },
   "files": [
     "src",
@@ -36,7 +38,7 @@
   },
   "dependencies": {
     "lit-html": "^3.3.1",
-    "@inglorious/store": "7.0.0",
+    "@inglorious/store": "7.1.0",
     "@inglorious/utils": "3.7.0"
   },
   "devDependencies": {

package/src/index.js

@@ -2,9 +2,12 @@ export { form, getFieldError, getFieldValue, isFieldTouched } from "./form.js"
 export { list } from "./list.js"
 export { mount } from "./mount.js"
 export { router } from "./router.js"
+export { table } from "./table.js"
 export { createStore } from "@inglorious/store"
 export { createDevtools } from "@inglorious/store/client/devtools.js"
 export { createSelector } from "@inglorious/store/select.js"
 export { html, render, svg } from "lit-html"
+export { choose } from "lit-html/directives/choose.js"
 export { classMap } from "lit-html/directives/class-map.js"
+export { ref } from "lit-html/directives/ref.js"
 export { repeat } from "lit-html/directives/repeat.js"

package/src/list.js

@@ -2,6 +2,7 @@ import { html } from "lit-html"
 import { ref } from "lit-html/directives/ref.js"
 
 const LIST_START = 0
+const PRETTY_INDEX = 1
 
 export const list = {
   init(entity) {
@@ -12,11 +13,45 @@ export const list = {
     resetList(entity)
   },
 
+  scroll(entity, containerEl) {
+    const scrollTop = containerEl.scrollTop
+    const { items, bufferSize, itemHeight, estimatedHeight, viewportHeight } =
+      entity
+    const height = itemHeight || estimatedHeight
+
+    const start = Math.max(
+      LIST_START,
+      Math.floor(scrollTop / height) - bufferSize,
+    )
+    const visibleCount = Math.ceil(viewportHeight / height)
+    const end = Math.min(start + visibleCount + bufferSize, items.length)
+
+    if (
+      entity.visibleRange.start === start &&
+      entity.visibleRange.end === end
+    ) {
+      return
+    }
+
+    entity.scrollTop = scrollTop
+    entity.visibleRange = { start, end }
+  },
+
+  mount(entity, containerEl) {
+    const firstItem = containerEl.querySelector("[data-index]")
+    if (!firstItem) return
+
+    entity.itemHeight = firstItem.offsetHeight
+    entity.visibleRange = {
+      start: 0,
+      end: Math.ceil(entity.viewportHeight / entity.itemHeight),
+    }
+  },
+
   render(entity, api) {
     const { items, visibleRange, viewportHeight, itemHeight, estimatedHeight } =
       entity
-    const types = api.getTypes()
-    const type = types[entity.type]
+    const type = api.getType(entity.type)
 
     if (!items) {
       console.warn(`list entity ${entity.id} needs 'items'`)
@@ -39,7 +74,7 @@ export const list = {
         ${ref((el) => {
           if (el && !itemHeight) {
             queueMicrotask(() => {
-              api.notify(`#${entity.id}:measureHeight`, el)
+              api.notify(`#${entity.id}:mount`, el)
             })
           }
         })}
@@ -63,35 +98,8 @@ export const list = {
     `
   },
 
-  scroll(entity, containerEl) {
-    const scrollTop = containerEl.scrollTop
-    const { items, bufferSize, itemHeight, estimatedHeight, viewportHeight } =
-      entity
-    const height = itemHeight || estimatedHeight
-
-    const start = Math.max(
-      LIST_START,
-      Math.floor(scrollTop / height) - bufferSize,
-    )
-    const visibleCount = Math.ceil(viewportHeight / height)
-    const end = Math.min(start + visibleCount + bufferSize, items.length)
-
-    if (
-      entity.visibleRange.start === start &&
-      entity.visibleRange.end === end
-    ) {
-      return
-    }
-
-    entity.scrollTop = scrollTop
-    entity.visibleRange = { start, end }
-  },
-
-  measureHeight(entity, containerEl) {
-    const firstItem = containerEl.querySelector("[data-index]")
-    if (!firstItem) return
-
-    entity.itemHeight = firstItem.offsetHeight
+  renderItem(item, index) {
+    return html`<div>${index + PRETTY_INDEX}. ${JSON.stringify(item)}</div>`
   },
 }
 

package/src/mount.js

@@ -14,7 +14,6 @@ export function mount(store, renderFn, element) {
     /** @param {string} id */
     render(id, options = {}) {
       const entity = api.getEntity(id)
-      const types = api.getTypes()
 
       if (!entity) {
         const { allowType } = options
@@ -23,7 +22,7 @@ export function mount(store, renderFn, element) {
         }
 
         // No entity with this ID, try static type
-        const type = types[id]
+        const type = api.getType(id)
         if (!type?.render) {
           console.warn(`No entity or type found: ${id}`)
           return html`<div>Not found: ${id}</div>`
@@ -32,7 +31,7 @@ export function mount(store, renderFn, element) {
       }
 
       // Entity exists, render it
-      const type = types[entity.type]
+      const type = api.getType(entity.type)
       if (!type?.render) {
         console.warn(`No render function for type: ${entity.type}`)
         return html`<div>No renderer for ${entity.type}</div>`

package/src/table/base.css

@@ -0,0 +1,34 @@
+.iw-table {
+  user-select: none;
+
+  .iw-table-header {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .iw-table-header-row {
+    display: flex;
+  }
+
+  .iw-table-header-column {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .iw-table-filter-input,
+  .iw-table-filter-select {
+    width: 100%;
+  }
+
+  .iw-table-searchbar {
+    width: 100%;
+  }
+
+  .iw-table-row {
+    display: flex;
+  }
+
+  .iw-table-footer-row {
+    display: flex;
+  }
+}

package/src/table/filters/date.js

@@ -0,0 +1,42 @@
+import { html } from "@inglorious/web"
+
+const INPUT_TYPE = {
+  date: "date",
+  time: "time",
+  datetime: "datetime-local",
+}
+
+export const dateFilter = {
+  render(entity, column, api) {
+    const filter = entity.filters[column.id] ?? {}
+
+    return html`<input
+        name=${`${column.id}Min`}
+        type=${INPUT_TYPE[column.filter.type]}
+        value=${entity.filters[column.id]}
+        @input=${(event) => {
+          const value = event.target.value
+          const formattedValue = value ? new Date(value).getTime() : null
+
+          api.notify(`#${entity.id}:filterChange`, {
+            columnId: column.id,
+            value: { ...filter, min: formattedValue },
+          })
+        }}
+      />
+      <input
+        name=${`${column.id}Max`}
+        type=${INPUT_TYPE[column.filter.type]}
+        value=${entity.filters[column.id]}
+        @input=${(event) => {
+          const value = event.target.value
+          const formattedValue = value ? new Date(value).getTime() : null
+
+          api.notify(`#${entity.id}:filterChange`, {
+            columnId: column.id,
+            value: { ...filter, max: formattedValue },
+          })
+        }}
+      />`
+  },
+}

package/src/table/filters/number.js

@@ -0,0 +1,22 @@
+import { html } from "@inglorious/web"
+
+export const numberFilter = {
+  render(entity, column, api) {
+    return html`<input
+      name=${column.id}
+      type="number"
+      placeholder=${column.filter.placeholder ?? "="}
+      value=${entity.filters[column.id]}
+      @input=${(event) => {
+        const value = event.target.value
+        const formattedValue = value ? Number(value) : null
+
+        api.notify(`#${entity.id}:filterChange`, {
+          columnId: column.id,
+          value: formattedValue,
+        })
+      }}
+      class="iw-table-cell-number"
+    />`
+  },
+}

package/src/table/filters/range.js

@@ -0,0 +1,42 @@
+import { html } from "@inglorious/web"
+
+export const rangeFilter = {
+  render(entity, column, api) {
+    const filter = entity.filters[column.id] ?? {}
+
+    return html`<div class="row">
+      <input
+        name=${`${column.id}Min`}
+        type="number"
+        placeholder=${column.filter.placeholder ?? "≥"}
+        value=${filter.min}
+        @input=${(event) => {
+          const value = event.target.value
+          const formattedValue = value ? Number(value) : null
+
+          api.notify(`#${entity.id}:filterChange`, {
+            columnId: column.id,
+            value: { ...filter, min: formattedValue },
+          })
+        }}
+        class="iw-table-cell-number"
+      />
+      <input
+        name=${`${column.id}Max`}
+        type="number"
+        placeholder=${column.filter.placeholder ?? "≤"}
+        value=${filter.max}
+        @input=${(event) => {
+          const value = event.target.value
+          const formattedValue = value ? Number(value) : null
+
+          api.notify(`#${entity.id}:filterChange`, {
+            columnId: column.id,
+            value: { ...filter, max: formattedValue },
+          })
+        }}
+        class="iw-table-cell-number"
+      />
+    </div>`
+  },
+}

package/src/table/filters/select.js

@@ -0,0 +1,34 @@
+import { html } from "@inglorious/web"
+
+export const selectFilter = {
+  render(entity, column, api) {
+    return html`<select
+      name=${column.id}
+      ?multiple=${column.filter.isMultiple}
+      autocomplete="off"
+      value=${entity.filters[column.id]}
+      @change=${(event) => {
+        const value = event.target.value
+        const formattedValue = value ? format(value, column.type) : null
+
+        api.notify(`#${entity.id}:filterChange`, {
+          columnId: column.id,
+          value: formattedValue,
+        })
+      }}
+    >
+      ${column.filter.options.map(
+        (option) => html`<option value=${option}>${option}</option>`,
+      )}
+    </select>`
+  },
+}
+
+function format(value, type) {
+  if (type === "number") return Number(value)
+  if (type === "boolean")
+    return value === "true" ? true : value === "false" ? false : null
+  if (["date", "time", "datetime"].includes(type))
+    return new Date(value).getTime()
+  return value
+}

package/src/table/filters/text.js

@@ -0,0 +1,22 @@
+import { html } from "@inglorious/web"
+
+export const textFilter = {
+  render(entity, column, api) {
+    return html`<input
+      name=${column.id}
+      type="text"
+      placeholder=${column.filter.placeholder ?? "Contains..."}
+      autocomplete="off"
+      value=${entity.filters[column.id]}
+      @input=${(event) => {
+        const value = event.target.value
+        const formattedValue = value || null
+
+        api.notify(`#${entity.id}:filterChange`, {
+          columnId: column.id,
+          value: formattedValue,
+        })
+      }}
+    />`
+  },
+}

package/src/table/filters.js

@@ -0,0 +1,24 @@
+import { choose, html } from "@inglorious/web"
+
+import { dateFilter } from "./filters/date"
+import { numberFilter } from "./filters/number"
+import { rangeFilter } from "./filters/range"
+import { selectFilter } from "./filters/select"
+import { textFilter } from "./filters/text"
+
+export const filters = {
+  render(entity, column, api) {
+    return html`${choose(
+      column.filter.type,
+      [
+        ["number", () => numberFilter.render(entity, column, api)],
+        ["range", () => rangeFilter.render(entity, column, api)],
+        ["select", () => selectFilter.render(entity, column, api)],
+        ["date", () => dateFilter.render(entity, column, api)],
+        ["time", () => dateFilter.render(entity, column, api)],
+        ["datetime", () => dateFilter.render(entity, column, api)],
+      ],
+      () => textFilter.render(entity, column, api),
+    )}`
+  },
+}

package/src/table/logic.js

@@ -0,0 +1,401 @@
+/* eslint-disable no-magic-numbers */
+
+export const logic = {
+  init(entity) {
+    initTable(entity)
+  },
+
+  create(entity) {
+    initTable(entity)
+  },
+
+  sortChange(entity, columnId) {
+    const column = entity.columns.find((c) => c.id === columnId)
+    if (!column?.isSortable) return
+
+    const existingIndex = entity.sorts.findIndex((s) => s.column === columnId)
+
+    if (existingIndex !== -1) {
+      // Toggle direction
+      const existing = entity.sorts[existingIndex]
+      if (existing.direction === "asc") {
+        existing.direction = "desc"
+      } else {
+        // Remove from sort if going from desc back to nothing
+        entity.sorts.splice(existingIndex, 1)
+      }
+    } else {
+      // Add new sort
+      entity.sorts.push({ column: columnId, direction: "asc" })
+    }
+
+    if (entity.pagination) {
+      entity.pagination.page = 0
+    }
+  },
+
+  sortsClear(entity) {
+    entity.sorts = []
+  },
+
+  filterChange(entity, { columnId, value }) {
+    if (value == null || value === "") {
+      delete entity.filters[columnId]
+    } else {
+      entity.filters[columnId] = value
+    }
+
+    // Reset to first page when filtering
+    if (entity.pagination) {
+      entity.pagination.page = 0
+    }
+  },
+
+  filtersClear(entity) {
+    entity.filters = {}
+    if (entity.pagination) {
+      entity.pagination.page = 0
+    }
+  },
+
+  searchChange(entity, search) {
+    entity.search.value = search
+  },
+
+  pageChange(entity, page) {
+    if (!entity.pagination) return
+
+    const totalPages = Math.ceil(
+      getTotalRows(entity) / entity.pagination.pageSize,
+    )
+    entity.pagination.page = Math.max(0, Math.min(page, totalPages - 1))
+  },
+
+  pageNext(entity) {
+    if (!entity.pagination) return
+    const totalPages = Math.ceil(
+      getTotalRows(entity) / entity.pagination.pageSize,
+    )
+    entity.pagination.page = Math.min(
+      entity.pagination.page + 1,
+      totalPages - 1,
+    )
+  },
+
+  pagePrev(entity) {
+    if (!entity.pagination) return
+    entity.pagination.page = Math.max(entity.pagination.page - 1, 0)
+  },
+
+  pageSizeChange(entity, pageSize) {
+    if (!entity.pagination) return
+
+    entity.pagination.pageSize = pageSize
+    entity.pagination.page = 0
+  },
+
+  rowSelect(entity, rowId) {
+    if (!entity.isMultiSelect) {
+      entity.selection = []
+    }
+
+    if (!entity.selection.includes(rowId)) {
+      entity.selection.push(rowId)
+    }
+  },
+
+  rowDeselect(entity, rowId) {
+    const index = entity.selection.indexOf(rowId)
+    if (index !== -1) {
+      entity.selection.splice(index, 1)
+    }
+  },
+
+  rowToggle(entity, rowId) {
+    const index = entity.selection.indexOf(rowId)
+
+    if (index === -1) {
+      if (!entity.isMultiSelect) {
+        entity.selection = [rowId] // Replace entirely
+      } else {
+        entity.selection.push(rowId)
+      }
+    } else {
+      entity.selection.splice(index, 1)
+    }
+  },
+
+  rowsToggleAll(entity) {
+    const rows = getRows(entity)
+    const allSelected = rows.every((row) => entity.selection.includes(row.id))
+
+    if (allSelected) {
+      // Deselect all visible
+      rows.forEach((row) => {
+        const index = entity.selection.indexOf(row.id)
+        if (index !== -1) entity.selection.splice(index, 1)
+      })
+    } else {
+      // Select all visible
+      rows.forEach((row) => {
+        if (!entity.selection.includes(row.id)) {
+          entity.selection.push(row.id)
+        }
+      })
+    }
+  },
+
+  rowsSelectAll(entity) {
+    const rows = getRows(entity)
+    rows.forEach((row) => {
+      if (!entity.selection.includes(row.id)) {
+        entity.selection.push(row.id)
+      }
+    })
+  },
+
+  selectionClear(entity) {
+    entity.selection.length = 0
+  },
+}
+
+// Helper functions outside the type (like form helpers)
+
+export function getRows(entity) {
+  let rows = entity.data
+  rows = applyFilters(entity, rows)
+  rows = applySearch(entity, rows)
+  rows = applySorts(entity, rows)
+  rows = applyPagination(entity, rows)
+
+  return rows
+}
+
+export function getTotalRows(entity) {
+  let rows = entity.data
+  rows = applyFilters(entity, rows)
+  rows = applySearch(entity, rows)
+  return rows.length
+}
+
+export function getPaginationInfo(entity) {
+  if (!entity.pagination) return null
+
+  const totalRows = getTotalRows(entity)
+  const { page, pageSize } = entity.pagination
+  const totalPages = Math.ceil(totalRows / pageSize)
+  const start = page * pageSize
+  const end = Math.min((page + 1) * pageSize, totalRows)
+
+  return {
+    page,
+    pageSize,
+    totalPages,
+    totalRows,
+    start,
+    end,
+    hasNextPage: page < totalPages - 1,
+    hasPrevPage: page > 0,
+  }
+}
+
+export function getSortDirection(entity, columnId) {
+  const sort = entity.sorts.find((s) => s.column === columnId)
+  return sort?.direction || null
+}
+
+export function getSortIndex(entity, columnId) {
+  return entity.sorts.findIndex((s) => s.column === columnId)
+}
+
+export function getFilter(entity, columnId) {
+  return entity.filters[columnId]
+}
+
+export function isRowSelected(entity, rowId) {
+  return entity.selection.includes(rowId)
+}
+
+export function isAllSelected(entity) {
+  const rows = getRows(entity)
+  return rows.length && rows.every((row) => entity.selection.includes(row.id))
+}
+
+export function isSomeSelected(entity) {
+  const rows = getRows(entity)
+  const selectedCount = rows.filter((row) =>
+    entity.selection.includes(row.id),
+  ).length
+  return selectedCount && selectedCount < rows.length
+}
+
+function initTable(entity) {
+  entity.data ??= []
+
+  // Auto-generate columns from first data item if not provided
+  if (!entity.columns && entity.data.length) {
+    const [firstRow] = entity.data
+
+    entity.columns = Object.keys(firstRow).map((key) => {
+      const value = firstRow[key]
+      const type = getDefaultColumnType(value)
+      const filter = getDefaultColumnFilter(type)
+
+      return {
+        id: key,
+        title: capitalize(key),
+        type,
+        isSortable: false,
+        isFilterable: false,
+        filter,
+        width: getDefaultColumnWidth(filter.type),
+      }
+    })
+  } else {
+    entity.columns ??= []
+    entity.columns.forEach((column) => {
+      column.title ??= capitalize(column.id)
+      column.type ??= getDefaultColumnType()
+      column.filter ??= getDefaultColumnFilter(column.type)
+      column.width ??= getDefaultColumnWidth(column.filter.type)
+    })
+  }
+
+  // State
+  entity.sorts ??= []
+  entity.filters ??= {}
+  entity.search ??= null
+  if (entity.search) {
+    entity.search.value ??= ""
+  }
+  entity.selection ??= []
+
+  entity.pagination ??= null
+  if (entity.pagination) {
+    entity.pagination.page ??= 0
+  }
+}
+
+function getDefaultColumnType(value) {
+  if (typeof value === "number") return "number"
+  if (typeof value === "boolean") return "boolean"
+  if (value instanceof Date) return "date"
+  return "string"
+}
+
+function getDefaultColumnFilter(type) {
+  if (type === "number") return { type: "range" }
+  if (type === "boolean")
+    return { type: "select", options: [null, true, false] }
+  if (type === "date") return { type: "date" }
+  return { type: "text" }
+}
+
+function getDefaultColumnWidth(filterType) {
+  if (filterType === "number") return 100
+  if (filterType === "range") return 200
+  if (filterType === "select") return 70
+  if (filterType === "date") return 120
+  if (filterType === "time") return 120
+  if (filterType === "datetime") return 170
+  return 200
+}
+
+function applyFilters(entity, rows) {
+  if (!Object.keys(entity.filters).length) {
+    return rows
+  }
+
+  return rows.filter((row) => {
+    return Object.entries(entity.filters).every(([columnId, filterValue]) => {
+      const column = entity.columns.find((c) => c.id === columnId)
+      if (!column) return true
+
+      // Custom filter function
+      if (column.filterFn) {
+        return column.filterFn(row, filterValue)
+      }
+
+      // Default filters by type
+      const value = row[columnId]
+
+      if (["range", "date", "time", "datetime"].includes(column.filter.type)) {
+        const { min, max } = filterValue
+        if (min != null && value < min) return false
+        if (max != null && value > max) return false
+        return true
+      }
+
+      if (["number", "boolean", "select"].includes(column.filter.type)) {
+        return value === filterValue
+      }
+
+      // String filtering (case-insensitive contains)
+      return String(value)
+        .toLowerCase()
+        .includes(String(filterValue).toLowerCase())
+    })
+  })
+}
+
+function applySearch(entity, rows) {
+  if (!entity.search?.value) {
+    return rows
+  }
+
+  const searchLower = entity.search.value.toLowerCase()
+
+  return rows.filter((row) =>
+    entity.columns.some((column) => {
+      const value = row[column.id]
+      const formattedValue = column.format?.(value) ?? String(value)
+      return formattedValue.toLowerCase().includes(searchLower)
+    }),
+  )
+}
+
+function applySorts(entity, rows) {
+  if (!entity.sorts.length) {
+    return rows
+  }
+
+  return [...rows].sort((a, b) => {
+    for (const { column: columnId, direction } of entity.sorts) {
+      const column = entity.columns.find((c) => c.id === columnId)
+      let aVal = a[columnId]
+      let bVal = b[columnId]
+
+      // Custom sort function
+      if (column?.sortFn) {
+        const result =
+          direction === "asc" ? column.sortFn(a, b) : column.sortFn(b, a)
+        if (result !== 0) return result
+        continue
+      }
+
+      // Default sorting
+      if (aVal === bVal) continue
+      if (aVal == null) return 1
+      if (bVal == null) return -1
+
+      const comparison = aVal < bVal ? -1 : 1
+      return direction === "asc" ? comparison : -comparison
+    }
+    return 0
+  })
+}
+
+function applyPagination(entity, rows) {
+  if (!entity.pagination) {
+    return rows
+  }
+
+  const { page, pageSize } = entity.pagination
+  const start = page * pageSize
+  return rows.slice(start, start + pageSize)
+}
+
+function capitalize(str) {
+  const [firstChar, ...rest] = str
+  return [firstChar.toUpperCase(), ...rest].join("")
+}

package/src/table/rendering.js

@@ -0,0 +1,239 @@
+import { html } from "lit-html"
+import { ref } from "lit-html/directives/ref.js"
+
+import { filters } from "./filters"
+import { getPaginationInfo, getRows, getSortDirection } from "./logic"
+
+const DIVISOR = 2
+const FIRST_PAGE = 0
+const LAST_PAGE = 1
+const PRETTY_PAGE = 1
+const PERCENTAGE_TO_FLEX = 0.01
+
+export const rendering = {
+  mount(entity, containerEl) {
+    const columns = containerEl.querySelectorAll(":scope > *")
+    ;[...columns].forEach((column, index) => {
+      entity.columns[index].width = column.offsetWidth
+    })
+  },
+
+  render(entity, api) {
+    const type = api.getType(entity.type)
+
+    return html`<div class="iw-table">
+      ${type.renderHeader(entity, api)} ${type.renderBody(entity, api)}
+      ${type.renderFooter(entity, api)}
+    </div> `
+  },
+
+  renderHeader(entity, api) {
+    const type = api.getType(entity.type)
+
+    return html`<div class="iw-table-header">
+      <div
+        class="iw-table-header-row"
+        ${ref((el) => {
+          if (
+            el &&
+            entity.columns.some(({ width }) => typeof width === "string")
+          ) {
+            queueMicrotask(() => {
+              api.notify(`#${entity.id}:mount`, el)
+            })
+          }
+        })}
+      >
+        ${entity.columns.map((column) =>
+          type.renderHeaderColumn(entity, column, api),
+        )}
+      </div>
+
+      ${entity.search && type.renderSearchbar(entity, api)}
+    </div>`
+  },
+
+  renderHeaderColumn(entity, column, api) {
+    return html`<div
+      class="iw-table-header-column"
+      style=${getColumnStyle(column)}
+    >
+      <div
+        @click=${() =>
+          column.isSortable &&
+          api.notify(`#${entity.id}:sortChange`, column.id)}
+        class="iw-table-header-title"
+      >
+        ${column.title} ${getSortIcon(getSortDirection(entity, column.id))}
+      </div>
+
+      ${column.isFilterable && filters.render(entity, column, api)}
+    </div>`
+  },
+
+  renderSearchbar(entity, api) {
+    return html`<input
+      name="search"
+      type="text"
+      placeholder=${entity.search.placeholder ?? "Fuzzy search..."}
+      value=${entity.search.value}
+      @input=${(event) =>
+        api.notify(`#${entity.id}:searchChange`, event.target.value)}
+      class="iw-table-searchbar"
+    />`
+  },
+
+  renderBody(entity, api) {
+    const type = api.getType(entity.type)
+
+    return html`<div class="iw-table-body">
+      ${getRows(entity).map((row, index) =>
+        type.renderRow(entity, row, index, api),
+      )}
+    </div>`
+  },
+
+  renderRow(entity, row, index, api) {
+    const type = api.getType(entity.type)
+    const rowId = row[entity.rowId ?? "id"]
+
+    return html`<div
+      @click=${() => api.notify(`#${entity.id}:rowToggle`, rowId)}
+      class="iw-table-row ${index % DIVISOR
+        ? "iw-table-row-even"
+        : "iw-table-row-odd"} ${entity.selection.includes(rowId)
+        ? "iw-table-row-selected"
+        : ""}"
+    >
+      ${Object.values(row).map((value, index) =>
+        type.renderCell(entity, value, index, api),
+      )}
+    </div>`
+  },
+
+  renderCell(entity, cell, index, api) {
+    const type = api.getType(entity.type)
+    const column = entity.columns[index]
+
+    return html`<div
+      class=${`iw-table-cell ${column.type === "number" ? "iw-table-cell-number" : ""} ${column.type === "date" ? "iw-table-cell-date" : ""} ${column.type === "boolean" ? "iw-table-cell-boolean" : ""}`}
+      style=${getColumnStyle(column)}
+    >
+      ${type.renderValue(cell, column, api)}
+    </div>`
+  },
+
+  renderValue(value) {
+    return value
+  },
+
+  renderFooter(entity, api) {
+    const type = api.getType(entity.type)
+    const pagination = getPaginationInfo(entity)
+
+    return html`<div class="iw-table-footer">
+        <div class="iw-table-footer-row">
+          <div>
+            ${pagination.start + PRETTY_PAGE} to ${pagination.end} of ${pagination.totalRows}
+            entries
+          </div>
+
+          ${type.renderPagination(entity, pagination, api)}
+
+          <div class="iw-table-footer-row">
+            <div>Page size:</div>
+            <select
+              name="pageSize"
+              @change=${(event) =>
+                api.notify(
+                  `#${entity.id}:pageSizeChange`,
+                  Number(event.target.value),
+                )}
+            >
+              <option>10</option>
+              <option>20</option>
+              <option>30</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>`
+  },
+
+  renderPagination(entity, pagination, api) {
+    return html`<div class="iw-table-row">
+      <button
+        ?disabled=${!pagination.hasPrevPage}
+        @click=${() => api.notify(`#${entity.id}:pageChange`, FIRST_PAGE)}
+        class="iw-table-pagination-button"
+      >
+        |&#10094;
+      </button>
+      <button
+        ?disabled=${!pagination.hasPrevPage}
+        @click=${() => api.notify(`#${entity.id}:pagePrev`)}
+        class="iw-table-pagination-button"
+      >
+        &#10094;
+      </button>
+      <input
+        name="page"
+        type="number"
+        min="1"
+        max=${pagination.totalPages}
+        value=${pagination.page + PRETTY_PAGE}
+        class=${`iw-table-page-input`}
+        @input=${(event) =>
+          api.notify(
+            `#${entity.id}:pageChange`,
+            Number(event.target.value) - PRETTY_PAGE,
+          )}
+      />
+      /
+      <span>${pagination.totalPages}</span>
+      <button
+        ?disabled="${!pagination.hasNextPage}"
+        @click=${() => api.notify(`#${entity.id}:pageNext`)}
+        class="iw-table-pagination-button"
+      >
+        &#10095;
+      </button>
+      <button
+        ?disabled=${!pagination.hasNextPage}
+        @click=${() =>
+          api.notify(
+            `#${entity.id}:pageChange`,
+            pagination.totalPages - LAST_PAGE,
+          )}
+        class="iw-table-pagination-button"
+      >
+        &#10095;|
+      </button>
+    </div>`
+  },
+}
+
+function getColumnStyle(column) {
+  if (typeof column.width === "string") {
+    if (column.width?.endsWith("%")) {
+      // eslint-disable-next-line no-magic-numbers
+      const percentage = Number(column.width.slice(0, -1))
+      return `flex: ${percentage * PERCENTAGE_TO_FLEX}`
+    }
+
+    return `width: ${column.width}`
+  }
+
+  return `width: ${column.width}px`
+}
+
+function getSortIcon(direction) {
+  switch (direction) {
+    case "asc":
+      return "▲"
+    case "desc":
+      return "▼"
+    default:
+      return "▲▼"
+  }
+}

package/src/table/theme.css

@@ -0,0 +1,83 @@
+.iw-table {
+  .iw-table-header {
+    border-bottom: 1px solid grey;
+    padding: 1em 0;
+    row-gap: 1em;
+  }
+
+  .iw-table-header-row {
+    align-items: flex-start;
+    column-gap: 1em;
+  }
+
+  .iw-table-header-column {
+    row-gap: 0.5em;
+  }
+
+  .iw-table-header-title {
+    font-weight: bold;
+    white-space: nowrap;
+  }
+
+  .iw-table-body {
+    max-height: 35em;
+    overflow: auto;
+    border-bottom: 1px solid grey;
+  }
+
+  .iw-table-row {
+    align-items: center;
+    column-gap: 1em;
+  }
+
+  .iw-table-row-even {
+    background-color: aliceblue;
+  }
+
+  .iw-table-row-selected {
+    border-left: 1px solid cornflowerblue;
+    border-right: 1px solid cornflowerblue;
+  }
+
+  :not(.iw-table-row-selected) + .iw-table-row-selected {
+    border-top: 1px solid cornflowerblue;
+    margin-top: -1px;
+  }
+
+  .iw-table-row-selected + :not(.iw-table-row-selected) {
+    border-top: 1px solid cornflowerblue;
+    margin-top: -1px;
+  }
+
+  .iw-table-cell {
+    padding: 1em;
+  }
+
+  .iw-table-cell-number,
+  .iw-table-cell-date {
+    text-align: right;
+  }
+
+  .iw-table-cell-boolean {
+    text-align: center;
+  }
+
+  .iw-table-footer {
+    padding: 1em 0;
+  }
+
+  .iw-table-footer-row {
+    justify-content: space-between;
+    align-items: center;
+    column-gap: 1em;
+  }
+
+  .iw-table-page-input {
+    min-width: 4em;
+    text-align: right;
+  }
+
+  .iw-table-pagination-button {
+    white-space: nowrap;
+  }
+}

package/src/table.js

@@ -0,0 +1,7 @@
+import { logic } from "./table/logic"
+import { rendering } from "./table/rendering"
+
+export const table = {
+  ...logic,
+  ...rendering,
+}