Blazorise DataGrid: Auto Generate Columns

The DataGrid can automatically generate columns based on the TItem type.

Overview

If no columns are defined, the DataGrid will automatically generate columns based on the TItem type.

An attribute based API is provided to specify additional metadata that is used to specify how the columns will be built.

  • [DisplayAttribute] - Represents an attribute that can be applied to properties or fields to specify the caption.
  • [OrderAttribute] - Represents an attribute that can be applied to properties or fields to specify the order in which they should be displayed or edited.
  • [IgnoreFieldAttribute] - Represents an attribute that can be applied to properties or fields to specify they should not be automatically generated.
  • [SelectAttribute] - Represents an attribute that can be applied to properties or fields to specify additional metadata for a select component.
  • [NumericAttribute] - Represents an attribute that can be applied to numeric properties or fields to specify additional metadata.
  • [DateAttribute] - Represents an attribute that can be applied to date properties or fields to specify additional metadata.

Example

1 - 6 of 6 items
6 items
@using System.ComponentModel.DataAnnotations

<DataGrid TItem="Example"
          Data="data"
          Responsive
          ShowPager
          ShowPageSizes Editable>
    <DataGridCommandColumn TItem="Example" />
</DataGrid>

@code {
    public class Example
    {
        [Order( DisplayOrder = 1, EditOrder = 2 )]
        [Display( Name = "Name" )]
        public string FirstName { get; set; }

        [Order( DisplayOrder = 2, EditOrder = 3 )]
        public string LastName { get; set; }

        [Order( DisplayOrder = 3, EditOrder = 4 )]
        [Numeric( EnableStep = true, ShowStepButtons = true, Step = 1 )]
        public int Age { get; set; }

        [Order( DisplayOrder = 5, EditOrder = 0 )]
        public Status Status { get; set; }

        [Numeric( EnableStep = true, ShowStepButtons = true, Step = 100 )]
        [Order( DisplayOrder = 4, EditOrder = 1 )]
        public decimal Balance { get; set; }

        [IgnoreField]
        public string FieldToBeIgnored { get; set; }

        [Order( DisplayOrder = 5, EditOrder = 0 )]
        [Display( Name = "Gender" )]
        [Select( GetDataFunction = "GetGenders", TextField = nameof( Blazorise.Shared.Data.Gender.Description ), ValueField = nameof( Blazorise.Shared.Data.Gender.Code ) )]
        public string Gender { get; set; }

        [Order( DisplayOrder = 6, EditOrder = 6 )]
        [Display( Name = "DOB" )]
        [Date( InputMode = DateInputMode.Date )]
        public DateOnly DateOfBirth { get; set; }

        public IEnumerable<Gender> GetGenders()
            => EmployeeData.Genders;
    }

    public enum Status
    {
        Active,
        Inactive
    }

    private IEnumerable<Example> data = new List<Example>()
    {
        new(){ FirstName = "John", LastName = "Doe", Gender = "M", Age = 30, Balance = 1000, Status = Status.Active, FieldToBeIgnored = "4a92b1ea-e82d-4920-8d22-198a2385945e", DateOfBirth = new DateOnly(1992,03,05) },
        new(){ FirstName = "Jane", LastName = "Doe", Gender = "F",Age = 28, Balance = 2000, Status = Status.Active, FieldToBeIgnored = "cb85ede4-4a66-4ab5-813d-6f09b4781489", DateOfBirth = new DateOnly(1972,03,03) },
        new(){ FirstName = "Joe", LastName = "Doe", Gender = "M",Age = 26, Balance = 3000, Status = Status.Inactive, FieldToBeIgnored = "0725a26f-1b5c-4659-be06-2b4b108a2fb4", DateOfBirth = new DateOnly(1981,12,05) },
        new(){ FirstName = "Jill", LastName = "Doe", Gender = "F",Age = 24, Balance = 4000, Status = Status.Inactive, FieldToBeIgnored = "bb85d60c-96fa-4137-a9f1-e09ec0497f5d", DateOfBirth = new DateOnly(1980,05,29) },
        new(){ FirstName = "Jack", LastName = "Doe", Gender = "M",Age = 22, Balance = 5000, Status = Status.Active, FieldToBeIgnored = "76471dfe-2efd-4ec5-b192-82abc1b05c72", DateOfBirth = new DateOnly(1990,09,10) },
        new(){ FirstName = "Jen", LastName = "Doe",Gender = "F", Age = 20, Balance = 6000, Status = Status.Active, FieldToBeIgnored = "be83a3c0-9636-4ebd-acca-08e6ffb5c469", DateOfBirth = new DateOnly(2000,01,01) },
    };
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

On this page