Data

TwDataTable

TwDataTable is a Blazor data table component with pagination, search, sortable columns and custom row classes for displaying structured data.

Last updated 24 September 2026

Basic Data Table with Pagination

A feature-rich data table with pagination and search functionality.

Product	Category	Price	Stock
Apple MacBook Pro 17"	Laptop	£2,999.00	15
Microsoft Surface Pro	Laptop	£1,999.00	8
Magic Mouse 2	Accessories	£99.00	50
Apple Watch Series 9	Wearables	£499.00	25
iPad Air	Tablet	£799.00	5

Razor

<TwDataTable TItem="Product"
             Items="@products"
             Pageable
             RowsPerPage="5">
    <TableHeader>
        <tr>
            <th scope="col" class="px-6 py-3">Product</th>
            <th scope="col" class="px-6 py-3">Category</th>
            <th scope="col" class="px-6 py-3">Price</th>
            <th scope="col" class="px-6 py-3">Stock</th>
        </tr>
    </TableHeader>
    <TableRow Context="product">
        <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">@product.Name</td>
        <td class="px-6 py-4">@product.Category</td>
        <td class="px-6 py-4">£@product.Price.ToString("N2")</td>
        <td class="px-6 py-4">@product.Stock</td>
    </TableRow>
</TwDataTable>

CSHARP

@code {
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Category { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Stock { get; set; }
    }
}

Searchable Data Table

Data table with search functionality to filter results.

Product	Category	Price	Stock
Apple MacBook Pro 17"	Laptop	£2,999.00	15
Microsoft Surface Pro	Laptop	£1,999.00	8
Magic Mouse 2	Accessories	£99.00	50
Apple Watch Series 9	Wearables	£499.00	25
iPad Air	Tablet	£799.00	5
Samsung Galaxy S24	Phone	£1,199.00	30
Sony WH-1000XM5	Accessories	£399.00	12
Dell XPS 15	Laptop	£2,199.00	18
Google Pixel 8 Pro	Phone	£999.00	22
AirPods Pro	Accessories	£249.00	40

Razor

<TwDataTable TItem="Product"
             Items="@products"
             Searchable
             Pageable
             RowsPerPage="10">
    <TableHeader>
        <tr>
            <th scope="col" class="px-6 py-3">Product</th>
            <th scope="col" class="px-6 py-3">Category</th>
            <th scope="col" class="px-6 py-3">Price</th>
            <th scope="col" class="px-6 py-3">Stock</th>
        </tr>
    </TableHeader>
    <TableRow Context="product">
        <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">@product.Name</td>
        <td class="px-6 py-4">@product.Category</td>
        <td class="px-6 py-4">£@product.Price.ToString("N2")</td>
        <td class="px-6 py-4">@product.Stock</td>
    </TableRow>
    <EmptyContent>
        <div class="text-center py-8">
            <p class="text-gray-500 dark:text-gray-400">No products found matching your search.</p>
        </div>
    </EmptyContent>
</TwDataTable>

CSHARP

@code {
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Category { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Stock { get; set; }
    }
}

Data Table Without Pagination

Display all data without pagination controls.

Name	Department	Role
John Doe	Engineering	Developer
Jane Smith	Product	Designer
Bob Johnson	Operations	Manager
Alice Williams	Engineering	Developer
Charlie Brown	Quality	QA Engineer

Razor

<TwDataTable TItem="User"
             Items="@users"
             Pageable="false"
             Searchable
             SearchPlaceholder="Search users...">
    <TableHeader>
        <tr>
            <th scope="col" class="px-6 py-3">Name</th>
            <th scope="col" class="px-6 py-3">Department</th>
            <th scope="col" class="px-6 py-3">Role</th>
        </tr>
    </TableHeader>
    <TableRow Context="user">
        <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">@user.Name</td>
        <td class="px-6 py-4">@user.Department</td>
        <td class="px-6 py-4">@user.Role</td>
    </TableRow>
</TwDataTable>

CSHARP

@code {
    public class User
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Department { get; set; } = string.Empty;
        public string Role { get; set; } = string.Empty;
    }
}

Custom Row Classes

Data table with custom row styling based on conditions.

Product	Category	Price	Stock
Apple MacBook Pro 17"	Laptop	£2,999.00	15
Microsoft Surface Pro	Laptop	£1,999.00	8 (Low Stock)
Magic Mouse 2	Accessories	£99.00	50
Apple Watch Series 9	Wearables	£499.00	25
iPad Air	Tablet	£799.00	5 (Low Stock)

Razor

<TwDataTable TItem="Product"
             Items="@products"
             RowsPerPage="5"
             Pageable
             DefineTableRows>
    <TableHeader>
        <tr>
            <th scope="col" class="px-6 py-3">Product</th>
            <th scope="col" class="px-6 py-3">Category</th>
            <th scope="col" class="px-6 py-3">Price</th>
            <th scope="col" class="px-6 py-3">Stock</th>
        </tr>
    </TableHeader>
    <TableRow Context="product">
        @{
            var rowClass = product.Stock < 10 ? "bg-red-50 dark:bg-red-900/20" : "";
        }
        <tr class="@rowClass">
            <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">@product.Name</td>
            <td class="px-6 py-4">@product.Category</td>
            <td class="px-6 py-4">£@product.Price.ToString("N2")</td>
            <td class="px-6 py-4">
                @if (product.Stock < 10)
                {
                    <span class="text-red-700 dark:text-red-400 font-semibold">@product.Stock (Low Stock)</span>
                }
                else
                {
                    <span>@product.Stock</span>
                }
            </td>
        </tr>
    </TableRow>
</TwDataTable>

CSHARP

@code {
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Category { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Stock { get; set; }
    }
}

Sortable Data Table with Columns

Data table with per-column sortability. Click column headers to sort. Some columns are sortable (with icons), others are not.

Product Name	Category	Price	Stock
Apple MacBook Pro 17"	Laptop	£2,999.00	15
Microsoft Surface Pro	Laptop	£1,999.00	8 (Low Stock)
Magic Mouse 2	Accessories	£99.00	50
Apple Watch Series 9	Wearables	£499.00	25
iPad Air	Tablet	£799.00	5 (Low Stock)
Samsung Galaxy S24	Phone	£1,199.00	30
Sony WH-1000XM5	Accessories	£399.00	12
Dell XPS 15	Laptop	£2,199.00	18
Google Pixel 8 Pro	Phone	£999.00	22
AirPods Pro	Accessories	£249.00	40

Razor

<TwDataTable TItem="Product"
             Items="@products"
             Columns="@productColumns"
             Searchable
             Pageable
             RowsPerPage="10">
    <EmptyContent>
        <div class="text-center py-8">
            <p class="text-gray-500 dark:text-gray-400">No products found.</p>
        </div>
    </EmptyContent>
</TwDataTable>

CSHARP

@code {
    // Define columns with per-column sortability
    private readonly List<TwDataTableColumn<Product>> productColumns = new()
    {
        new TwDataTableColumn<Product>
        {
            Name = "name",
            Title = "Product Name",
            PropertySelector = p => p.Name,
            IsSortable = true,  // Sortable with alpha icons (auto-detected)
        },
        new TwDataTableColumn<Product>
        {
            Name = "category",
            Title = "Category",
            PropertySelector = p => p.Category,
            IsSortable = false,  // Sortable disabled.
        },
        new TwDataTableColumn<Product>
        {
            Name = "price",
            Title = "Price",
            PropertySelector = p => p.Price,
            IsSortable = true,  // Sortable with numeric icons (auto-detected from decimal type)
            CellFormatter = p => $"£{p.Price:N2}"
        },
        new TwDataTableColumn<Product>
        {
            Name = "stock",
            Title = "Stock",
            PropertySelector = p => p.Stock,
            CellFormatter = p => p.Stock < 10
                ? $"{p.Stock} (Low Stock)"
                : p.Stock.ToString(),
            IsSortable = true
        }
    };
}

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwTableTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Inherited from TwTable - this component reuses that theme rather than defining its own.

Property	Type	Controls
`Wrapper`	string
`ContainerClip`	string
`Base`	string
`Bordered`	string
`Header`	string
`Body`	string
`BodyStriped`	string
`BodyHoverable`	string
`RowDivider`	string
`Footer`	string
`SearchColumn`	string
`SortIcon`	string
`HeaderCellPadding`	string
`BodyCellPadding`	string
`EmptyState`	string

Full reference: TwTableTheme on the API docs.