Table functions > Content in a column

Crud Elite

Getting Started

Action Column

Hide action column

Add buttons to action column

Table functions

Default sorting

“Show 10 records” drop-down

The “Search…” placeholder

Exported file

Columns ordering

Custom content in a column

Confirm delete popup

Common issues

Edit auratheme.table.js

Other

Clone for another table

How it works

Read data for the table

How to dynamically display the content in a column?

Please follow the steps below.

1. Go to /Views/Home/_Table.cshtml.

2. Find the code below. It’s the original code that displays the columns based on the settings in ClientTableConfig.

   @foreach (var column in CrudElite.Helpers.ClientTableConfig.TableColumns)
   {
       <td class="d-block d-lg-table-cell py-2 py-lg-3">@item.GetType().GetProperty(column.Title)?.GetValue(item, null)</td>
   }
   

3. Let’s say we want to dynamically display the “Name” with the following condition.

   • Display the “Name” in red if the name is less than 5 characters
   • Display the “Name” in yellow if the name is more than or equal to 5 characters

   You can do the following to achieve this.

   @foreach (var column in CrudElite.Helpers.ClientTableConfig.TableColumns)
   {
       **if (column.Title == nameof(ClientViewModel.Name))
   		{
   		    <td class="d-block d-lg-table-cell py-2 py-lg-3 @(item.Name.Length > 5 ? "text-warning" : "text-danger")">@item.Name</td>
   		}**
   		else
   		{
   		    <td class="d-block d-lg-table-cell py-2 py-lg-3">@item.GetType().GetProperty(column.Title)?.GetValue(item, null)</td>
   		}
   }