Table

<loomi-table> — a Loomi data table with manual rows, dynamic data, search, sorting, pagination (via <loomi-pagination>), selectable and checkable rows (via <loomi-checkbox>), row grouping, empty-state options, custom row templates and action icons.

1
npm install @loomidev/table lit

1
import "@loomidev/table";

Basic Usage

Pass an array of row objects via the .data property (or a JSON-string data attribute). Column headings are generated automatically from the first row’s keys.

1
<loomi-table id="t"></loomi-table>
2

3
<script type="module">
4
  document.getElementById("t").data = [
5
    { first_name: "Ada", last_name: "Quint", department: "Engineering", email: "ada@loomiui.dev" },
6
    { first_name: "Sara", last_name: "Field", department: "Design", email: "sara@loomiui.dev" },
7
    { first_name: "Zane", last_name: "Hart", department: "Engineering", email: "zane@loomiui.dev" },
8
    { first_name: "Rita", last_name: "Boon", department: "Marketing", email: "rita@loomiui.dev" },
9
    { first_name: "Joe", last_name: "Diaz", department: "Design", email: "joe@loomiui.dev" },
10
    { first_name: "Wren", last_name: "Ortiz", department: "Finance", email: "wren@loomiui.dev" },
11
  ];
12
</script>

Styling Options

These toggles only show up once a table has enough rows to fill out — the same six-row staff list is reused across every variant below.

1
<loomi-table id="s1" striped></loomi-table>
2
<loomi-table id="s2" divided="false"></loomi-table>
3
<loomi-table id="s3" divider="thin"></loomi-table>
4
<loomi-table id="s4" has-hover></loomi-table>
5
<loomi-table id="s5" compact></loomi-table>
6
<loomi-table id="s6" celled></loomi-table>
7
<loomi-table id="s7" has-border has-shadow></loomi-table>
8

9
<script type="module">
10
  const staff = [
11
    { first_name: "Ada", last_name: "Quint", department: "Engineering", email: "ada@loomiui.dev" },
12
    { first_name: "Sara", last_name: "Field", department: "Design", email: "sara@loomiui.dev" },
13
    { first_name: "Zane", last_name: "Hart", department: "Engineering", email: "zane@loomiui.dev" },
14
    { first_name: "Rita", last_name: "Boon", department: "Marketing", email: "rita@loomiui.dev" },
15
    { first_name: "Joe", last_name: "Diaz", department: "Design", email: "joe@loomiui.dev" },
16
    { first_name: "Wren", last_name: "Ortiz", department: "Finance", email: "wren@loomiui.dev" },
17
  ];
18
  for (const id of ["s1", "s2", "s3", "s4", "s5", "s6", "s7"]) {
19
    document.getElementById(id).data = staff;
20
  }
21
</script>

Toggle	Effect
`striped`	Alternating row backgrounds.
`divided="false"`	Removes row divider lines.
`divider="thin"`	Thinner dividers.
`has-hover`	Highlights rows on hover.
`compact`	Tighter row padding.
`celled`	Borders on every cell, like a spreadsheet.
`has-border has-shadow`	Outer border and drop shadow.

Choosing & Renaming Columns

By default every key on the first row becomes a column. Narrow that down with include-columns (takes priority) or exclude-columns, and rename headings with column-aliases.

1
<loomi-table id="t2" exclude-columns="id,email"></loomi-table>
2

3
<script type="module">
4
  const t = document.getElementById("t2");
5
  t.data = [
6
    { id: 1, first_name: "Ada", department: "Engineering", email: "ada@loomiui.dev" },
7
    { id: 2, first_name: "Sara", department: "Design", email: "sara@loomiui.dev" },
8
    { id: 3, first_name: "Zane", department: "Engineering", email: "zane@loomiui.dev" },
9
    { id: 4, first_name: "Rita", department: "Marketing", email: "rita@loomiui.dev" },
10
  ];
11
  t.columnAliases = { first_name: "Name", department: "Team" };
12
</script>

Action Icons

Pass an array of { icon, name, tip, color } objects via action-icons to add a column of icon buttons. Listen for the loomi-action event to handle clicks — e.detail is { name, row }, so you always get the full row data for that line.

Each icon renders as a circular outline button in secondary by default; pass color to use a different loomi color instead. Set buttonOutline: false to render a solid filled circle instead of the outline.

1
<loomi-table id="t3"></loomi-table>
2

3
<script type="module">
4
  const t = document.getElementById("t3");
5
  t.data = [
6
    { first_name: "Ada", department: "Engineering" },
7
    { first_name: "Sara", department: "Design" },
8
    { first_name: "Zane", department: "Engineering" },
9
    { first_name: "Rita", department: "Marketing" },
10
  ];
11
  t.actionIcons = [
12
    { icon: "paper-airplane", name: "message", tip: "Message", color: "success" },
13
    { icon: "trash", name: "delete", tip: "Delete", color: "error" },
14
  ];
15
  t.addEventListener("action", (e) => {
16
    console.log(e.detail.name, e.detail.row); // "delete", { first_name: "Ada", ... }
17
  });
18
</script>

Row Click Handler

Listen for loomi-row-click to react to a click anywhere on a row (clicks on the action-icon cell don’t trigger it, so icon clicks and row clicks never collide).

1
t.addEventListener("loomi-row-click", (e) => goToProfile(e.detail.row.id));

Selectable Rows

Set selectable to let row clicks toggle selected state. This uses the same selection store as checkboxes, so selectedIds, selectedValue, and loomi-selection-change all stay in sync.

1
<loomi-table id="selectable-staff" selectable></loomi-table>
2

3
<script type="module">
4
  document.getElementById("selectable-staff").data = [
5
    { id: 1, first_name: "Ada", department: "Engineering", email: "ada@loomiui.dev" },
6
    { id: 2, first_name: "Sara", department: "Design", email: "sara@loomiui.dev" },
7
    { id: 3, first_name: "Zane", department: "Engineering", email: "zane@loomiui.dev" },
8
    { id: 4, first_name: "Rita", department: "Marketing", email: "rita@loomiui.dev" },
9
    { id: 5, first_name: "Joe", department: "Design", email: "joe@loomiui.dev" },
10
  ];
11
</script>

Searchable

1
<loomi-table id="t4" searchable search-placeholder="Find staff members by name…"></loomi-table>
2

3
<script type="module">
4
  document.getElementById("t4").data = [
5
    { first_name: "Ada", last_name: "Quint", department: "Engineering", email: "ada@loomiui.dev" },
6
    { first_name: "Sara", last_name: "Field", department: "Design", email: "sara@loomiui.dev" },
7
    { first_name: "Zane", last_name: "Hart", department: "Engineering", email: "zane@loomiui.dev" },
8
    { first_name: "Rita", last_name: "Boon", department: "Marketing", email: "rita@loomiui.dev" },
9
    { first_name: "Joe", last_name: "Diaz", department: "Design", email: "joe@loomiui.dev" },
10
    { first_name: "Nia", last_name: "Cole", department: "Marketing", email: "nia@loomiui.dev" },
11
  ];
12
</script>

The search box filters across every visible column’s stringified value, client-side — typing “design” above narrows the six rows down to Sara and Joe.

Search Placement

searchable renders a full-width search field above the table by default. Set search-container to a DOM selector when the search field should live somewhere else on the page.

1
<div id="staff-search"></div>
2
<loomi-table id="staff-table" searchable search-container="#staff-search"></loomi-table>

Sortable

1
<loomi-table id="t5" sortable></loomi-table>
2

3
<!-- restrict which columns can be sorted -->
4
<loomi-table id="t6" sortable sortable-columns="first_name,department"></loomi-table>
5

6
<script type="module">
7
  const staff = [
8
    { first_name: "Zane", last_name: "Hart", department: "Engineering", email: "zane@loomiui.dev" },
9
    { first_name: "Ada", last_name: "Quint", department: "Engineering", email: "ada@loomiui.dev" },
10
    { first_name: "Rita", last_name: "Boon", department: "Marketing", email: "rita@loomiui.dev" },
11
    { first_name: "Joe", last_name: "Diaz", department: "Design", email: "joe@loomiui.dev" },
12
    { first_name: "Nia", last_name: "Cole", department: "Marketing", email: "nia@loomiui.dev" },
13
    { first_name: "Sara", last_name: "Field", department: "Design", email: "sara@loomiui.dev" },
14
  ];
15
  document.getElementById("t5").data = staff;
16
  document.getElementById("t6").data = staff;
17
</script>

Click a sortable column heading to sort by it; click again to reverse direction.

Checkable Rows

Adds a checkbox column. Read the current selection from the selectedIds property, or listen for loomi-selection-change.

1
<loomi-table id="t7" checkable></loomi-table>
2

3
<script type="module">
4
  const t7 = document.getElementById("t7");
5
  t7.data = [
6
    { id: 1, first_name: "Ada", department: "Engineering", email: "ada@loomiui.dev" },
7
    { id: 2, first_name: "Sara", department: "Design", email: "sara@loomiui.dev" },
8
    { id: 3, first_name: "Zane", department: "Engineering", email: "zane@loomiui.dev" },
9
    { id: 4, first_name: "Rita", department: "Marketing", email: "rita@loomiui.dev" },
10
    { id: 5, first_name: "Joe", department: "Design", email: "joe@loomiui.dev" },
11
  ];
12
  t7.addEventListener("loomi-selection-change", (e) => {
13
    console.log(e.detail.ids); // every checked row's id
14
  });
15
</script>

Pre-check rows on load with selected-value (comma-separated ids), and control which field counts as the row’s id with id-key (defaults to id).

Grouping Rows

Group dynamic rows by any key in your data with groupby. Rows that share a value are collected under a heading row for that value, in the order the groups first appear.

1
<loomi-table id="staff-by-team" groupby="department"></loomi-table>
2

3
<script type="module">
4
  document.getElementById("staff-by-team").data = [
5
    { first_name: "Ada", last_name: "Quint", department: "Engineering", email: "ada@loomiui.dev" },
6
    { first_name: "Zane", last_name: "Hart", department: "Engineering", email: "zane@loomiui.dev" },
7
    { first_name: "Leo", last_name: "Martin", department: "Engineering", email: "leo@loomiui.dev" },
8
    { first_name: "Priya", last_name: "Nair", department: "Engineering", email: "priya@loomiui.dev" },
9
    { first_name: "Sara", last_name: "Field", department: "Design", email: "sara@loomiui.dev" },
10
    { first_name: "Joe", last_name: "Diaz", department: "Design", email: "joe@loomiui.dev" },
11
    { first_name: "Rita", last_name: "Boon", department: "Marketing", email: "rita@loomiui.dev" },
12
    { first_name: "Nia", last_name: "Cole", department: "Marketing", email: "nia@loomiui.dev" },
13
    { first_name: "Wren", last_name: "Ortiz", department: "Finance", email: "wren@loomiui.dev" },
14
    { first_name: "Tom", last_name: "Brandt", department: "Finance", email: "tom@loomiui.dev" },
15
  ];
16
</script>

This renders four group headings — Engineering, Design, Marketing, Finance — each followed by its rows.

Pagination

1
<loomi-table id="t8" paginated page-size="5"></loomi-table>
2

3
<!-- show page numbers instead of prev/next arrows -->
4
<loomi-table id="t9" paginated page-size="5" pagination-style="numbers"></loomi-table>
5

6
<!-- use a page dropdown -->
7
<loomi-table id="t9-dropdown" paginated page-size="5" pagination-style="dropdown"></loomi-table>
8

9
<!-- leading row-number column -->
10
<loomi-table id="t10" paginated page-size="5" show-row-numbers></loomi-table>
11

12
<script type="module">
13
  const staff = [
14
    { id: 1, first_name: "Ada", department: "Engineering", email: "ada@loomiui.dev" },
15
    { id: 2, first_name: "Sara", department: "Design", email: "sara@loomiui.dev" },
16
    { id: 3, first_name: "Zane", department: "Engineering", email: "zane@loomiui.dev" },
17
    { id: 4, first_name: "Rita", department: "Marketing", email: "rita@loomiui.dev" },
18
    { id: 5, first_name: "Joe", department: "Design", email: "joe@loomiui.dev" },
19
    { id: 6, first_name: "Nia", department: "Marketing", email: "nia@loomiui.dev" },
20
    { id: 7, first_name: "Leo", department: "Engineering", email: "leo@loomiui.dev" },
21
    { id: 8, first_name: "Wren", department: "Finance", email: "wren@loomiui.dev" },
22
    { id: 9, first_name: "Priya", department: "Engineering", email: "priya@loomiui.dev" },
23
    { id: 10, first_name: "Tom", department: "Finance", email: "tom@loomiui.dev" },
24
    { id: 11, first_name: "Maya", department: "Support", email: "maya@loomiui.dev" },
25
    { id: 12, first_name: "Owen", department: "Support", email: "owen@loomiui.dev" },
26
  ];
27
  for (const id of ["t8", "t9", "t9-dropdown", "t10"]) document.getElementById(id).data = staff;
28
</script>

With page-size="5" and twelve rows, each table above paginates across three pages — enough to see the arrow, numbers, and row-number variants actually flip between pages. Pagination styles: arrows (default), numbers, dropdown — same options as <loomi-pagination>, since that’s exactly what renders underneath.

Customize the total text with :a, :b, and :c placeholders:

1
<loomi-table paginated page-size="5" total-label=":a - :b of :c"></loomi-table>
2
<loomi-table paginated page-size="5" total-label="Showing :a - :b"></loomi-table>

Those render as 1 - 5 of 50 and Showing 1 - 5.

No Data Message

1
<loomi-table id="t11" no-data-message="The staff directory is empty"></loomi-table>

Render the message as an empty-state panel with optional image, heading, and button:

1
<loomi-table
2
  message-as-empty-state
3
  show-image="false"
4
  heading="No staff"
5
  no-data-message="The staff directory is empty"
6
  button-label="Add staff"
7
></loomi-table>

Listen for loomi-empty-action to handle the empty-state button. The onclick attribute is accepted and included in the event detail.

Manual and Custom Layouts

For a manually authored table, provide header cells in the header slot and rows in the default slot:

Item Quantity Office furniture2 Standing desks6 Monitor arms10

1
<loomi-table selectable>
2
  <th slot="header">Item</th>
3
  <th slot="header">Quantity</th>
4
  <tr><td>Office furniture</td><td>2</td></tr>
5
  <tr><td>Standing desks</td><td>6</td></tr>
6
  <tr><td>Monitor arms</td><td>10</td></tr>
7
</loomi-table>

For dynamic data with a custom row layout, set layout="custom" and provide header and row templates. Row templates replace {key} placeholders from each row, while pagination still works from the data array.

1
<loomi-table id="custom-users" layout="custom" paginated page-size="5">
2
  <template slot="header"><th>ID</th><th>User Details</th></template>
3
  <template slot="row">
4
    <tr><td>{id}</td><td><strong>{name}</strong><br>{email}</td></tr>
5
  </template>
6
</loomi-table>
7

8
<script type="module">
9
  document.getElementById("custom-users").data = [
10
    { id: 1, name: "Ada Quint", email: "ada@loomiui.dev" },
11
    { id: 2, name: "Sara Field", email: "sara@loomiui.dev" },
12
    { id: 3, name: "Zane Hart", email: "zane@loomiui.dev" },
13
    { id: 4, name: "Rita Boon", email: "rita@loomiui.dev" },
14
    { id: 5, name: "Joe Diaz", email: "joe@loomiui.dev" },
15
    { id: 6, name: "Nia Cole", email: "nia@loomiui.dev" },
16
    { id: 7, name: "Leo Martin", email: "leo@loomiui.dev" },
17
  ];
18
</script>

Putting It Together

Search, sort, checkable rows, pagination, and action icons all compose freely on the same table:

1
<loomi-table id="full-table" searchable sortable paginated page-size="5" checkable has-hover></loomi-table>
2

3
<script type="module">
4
  const t = document.getElementById("full-table");
5
  t.data = [
6
    { id: 1, first_name: "Ada", department: "Engineering" },
7
    { id: 2, first_name: "Sara", department: "Design" },
8
    { id: 3, first_name: "Zane", department: "Engineering" },
9
    { id: 4, first_name: "Rita", department: "Marketing" },
10
    { id: 5, first_name: "Joe", department: "Design" },
11
    { id: 6, first_name: "Nia", department: "Marketing" },
12
    { id: 7, first_name: "Leo", department: "Engineering" },
13
  ];
14
  t.excludeColumns = "id";
15
  t.actionIcons = [{ icon: "trash", name: "delete", color: "error", tip: "Delete" }];
16
  t.addEventListener("action", (e) => console.log(e.detail));
17
  t.addEventListener("loomi-selection-change", (e) => console.log(e.detail.ids));
18
</script>

Accessibility

For the library-wide baseline, see Foundations — Accessibility.

Responsive behavior

For the shared container and viewport rules, see Foundations — Responsive behavior.

Dark mode

loomi-table uses Loomi semantic tokens such as --loomi-surface, --loomi-surface-muted, --loomi-surface-border-subtle, --loomi-text, and palette accent tokens instead of hard-coded light colors. The table header, row dividers, panels, hover states, and muted text shift with the active theme preset.

For theme activation, token overrides, and contrast guidance, see Foundations — Dark mode.

Attributes

Attribute	Default	Description
`name`	auto	Stable class/name hook, matching Loomi targeting patterns.
`data`	`[]`	Row objects — property (`.data`) or JSON-string attribute.
`columns`	(auto)	Column keys (defaults to the first row’s keys).
`layout`	`auto`	`auto` \| `custom`; custom uses row/header templates or slotted rows.
`row-template`	(blank)	Template string for `layout="custom"`; `{key}` placeholders are filled from row data.
`include-columns`	(blank)	Comma-separated key allow list.
`exclude-columns`	(blank)	Comma-separated key deny list (`include` wins if both are set).
`column-aliases`	`{}`	Map of `key -> display name` (property or JSON).
`searchable`	`false`	Show a search box. (boolean)
`search-container`	(blank)	DOM selector where the search input should be rendered.
`search-placeholder`	`Search table below...`	Search input placeholder.
`sortable`	`false`	Enable column sorting. (boolean)
`sortable-columns`	(all)	Comma-separated sortable keys.
`paginated`	`false`	Enable pagination. (boolean)
`page-size`	`25`	Rows per page.
`pagination-style`	`arrows`	`arrows` \| `numbers` \| `dropdown`
`show-total`	`true`	Show the pagination total label. (boolean)
`show-page-number`	`true`	Show current page between arrow controls. (boolean)
`show-total-pages`	`false`	Show `current / total` for arrow pagination. (boolean)
`default-page`	`1`	Initial selected page.
`limit`	`0`	Max total rows to display (`0` = no limit).
`total-label`	`Showing :a to :b of :c records`	Pagination total label placeholders.
`selectable`	`false`	Row clicks toggle selection. (boolean)
`checkable`	`false`	Add a checkbox column. (boolean)
`id-key`	`id`	Row key used as the selection id.
`selected-value`	(blank)	Comma-separated ids to pre-check.
`action-icons`	`[]`	Array of `{ icon, name?, tip?, color?, click?, iconType?, buttonOutline? }`.
`actions-title`	`actions`	Heading for the action-icons column.
`show-row-numbers`	`false`	Show a leading `#` column. (boolean)
`groupby`	(blank)	Key used to render group heading rows.
`striped`	`false`	Alternating row backgrounds. (boolean)
`divided`	`true`	Row divider lines. (boolean)
`celled`	`false`	Borders on every cell, like a spreadsheet. (boolean)
`compact`	`false`	Tighter row padding. (boolean)
`transparent`	`false`	Removes the table’s own background. (boolean)
`has-hover`	`false`	Highlights rows on hover. (boolean)
`has-shadow`	`true`	Outer drop shadow. (boolean)
`has-border`	`false`	Outer border. (boolean)
`divider`	`regular`	`regular` \| `thin`
`no-data-message`	`No records to display`	Shown when there are no rows.
`message-as-empty-state`	`false`	Render no-data content as an empty state. (boolean)
`image`	`empty-state.svg`	Empty-state image URL.
`heading`	(blank)	Empty-state heading.
`button-label`	(blank)	Empty-state CTA label.
`show-image`	`true`	Show empty-state image. (boolean)
`onclick`	(blank)	empty-state action string, also emitted in `loomi-empty-action`.
`nonce`	(blank)	Accepted as a no-op compatibility attribute.

Properties: selectedIds, selectedRows (read-only current selection).

Slots

Slot	Description
(default)	Content placed inside the component.
`header`	Custom header content.

Events

Event	Description
`loomi-action`	Fired when a configured row action is activated.
`loomi-action-call`	Fired when an action-cell callback is requested.
`loomi-empty-action`	Fired when the empty-state action is activated.
`loomi-page-change`	Fired when the page changes.
`loomi-row-click`	Fired when a row is activated.
`loomi-selection-change`	Fired when the selection changes.

Full Example

1
<loomi-table
2
  id="staff-table"
3
  striped
4
  divided
5
  divider="thin"
6
  has-shadow
7
  has-border
8
  compact
9
  searchable
10
  search-placeholder="Search staff…"
11
  sortable
12
  checkable
13
  paginated
14
  page-size="25"
15
  pagination-style="numbers"
16
  show-row-numbers
17
  no-data-message="The staff directory is empty"
18
></loomi-table>
19

20
<script type="module">
21
  const t = document.getElementById("staff-table");
22
  t.data = [
23
    { id: 1, first_name: "Ada", last_name: "Quint", department: "Engineering", email: "ada@loomiui.dev" },
24
    { id: 2, first_name: "Sara", last_name: "Field", department: "Design", email: "sara@loomiui.dev" },
25
    { id: 3, first_name: "Zane", last_name: "Hart", department: "Engineering", email: "zane@loomiui.dev" },
26
    { id: 4, first_name: "Rita", last_name: "Boon", department: "Marketing", email: "rita@loomiui.dev" },
27
    { id: 5, first_name: "Joe", last_name: "Diaz", department: "Design", email: "joe@loomiui.dev" },
28
    { id: 6, first_name: "Nia", last_name: "Cole", department: "Marketing", email: "nia@loomiui.dev" },
29
    { id: 7, first_name: "Leo", last_name: "Martin", department: "Engineering", email: "leo@loomiui.dev" },
30
    { id: 8, first_name: "Wren", last_name: "Ortiz", department: "Finance", email: "wren@loomiui.dev" },
31
    { id: 9, first_name: "Priya", last_name: "Nair", department: "Engineering", email: "priya@loomiui.dev" },
32
    { id: 10, first_name: "Tom", last_name: "Brandt", department: "Finance", email: "tom@loomiui.dev" },
33
  ];
34
  t.excludeColumns = "id";
35
  t.columnAliases = { first_name: "First Name", last_name: "Last Name" };
36
  t.actionIcons = [
37
    { icon: "pencil-square", name: "edit", tip: "Edit" },
38
    { icon: "trash", name: "delete", color: "error", tip: "Delete" },
39
  ];
40
</script>

Framework integration

<loomi-table> is a standard custom element, so the browser can use it in plain HTML, Blade, React, Vue, Angular, Svelte, Astro, and most other frameworks. The important beginner rule is: install the package, import it once before the tag is rendered, then write the Loomi tag in your template.

Where to run commands

Run install commands from the app where you want to use this component. That means the folder that contains that app’s package.json. Do not run these install commands from packages/table unless you are editing LoomiUI itself.

1
cd /path/to/your-app
2
npm install @loomidev/table lit

If you are contributing to LoomiUI itself, first move to the top-level components folder. That is where the main package.json for all packages lives, and pnpm --filter ... commands should be run from there:

1
cd /path/to/your-copy-of-loomiui/components
2
pnpm --filter @loomidev/table build
3
pnpm --filter @loomidev/table typecheck

Choose your framework

Use the CDN version for prototypes, documentation pages, or a quick reproduction. The import map tells the browser where to find Lit, which Loomi components use internally.

1
<script type="importmap">
2
  { "imports": { "lit": "https://esm.sh/lit@3.3.3", "lit/": "https://esm.sh/lit@3.3.3/" } }
3
</script>
4
<script type="module" src="https://esm.sh/@loomidev/table"></script>
5

6
<loomi-table id="customers-table" searchable sortable paginated page-size="10"></loomi-table>

In Vite, Webpack, Parcel, Rollup, or a framework build pipeline, install the package and import it once in your main app JavaScript file. After that, you can use the Loomi tag anywhere in your app.

1
import "@loomidev/table";

This component accepts data as a JavaScript property. Use an HTML attribute only for simple strings; use a property when you pass arrays, objects, or functions.

1
const el = document.querySelector("loomi-table");
2
el.data = [{ id: 1, name: "Emma", email: "emma@example.com" }, { id: 2, name: "Chris", email: "chris@example.com" }];

Run the install command from your Laravel project root, then import the component in resources/js/app.js. If your project uses Laravel Vite, npm run dev and npm run build should also be run from the Laravel project root.

1
cd /path/to/your-laravel-app
2
npm install @loomidev/table lit
3
npm run dev

1
import "@loomidev/table";

1
<loomi-table id="customers-table" searchable sortable paginated page-size="10"></loomi-table>

React can render Loomi tags directly. If you are on React 18, or if you need to pass arrays, objects, or functions, use a ref and assign those values after the component mounts.

1
import { useEffect, useRef } from "react";
2
import "@loomidev/table";
3

4
export function LoomiExample() {
5
  const el = useRef(null);
6

7
  useEffect(() => {
8
    el.current.data = [{ id: 1, name: "Emma", email: "emma@example.com" }, { id: 2, name: "Chris", email: "chris@example.com" }];
9
  }, []);
10

11
  return <loomi-table ref={el}></loomi-table>;
12
}

If TypeScript does not recognize the Loomi tag in JSX, add it to your app’s JSX type declarations.

Import the package in the component that uses it, or once in your main Vue file. Vue templates can use Loomi tags directly. For arrays, objects, or functions, pass the value as a JavaScript property instead of as plain text.

1
<script setup>
2
import { onMounted, ref } from "vue";
3
import "@loomidev/table";
4

5
const el = ref(null);
6

7
onMounted(() => {
8
  el.value.data = [{ id: 1, name: "Emma", email: "emma@example.com" }, { id: 2, name: "Chris", email: "chris@example.com" }];
9
});
10
</script>
11

12
<template>
13
  <loomi-table ref="el"></loomi-table>
14
</template>

If Vue warns that the tag is an unknown component, configure compilerOptions.isCustomElement for tags that start with loomi- in your Vite or Vue config.

Import the package once and tell Angular to allow custom HTML tags with CUSTOM_ELEMENTS_SCHEMA. For NgModule apps, add the schema to the module instead of the standalone component.

1
import { AfterViewInit, CUSTOM_ELEMENTS_SCHEMA, Component, ElementRef, ViewChild } from "@angular/core";
2
import "@loomidev/table";
3

4
@Component({
5
  selector: "app-root",
6
  standalone: true,
7
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
8
  template: `
9
    <loomi-table #el></loomi-table>
10
  `,
11
})
12
export class AppComponent implements AfterViewInit {
13
  @ViewChild("el") el!: ElementRef<any>;
14

15
  ngAfterViewInit() {
16
    this.el.nativeElement.data = [{ id: 1, name: "Emma", email: "emma@example.com" }, { id: 2, name: "Chris", email: "chris@example.com" }];
17
  }
18
}

Svelte can import the package inside a component script. Astro can import it in the frontmatter of the page or layout where the tag appears.

1
<script>
2
  import { onMount } from "svelte";
3
  import "@loomidev/table";
4

5
  let el;
6

7
  onMount(() => {
8
    el.data = [{ id: 1, name: "Emma", email: "emma@example.com" }, { id: 2, name: "Chris", email: "chris@example.com" }];
9
  });
10
</script>
11

12
<loomi-table bind:this={el}></loomi-table>

1
---
2
import "@loomidev/table";
3
---
4

5
<loomi-table id="customers-table" searchable sortable paginated page-size="10"></loomi-table>

Server-side rendering notes

Frameworks such as Next.js, Nuxt, SvelteKit, and Astro sometimes render HTML on the server before browser-only code runs. If your framework complains, move the Loomi import to client-side code. In Next.js, that usually means a component with "use client"; in Nuxt, it often means a .client.ts plugin.

Dependencies

@loomidev/checkbox
@loomidev/core
@loomidev/icons
@loomidev/input
@loomidev/pagination