Blazor Smart.Table Change Columns

Setup The Project

Follow the Getting Started guide to set up your Blazor Application with Smart UI.

Setup the Blazor Smart.Table

Follow the Get Started with Smart.Table guide to set up the component.

Change Columns

This tutorial will show you how you can change the Table columns by dynamically removing or adding new columns.
First, you need to set the Columns property of the Table to be an ObservableCollection of TableColumn, like this:

    ObservableCollection<TableColumn> columns = new ObservableCollection<TableColumn>()
    {
        new TableColumn()
        {
            DataField = "Id",
            Label = "Id",
            DataType = TableColumnDataType.Number
        },
        new TableColumn()
        {
            DataField = "FirstName",
            Label = "First Name",
            DataType = TableColumnDataType.String
        },
        new TableColumn()
        {
            DataField = "LastName",
            Label = "Last Name",
            DataType = TableColumnDataType.String
        }
    };

Then you can dinamically add or remove columns to the observable collection and this will update the Table.

Example

Here is a full example of changing the Table's columns:

    @using System.Collections.ObjectModel
    @using Smart.Blazor.Demos.Data
    @inject RandomDataService dataService

    <div Name="Table">
        <Table @ref="table" DataSource="dataRecords" Columns="@columns" />
    
        <div class="options">
            <Button Disabled="@addBtnDisabled" OnClick="AddColumn">Add a column</Button>
            <Button Disabled="@removeBtnDisabled" OnClick="RemoveLastColumn">Remove last column</Button>
        </div>    
    </div>
        
    @code {
        Table table;
        bool addBtnDisabled = false;
        bool removeBtnDisabled = false;
    
        private List<DataRecord> dataRecords;
    
        List<TableColumn> allColumns = new List<TableColumn>()
        {
            new TableColumn()
            {
                DataField = "Id",
                Label = "Id",
                DataType = TableColumnDataType.Number
            },
            new TableColumn()
            {
                DataField = "FirstName",
                Label = "First Name",
                DataType = TableColumnDataType.String
            },
            new TableColumn()
            {
                DataField = "LastName",
                Label = "Last Name",
                DataType = TableColumnDataType.String
            },
            new TableColumn()
            {
                DataField = "ProductName",
                Label = "Product Name",
                DataType = TableColumnDataType.String
            },
            new TableColumn()
            {
                DataField = "Price",
                Label = "Price",
                DataType = TableColumnDataType.Number
            },
            new TableColumn()
            {
                DataField = "Quantity",
                Label = "Quantity",
                DataType = TableColumnDataType.Number
            },
            new TableColumn()
            {
                DataField = "Total",
                Label = "Total",
                DataType = TableColumnDataType.Number
            },
            new TableColumn()
            {
                DataField = "TimeOfPurchase",
                Label = "Date",
                DataType = TableColumnDataType.Date
            },
            new TableColumn()
            {
                DataField = "Expired",
                Label = "Expired",
                DataType = TableColumnDataType.Boolean
            }
        };
        
        ObservableCollection<TableColumn> columns = new ObservableCollection<TableColumn>()
        {
            new TableColumn()
            {
                DataField = "Id",
                Label = "Id",
                DataType = TableColumnDataType.Number
            },
            new TableColumn()
            {
                DataField = "FirstName",
                Label = "First Name",
                DataType = TableColumnDataType.String
            },
            new TableColumn()
            {
                DataField = "LastName",
                Label = "Last Name",
                DataType = TableColumnDataType.String
            }
        };
    
        protected override void OnInitialized()
        {
            base.OnInitialized();
            dataRecords = dataService.GenerateData(15);
        }
    
        private void AddColumn()
        {
            for (int i = 0; i < allColumns.Count; i++)
            {
                if (!columns.Any(c => c.DataField == allColumns[i].DataField))
                {
                    columns.Add(allColumns[i]);
                    break;
                }
            }
    
            removeBtnDisabled = false;
    
            if (columns.Count == allColumns.Count)
            {
                addBtnDisabled = true;
            }
        }
    
        private void RemoveLastColumn()
        {
            columns.RemoveAt(columns.Count - 1);
    
            addBtnDisabled = false;
    
            if (columns.Count == 0)
            {
                removeBtnDisabled = true;
            }
        }
    }