[Blazor] DataGrid Excel-Like features

[wangkanai]

Design notes

Compenent name

• DataGrid

Description

The DataGrid component is a complex UI component for displaying data in a tabular format. It aims to have Excel-like features with inline editing capabilities. As of now, there aren't any rich Blazor UI Frameworks that meet this requirement as a native core feature​. The component will provide functionalities like Excel for editing data.

DataGrid with Excel-like feature that has inline editing capability. As of now I cannot find any rich Blazor UI Framework that meets this requirement as the native core features.

These are among the list of Blazor UI framework that come close that I can imagine about;

1. Blazor Datasheet - Demo
2. Smart Blazor

Features

1. Data Source: The DataGrid component should be able to bind to a collection of data. This collection could come from an array, list, or a real-time data source.
2. Excel-Like Editing: Users should be able to click on a cell in the DataGrid and be able to edit its contents directly, much like how you would in Excel. This involves being able to select the cell, enter an edit mode, make changes, and then save the changes.
3. Column Sorting: Users should be able to click on a column header to sort the data by that column. Clicking once sorts in ascending order, clicking again sorts in descending order.
4. Filtering: Users should have the ability to filter the data in the grid. This could be achieved by providing a filter text box above each column.
5. Pagination: If the amount of data is large, pagination should be provided to navigate through pages.
6. Resizable Columns: Users should be able to resize columns by dragging the boundary of the column header.
7. Customizable Cell Templates: Users should be able to define custom templates for cells if they want to display data in a specific way.
8. Row Grouping: Users could group data based on a particular column.

Technical considerations

• Blazor Component: The DataGrid will be a Blazor component. It should be compatible with both Blazor Server and Blazor WebAssembly projects.
• Performance: The component should be optimized for performance. Care should be taken to ensure that the component performs well even when handling large amounts of data.
• Compatibility: The component should work in all modern web browsers (Chrome, Firefox, Safari, Edge).
• Accessibility: The component should follow accessibility best practices to ensure it can be used by as many people as possible. This includes providing appropriate ARIA roles and properties.
• Test Coverage: The component should have comprehensive test coverage to ensure its functionality.