.Net 5 Blazor WASM want to show only part of string in table column

Question

I am building a .Net 5 Blazor WASM project and one of the columns that I am displaying in a table can be up to 4000 characters long. I want to substring it but keep getting errors. The following code works well but the column (Description) is way to big:

@if ((definitions == null) || (!definitions.Any()))
{
    <p>Loading Definitions...</p>
}
else
{
     <table class="table table-striped">
         <thead>
             <tr>
                 <th>Name</th>
                 <th>Description</th>
                 <th>Parameters</th>
                 <th>Created</th>
                 <th>Modified</th>
             </tr>
         </thead>
         <tbody>
             @foreach(var def in definitions)
             {
                 <tr>
                     <td>@def.Name</td>
                     <td>@def.Description</td>
                     <td>@def.Parameters</td>
                     <td>@def.CreatedOnUtc</td>
                     <td>@def.ModifiedOnUtc</td>
                 </tr>
             }
         </tbody>
     </table>
}

I have tried both of the following but get errors when I navigate to the page:

<td>@def.Description.Substring(0,40)</td>  
<td>@def.Description.ToString().Substring(0,40)</td>

Any help appreciated.

Answer 1

you can use css to truncate the text in the cell

   @page "/"

@if ((definitions == null) || (!definitions.Any()))
{
    <p>Loading Definitions...</p>
}
else
{
     <table class="table table-striped">
         <thead>
             <tr>
                 <th>Name</th>
                 <th>Description</th>
                 <th>Parameters</th>
                 <th>Created</th>
                 <th>Modified</th>
             </tr>
         </thead>
         <tbody>
             @foreach(var def in definitions)
             {
                 <tr>
                     <td>@def.Name</td>
                     <td class="description-cell"><div class="ellipsis">@def.Description</div></td>
                     <td>@def.Parameters</td>
                     <td>@def.CreatedOnUtc</td>
                     <td>@def.ModifiedOnUtc</td>
                 </tr>
             }
         </tbody>
     </table>
}

@code{
   List<def> definitions = new List<def>();

       protected override void OnInitialized(){
            definitions.Add(new def{ Name="Name 1", Description="now is the time for all good men to come to the aide of their party, now is the time for all good men to come to the aide of their party, now is the time for all good men to come to the aide of their party"});
            definitions.Add(new def{ Name="Name 2", Description="The quick brown fox jumped over the lazy dog"});
       }

    public class def{
        public string Name{get;set;}
        public string Description {get;set;}
        public string Parameters {get;set;}
        public string CreatedOnUtc {get;set;}
        public string ModifiedOnUtc {get;set;}
     }  
}

<style>

td.description-cell {
   max-width: 15em;
}
div.ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
</style>

you need to add a div to the cell and apply the ellipse class to that div and then you can set the width on the cell and the ellipse will truncate the string.

you can play with it here https://blazorfiddle.com/s/ja9anekp