TableSelect Component Design

[theilgaz]

Hello everyone!

I would like to start a discussion about my highly-needed component.

Description	Content
Component Name	TableSelect
Keywords	Ant design, blazor, dropdown grid, table, select, grid, multiple columns in select component
Short Description	A select component with dropdown data grid by using multiple columns.
Long Description	It should be an extension for Select component which select value from options. Those options can be described with multiple columns in some scenarios. For Ex. We have an object named selectedProject which contains the data in Project entity. Now we have a TableSelect which contains selectedProject value as an object. That Project object can be selected from collection supplied to Table located in popup of TableSelect component. In that popup view, we can search desired project by project code, name or different columns displayed in that grid. The popup grid should be same as Table component.
Example Usages	1. We can just bind a simple collection to TableSelect. 2. Filtering by all string columns in collection. 3. Multiple selections from popup Table in component. 4. Custom template 5. Virtualization using IQueryable 6. Virtualization using OnDataSourceChanged
Real World Example	For Ex. We are developing an e-commerce application. In our order page, we should find the customer. We can find our customer in TableSelect component filtering by Customer Id, Tax Id, Customer Name, City, Country etc. Here is a simple visual example for component. Grid in picture is copied from AntBlazor docs.

[ElderJames]

That's cool. But I would suggest a different name. As is customary in Ant Design, this component should be called TableSelect, since we already have Table and TreeSelect.

[theilgaz]

There is no component named Grid in Ant Design, so we can simply rename the component to TableSelect. However, since the base component is Select, shouldn't we change its name to SelectTable?

[anddrzejb]

There should be the ability to switch from pagination to full table. Obviously best case scenario here would be to put the table into virtualization component. I know that @anranruye has an open draft for table virtualization - maybe that one could be used? Of course, if @anranruye deems it usable.
Aside that, I think this is a great component idea. Currently, it can be achieved to a certain degree with LabelTemplate but it would be really nice to have something more robust out of the box.

[theilgaz]

It's true. I tried using LabelTemplate and ItemTemplate, but they weren't working properly for this component. This component needs pagination and filtering with all the string columns in the table.

This component also requires virtualization. It might be a good idea to include it in open draft.

[anranruye]

There are several approches to achieve this component.

1. Use LabelTemplate and ItemTemplate to render the body, and use DropdownRender to add the header and footer. https://ant-design-blazor.gitee.io/en-US/components/select#components-select-demo-custom-dropdown-menu
2. Use a Table, still, you can work with the current Select component by DropdownRender.
3. Do not use any existing component.

For the virtualization topic, I think my implementation for table works perfectly, the remaining problem is to keep the row selection states.

[theilgaz]

It seems I am not the only one who needs this component. I appreciate your feedback. I tried ItemTemplate, but it didn't allow me to search by all string columns in my table. In my earlier career with .NET and other platforms, I used some controls/components.

In Blazor community, there are some components (like Radzen DropDownDataGrid, DevExpress ComboBox, SyncFusion ComboBox, Infragistics Multi-Column Combo Box etc.)

We can end the discussion if the majority does not believe such a component is needed. Thanks.

[anddrzejb]

@theilgaz You should not get discouraged. I do believe a component library that would like to call itself "an enterprise ready" should have a component like you describe. I also was extensively using combobox with grid-view like functionality. I read @anranruye comment as a suggestion how one could create such a component as a part of built in AntBlazor components.

[anranruye]

Here is an example:

@using System.ComponentModel

    <Select DataSource="@data"
            Mode="multiple"
            @bind-Values="@_selectedItems"
            LabelName="@nameof(Data.Name)"
            Placeholder="table select"
            Style="width: 400px;"
            DropdownRender="@DropdownRender">
    </Select>



<style>
    .ant-select-item{
        display:none;
    }
</style>
@code
{
    IEnumerable<Data> _selectedItems;

    private RenderFragment DropdownRender(RenderFragment originNode)
    {
        RenderFragment<Data> columns = context =>
            @<Template>
                <Selection Key="@context.Key"></Selection>
                <Column @bind-Field="@context.Name">
                    <a>@context.Name</a>
                </Column>
                <Column @bind-Field="@context.Age"></Column>
                <Column @bind-Field="@context.Address">
                    <TitleTemplate>
                        <span> <Icon Type="environment" /> Address </span>
                    </TitleTemplate>
                </Column>
                <Column @bind-Field="@context.Tags">
                    @foreach (var tag in context.Tags)
                    {
                        var color = tag.Length > 5 ? "geekblue" : "green";
                        if (tag == "loser")
                        {
                            color = "volcano";
                        }
                        <Tag Color="@color">@tag</Tag>
                    }
                </Column>
            </Template>;

        RenderFragment customDropdownRender =
            @<Template>
                <Table TItem="Data" DataSource="@data" SelectedRows="_selectedItems"
                       SelectedRowsChanged="v => _selectedItems = v.ToList()" ChildContent="columns">
                </Table>
            </Template>;

        return customDropdownRender;
    }

    Data[] data = new Data[]
    {
        new()
        {
            Key = "1",
            Name = "John Brown",
            Age = 32,
            Address = "New York No. 1 Lake Park",
            Tags = new[] {"nice", "developer"}
        },
        new()
        {
            Key = "2",
            Name = "Jim Green",
            Age = 42,
            Address = "London No. 1 Lake Park",
            Tags = new[] { "loser"}
        },
        new()
        {
            Key = "3",
            Name = "Joe Black",
            Age = 32,
            Address = "Sidney No. 1 Lake Park",
            Tags = new[] { "cool", "teacher" }
        }
    };

    public class Data
    {
        [DisplayName("Key")]
        public string Key { get; set; }

        [DisplayName("Name")]
        public string Name { get; set; }

        [DisplayName("Age")]
        public int Age { get; set; }

        [DisplayName("Address")]
        public string Address { get; set; }

        [DisplayName("Tags")]
        public string[] Tags { get; set; }
    }
}

[theilgaz]

Thanks for the sample. I enjoyed it. Thanks for sharing. This sample is just a simple preview for my shared picture. Here are my needs in addition to your example:

1. Filter by all string columns
2. Single Select (Just click any pixel of an item in Table to bind as Selected)
3. Paging
4. Filtering
5. Sorting

[anranruye]

You can achieve all these with the Table component. To click to select, use a OnRowClick event to set the RowData.Selected to true. Also notice that you will lose all selection when you change the table PageIndex in the current version.