# Data Table Source: https://lumeo.nativ.sh/components/data-table # Data Table A powerful table component with templated headers, rows, loading states, and empty states. ## Installation .NET CLI PackageReference Lumeo CLI dotnet add package Lumeo.DataGrid One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction). ## Usage @using Lumeo ## When to Use - Displaying sortable and filterable datasets with column headers - Row selection for bulk actions like delete, export, or status changes - Paginated lists of records such as users, orders, or transactions Preview Code Default Status Email Amount Success ken@example.com $316.00 Success abe@example.com $242.00 Pending monserrat@example.com $837.00 Failed silas@example.com $874.00 Success carmella@example.com $721.00 Preview Code Loading State Status Email Amount Preview Code Empty State Status Email Amount ### No payments found There are no payments to display yet. Preview Code Sortable Columns Name Email Role Alice Johnson alice@example.com Admin Bob Smith bob@example.com User Carol White carol@example.com Editor Dave Brown dave@example.com User Preview Code Row Selection Name Email Role Alice Johnson alice@example.com Admin Bob Smith bob@example.com User Carol White carol@example.com Editor Dave Brown dave@example.com User 0 of 4 row(s) selected ## API Reference ### DataTable Prop Type Default Description Items IEnumerable? null The data source for table rows. HeaderTemplate RenderFragment? null Template for the table header row (th elements). RowTemplate RenderFragment? null Template for each data row. Receives the item as context. LoadingTemplate RenderFragment? null Template for skeleton loading rows shown when IsLoading is true. EmptyTemplate RenderFragment? null Template shown when Items is null or empty. IsLoading bool false Show loading skeleton rows instead of data. SkeletonRows int 5 Number of skeleton rows to display when loading. SortColumn string? null The currently sorted column key. Use with @bind-SortColumn. SortColumnChanged EventCallback \- Callback when the sort column changes. SortDir SortDirection Ascending The current sort direction. Values: None, Ascending, Descending. SortDirChanged EventCallback \- Callback when the sort direction changes. OnSort EventCallback<(string, SortDirection)> \- Callback with column key and new direction when a sortable header is clicked. Selectable bool false When true, adds a checkbox column for row selection. SelectedItems HashSet? null The set of currently selected items. Use with @bind-SelectedItems. SelectedItemsChanged EventCallback> \- Callback when the selected items set changes. Virtualize bool false Enables virtualized rendering for large datasets. ItemSize float 48 Estimated height (px) of each row, used when Virtualize is true. Class string? null Additional CSS classes for the table element. AdditionalAttributes Dictionary? null Additional HTML attributes. ### DataTableSortableHeader Prop Type Default Description ChildContent RenderFragment? null The header label content. Column string "" The column key this header controls sorting for. Required. SortColumn string? null The currently active sort column, used to highlight this header. SortDirection DataTable.SortDirection None The current sort direction, used to render the appropriate arrow icon. OnSort EventCallback<(string, SortDirection)> \- Callback invoked with the column key and toggled direction when clicked. Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ## Related Components - [Table](/components/table) — For simple static tables without sorting, selection, or loading states - [Pagination](/components/pagination) — For navigating between pages of data in a table