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 = "Description", ValueField = "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 API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page