Blazor Smart.Table Header & Footer

Setup The Project

Follow the Getting Started guide to set up your Blazor Application with Smart UI.

Setup the Blazor Smart.Table

Follow the Get Started with Smart.Table guide to set up the component.

Header & Footer

This tutorial will show you how you can set custom Table header and footer.
First, you need to bind the Table's HeaderRow and FooterRow properties to strings that represent id-s:

    <Table DataSource="dataRecords" FooterRow="@footerTemplateId" HeaderRow="@headerTemplateId" Columns="@columns" />
        

Then you need to create <template /> element with the same ids that define the custom rows. For example:

    <template id="customHeaderRowTemplate">
        <tr id="customHeaderRow">
            <th>The user's id</th>
            <th>The user's first name</th>
            <th>The user's last name</th>
            <th>Official product name</th>
            <th>The number of purchased items</th>
        </tr>
    </template>

Example

Here is a full example of Table with freezed header and footer rows:

    @using Smart.Blazor.Demos.Data
    @inject RandomDataService dataService

    <div>
        <Table DataSource="dataRecords" FooterRow="@footerTemplateId" HeaderRow="@headerTemplateId" FreezeHeader="true" FreezeFooter="true" Columns="@columns"></Table>

        <template id="customHeaderRowTemplate">
            <tr id="customHeaderRow">
                <th>The user's id</th>
                <th>The user's first name</th>
                <th>The user's last name</th>
                <th>Official product name</th>
                <th>The number of purchased items</th>
            </tr>
        </template>

        <template id="customFooterRowTemplate">
            <tr>
                <td>id</td>
                <td>First Name</td>
                <td>Last Name</td>
                <td>Product Name</td>
                <td>Quantity</td>
            </tr>
        </template>
    </div>

    @code {
        private string footerTemplateId = "customFooterRowTemplate";
        private string headerTemplateId = "customHeaderRowTemplate";

        private List<DataRecord> dataRecords;

        List<TableColumn> columns = new List<TableColumn>()
        {
            new TableColumn()
            {
                DataField = "Id",
                Label = "Id",
                DataType = TableColumnDataType.Number
            },
            new TableColumn()
            {
                DataField = "FirstName",
                Label = "First Name",
                DataType = TableColumnDataType.String
            },
            new TableColumn()
            {
                DataField = "LastName",
                Label = "Last Name",
                DataType = TableColumnDataType.String
            },
            new TableColumn()
            {
                DataField = "ProductName",
                Label = "Product Name",
                DataType = TableColumnDataType.String
            },
            new TableColumn()
            {
                DataField = "Quantity",
                Label = "Quantity",
                DataType = TableColumnDataType.Number
            }
        };

        protected override void OnInitialized()
        {
            base.OnInitialized();
            dataRecords = dataService.GenerateData(15);
        }
    }