UmbHost.Tables 17.3.0

UmbHost.Tables

A table property editor for Umbraco 17 and 18 that allows content editors to create and manage tabular data with support for header rows, header columns, and inline editing.

Version compatibility

The package major tracks the Umbraco major, so pick the line that matches your site:

This branch is the 17.x maintenance line.

Features

• Inline cell editing with contenteditable
• Header row and header column toggles
• Add and remove rows and columns
• Right-click context menu for quick operations
• Strongly-typed C# models with PropertyValueConverter
• Configurable min/max rows and columns
• Read-only mode support
• Built with Lit/Vite/TypeScript following Umbraco 17 patterns

Installation

Install the NuGet package:

dotnet add package UmbHost.Tables

Or via the Package Manager Console:

Install-Package UmbHost.Tables

Usage

Creating a Data Type

1. In the Umbraco backoffice, go to Settings → Data Types
2. Click Create Data Type
3. Select Table as the property editor
4. Configure your options (header toggles, row/column limits, etc.)
5. Save the Data Type

Adding to a Document Type

1. Edit your Document Type
2. Add a new property
3. Select your Table Data Type
4. Save the Document Type

Rendering in Razor Views

@using UmbHost.Tables.Models
@{
    var table = Model.Value<TableModel>("tableProperty");
}

@if (table != null && table.Rows.Any())
{
    <table class="table">
        @if (table.UseFirstRowAsHeader && table.Rows.Any())
        {
            <thead>
                <tr>
                    @foreach (var cell in table.Rows.First().Cells)
                    {
                        <th>@Html.Raw(cell.Value)</th>
                    }
                </tr>
            </thead>
        }
        <tbody>
            @foreach (var row in table.UseFirstRowAsHeader ? table.Rows.Skip(1) : table.Rows)
            {
                <tr>
                    @for (var i = 0; i < row.Cells.Count; i++)
                    {
                        var cell = row.Cells[i];
                        if (table.UseFirstColumnAsHeader && i == 0)
                        {
                            <th>@Html.Raw(cell.Value)</th>
                        }
                        else
                        {
                            <td>@Html.Raw(cell.Value)</td>
                        }
                    }
                </tr>
            }
        </tbody>
    </table>
}

Setup

Add these to Views/_ViewImports.cshtml once:

@using UmbHost.Tables.Models
@using UmbHost.Tables.Extensions
@using UmbHost.Tables.Rendering
@addTagHelper *, UmbHost.Tables

ToHtmlTable needs the first two usings, TableHtmlOptions needs the third, and the tag helper needs the addTagHelper line.

Using the Tag Helper

@{
    var table = Model.Value<TableModel>("tableProperty");
}

<umbhost-table table="@table" class="table table-striped" />

class, id, data-* and any other attribute you write are passed straight through to the rendered <table>. Inner elements have their own class hooks:

<umbhost-table table="@table"
               class="table table-striped"
               id="prices"
               data-sortable="true"
               head-class="thead-dark"
               body-class="table-group-divider"
               row-class="align-middle"
               header-cell-class="fw-bold"
               cell-class="px-4 py-2" />

Nothing is rendered when the table is null or empty, so no @if guard is needed.

Using the Extension Method

@{
    var table = Model.Value<TableModel>("tableProperty");
}

@table.ToHtmlTable("table table-striped")

For full control, pass TableHtmlOptions instead of a class string:

@table.ToHtmlTable(new TableHtmlOptions
{
    Class = "table table-striped",
    Id = "prices",
    CellClass = "px-4 py-2",
    Attributes = new Dictionary<string, string?> { ["data-sortable"] = "true" },
})

ToHtmlTable returns IHtmlContent, so @Html.Raw(table.ToHtmlTable("table")) also works.

Generated Markup

Both helpers produce the same markup. Header cells are determined by cell.Type or the UseFirstRowAsHeader / UseFirstColumnAsHeader flags, and carry scope for screen readers:

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">Plan</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Starter</th>
      <td><a href="/pricing/">£10</a></td>
    </tr>
  </tbody>
</table>

Models

TableModel

The main model representing the table:

Methods:

TableRow

Represents a single row:

TableCell

Represents a single cell:

Configuration Options

When creating a Data Type, the following options are available:

Requirements

• Umbraco 17.0.0 or later
• .NET 10.0 or later

Development

Prerequisites

• .NET 10 SDK
• Node.js 18+

Building from Source

Clone the repository and build the client assets:

cd UmbHost.Tables.Client/
npm install
npm run build

Build the .NET project:

dotnet build

Watching for Changes

During development, you can watch for client-side changes:

cd UmbHost.Tables.Client/
npm run watch

Creating a NuGet Package

dotnet pack UmbHost.Tables/UmbHost.Tables.csproj -c Release

Migrating from Limbo.Umbraco.Tables

If you're migrating from Limbo.Umbraco.Tables:

1. The data structure is compatible, so existing content should work without migration
2. Update your using statements from Limbo.Umbraco.Tables.Models to UmbHost.Tables.Models
3. The TableModel properties are largely the same
4. Update your Data Types to use the new "Table" property editor

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Credits

Inspired by Limbo.Umbraco.Tables by Limbo.

Built for Umbraco 17+ by UmbHost.

Support

• GitHub Issues
• UmbHost Support