https://github.com/pablofrommars/TableNet

Table.Net - Blazor DataTable Component
https://github.com/pablofrommars/TableNet

blazor datatables

Last synced: 19 days ago
JSON representation

Table.Net - Blazor DataTable Component

• Host: GitHub
• URL: https://github.com/pablofrommars/TableNet
• Owner: pablofrommars
• License: mit
• Created: 2020-03-23T12:41:46.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-04-08T17:29:27.000Z (over 4 years ago)
• Last Synced: 2024-07-31T15:03:04.903Z (4 months ago)
• Topics: blazor, datatables
• Language: C#
• Homepage: https://pablofrommars.github.io
• Size: 1.31 MB
• Stars: 9
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![License](https://img.shields.io/github/license/BlazorExtensions/Storage.svg?longCache=true&style=flat-square)](https://github.com/pablofrommars/TableNet/blob/master/LICENSE)

[![Package Version](https://img.shields.io/badge/nuget-v1.0.8-blue.svg?longCache=true&style=flat-square)](https://www.nuget.org/packages/Table.Net/1.0.8)

# Table.Net

Blazor DataTable Component ([Demo](https://pablofrommars.github.io/covid19))

![example](Demo/wwwroot/img/example.png)

## Features

* Flexible design

* Sorting

* Filtering

* Tooltip

* Asynchronous

## Install

* Add Table.Net [nuget package](https://www.nuget.org/packages/Table.Net)

* Reference static assets: ``````

## Dependencies

* [Bootstrap v4](https://getbootstrap.com/)

* [Font Awesome](https://fontawesome.com/)

*libman.json sample:*

```json

{

  "version": "1.0",

  "defaultProvider": "cdnjs",

  "libraries": [

    {

      "library": "[email protected]",

      "destination": "wwwroot/lib/twitter-bootstrap/",

      "files": [

        "css/bootstrap.min.css"

      ]

    },

    {

      "library": "[email protected]",

      "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

```razor

@using Table.Net

    
Loading...

    

        

        

        

        

    

    

        @wf.Date.ToShortDateString()

        @wf.TemperatureC

        @wf.TemperatureF

        @wf.Summary

    


@code {

    private async Task> Loader() => ...;

}

```

## Styling Parameters

| Parameter | Default | Bootstrap |

|:----------|:-------:|----------:|

|Small|true|[table-sm](https://getbootstrap.com/docs/4.4/content/tables/#small-table)|

|Dark|false|[table-dark](https://getbootstrap.com/docs/4.4/content/tables/#examples)|

|HeadDark|false|[thead-dark](https://getbootstrap.com/docs/4.4/content/tables/#table-head-options)|

|Striped|false|[table-striped](https://getbootstrap.com/docs/4.4/content/tables/#striped-rows)|

|Hover|false|[table-hover](https://getbootstrap.com/docs/4.4/content/tables/#hoverable-rows)|

|Rounded|false|[rounded](https://getbootstrap.com/docs/4.4/utilities/borders/#border-radius)|

## Interactivity

* OnRowClick: ```EventCallback```

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