/TableNet

Table.Net - Blazor DataTable Component

Primary LanguageC#MIT LicenseMIT

License Package Version

Table.Net

Blazor DataTable Component (Demo)

example

Features

  • Flexible design
  • Sorting
  • Filtering
  • Tooltip
  • Asynchronous

Install

  • Add Table.Net nuget package
  • Reference static assets: <link href="_content/Table.Net/css/main.css" rel="stylesheet" />

Dependencies

libman.json sample:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "twitter-bootstrap@4.4.1",
      "destination": "wwwroot/lib/twitter-bootstrap/",
      "files": [
        "css/bootstrap.min.css"
      ]
    },
    {
      "library": "font-awesome@5.12.1",
      "destination": "wwwroot/lib/font-awesome/",
      "files": [
        "css/all.min.css",
        "webfonts/fa-brands-400.eot",
        "webfonts/fa-brands-400.svg",
        "webfonts/fa-brands-400.ttf",
        "webfonts/fa-brands-400.woff",
        "webfonts/fa-brands-400.woff2",
        "webfonts/fa-regular-400.eot",
        "webfonts/fa-regular-400.svg",
        "webfonts/fa-regular-400.ttf",
        "webfonts/fa-regular-400.woff",
        "webfonts/fa-regular-400.woff2",
        "webfonts/fa-solid-900.eot",
        "webfonts/fa-solid-900.svg",
        "webfonts/fa-solid-900.ttf",
        "webfonts/fa-solid-900.woff",
        "webfonts/fa-solid-900.woff2"
      ]
    }
  ]
}

Sample

@using Table.Net

<Table Loader=Loader Context="wf" Dark=true Rounded=true>
    <Loading><p>Loading...</p></Loading>
    <Header>
        <Column Field="Date" Sortable=true Sort="-1" />
        <Column Field="TemperatureC" Label="Temp. (C)" Sortable=true />
        <Column Field="TemperatureF" Label="Temp. (F)" Sortable=true />
        <Column Field="Summary" Filterable=true />
    </Header>
    <Row>
        <Cell>@wf.Date.ToShortDateString()</Cell>
        <Cell Align=Align.Right >@wf.TemperatureC</Cell>
        <Cell Align=Align.Right>@wf.TemperatureF</Cell>
        <Cell Align=Align.Center>@wf.Summary</Cell>
    </Row>
</Table>

@code {
    private async Task<IList<WeatherForecast>> Loader() => ...;
}

Styling Parameters

Parameter Default Bootstrap
Small true table-sm
Dark false table-dark
HeadDark false thead-dark
Striped false table-striped
Hover false table-hover
Rounded false rounded

Interactivity

  • OnRowClick: EventCallback<TItem>

Columns

Parameter Default Description
Field Name of property in TItem
Label Header override, Field is used by default
Sortable false Allows sorting
Filterable false Allows filtering
Sort 0 Indicates default sorting (-1 for descending, 1 for ascending)
Tooltip Information text displayed on column hover
TooltipPlacement center left, center or right