UmbHost.Tables 17.0.2

UmbHost.Tables

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

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>
}

Using the Helper Method

The TableModel includes a helper method for simpler rendering:

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

@if (table != null)
{
    @Html.Raw(table.ToHtmlTable("table table-striped"))
}

Models

TableModel

The main model representing the table:

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 src/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 src/UmbHost.Tables.Client
npm run watch

Creating a NuGet Package

dotnet pack src/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