Columns

Reference

The columns option in the initialisation parameter allows you to define details about the way individual columns behave. For a full list of column options that can be set, please see the related parameters below.

Note that if you use columns to define your columns, you must have an entry in the array for every single column that you have in your table (these can be null if you don't wish to specify any options).

Configure columns:

@(Html.DataTable<Person>()
    .Columns(c =>
    {
        c.Field(f => f.Id).Visible(false);
        c.Field(f => f.Name).Title("Name");
        c.Field(f => f.Age).Width("5%");
        c.Field(f => f.Title);
    })
...

Field¶

Make a column with defined type properties.

.Field(f => f.Name)

Title¶

Set column header. Default is property name.

.Title("First Name")

Or use DisplayAttribute for properties.

[Display(Name = "First Name")]
public string Name { get; set; }

Name¶

Set a descriptive name for a column.

.Name("personName")

Visible¶

Set column visible or hidden, default is true.

.Visible(true)

Orderable¶

Set column orderable or not, default is true.

.Orderable(true)

Searchable¶

Set column searchable or not, default is true.

.Searchable(true)

Width¶

This parameter can be used to define the width of a column, and may take any CSS value (10%, 3em, 20px etc).

.Width("10%")

ClassName¶

Set css class of column.

.Class("text-danger")

DefaultContent¶

Set default value for null data.

.DefaultContent("No data")

DisplayFormat¶

Customize datetime format with Moment.js expression.

.DisplayFormat("DD-MMM-Y")

Or use DisplayFormatAttribute for properties. (needed also moment.js)

[DisplayFormat(DataFormatString = "DD-MMM-Y")]
public DateTime? BirthDate { get; set; }

Template¶

Customize column template using "data" for comparison.

.Template("(data === true) ? '<span class=\"bi bi-bookmark-check-fill\"></span>' : '<span class=\"bi bi-bookmark-x\"></span>'");

ContentPadding¶

Add padding to the text content used when calculating the optimal width for a table.

.ContentPadding("mmm")

CreatedCell¶

Cell created callback to allow DOM manipulation.

.CreatedCell("functionName")

Set the column footer text.

.Footer("footer text")

Type¶

Set the column type - used for filtering and sorting string processing.

.Type(ColumnType.Date)

ResponsivePriority¶

Set column's visibility priority.

.ResponsivePriority(1)