SimpleColumn<T>


The SimpleColumn<T> component represents a single column in the grid. The column is responsible for displaying and formatting your data in addition to other abilities, see the example below or the properties table at the bottom of the page for full details


Data Formatting


The Format property on SimpleColumn<T> provides an easy way to format data in your grid. The following options are provided;

  • None (Default option)
  • ShortDate
  • LongDate
  • FullDateTime
  • Time
  • Money

Custom Formatting


If you want full control over the formatting of a column or need other properties / data from your object, then you should use SimpleColumnTemplate, see the example below



<SimpleGrid
    TType="Data"
    SimpleGridDataSource="new SimpleGridEnumerableDataSource<Data>(_data)">
    <Columns>
        <SimpleColumn TType="Data" For="@(x => x.Id)" />
        <SimpleColumn TType="Data" For="@(x => x.Name)">
            <SimpleColumnTemplate Context="item">
                <div class="border-glow">
                    <span><strong>Name: </strong>@item.Name</span>
                    <br/>
                    <span><strong>Id: #</strong>@(item.Id + 1_000_000)</span>
                    <br/>
                    <br/>
                    <span><strong>Current Date:</strong>@(DateTime.Now.Date.ToShortDateString())</span>
                    <br/>
                    <small>Data Provided By: Mystery Machine Inc.™️</small>
                </div>
            </SimpleColumnTemplate>
        </SimpleColumn>
    </Columns>
</SimpleGrid>

SimpleColumn<T> Properties

The simple column component has a range of properties that can be configured to add features to your grid. The table below lists them all in detail.


Property Type Required Description Default Value
For Expression<Func<bool,T>> ✅ The property that this column is for, example: For="@(x => x.MyProperty)". null
Heading string ❌ Column heading, will use the property name if not provided. Name of property specified in For
Format Enum<Format> ❌ Formatting to apply to property value, see 'Data Formatting' above for more info. Format.None
SimpleColumnTemplate RenderFragment<T> ❌ Custom formatting for column, see 'Custom Formatting' above for more info. null
Sortable bool ❌ If true, it will be possible to sort the grid based on this column (alphabetically, numerically etc.) This will essentially do an .OrderBy(x => x.MyProperty) on your data. false
Searchable bool ❌ If true, this column will be included in searches. Your property MUST be a string for this to be enabled. false
Width int? ❌ Specifies the width of the column as a percentage, for example; a value of '50' will result in this column taking up 50% of the grid. Useful if you need fine control over column sizes null
Hidden bool ❌ If true, this column will not be visible, this is useful if you want to include a property in table searching without actually presenting the data. false
An error has occurred. This application may no longer respond until reloaded. Reload 🗙