#DataGrid

DataGrid in UIToolbox shows a list of items in a table with typed cell editors. It wraps the native MultiColumnListView, so the rows are virtual: only the visible rows have elements.

Video tutorial: Data grid. All videos: Video tutorials.

<tb:DataGrid name="units" selection-mode="Multiple" style="height: 250px;">
    <tb:DataGridColumn header="Name" binding-path="Name" width="130" />
    <tb:DataGridColumn header="Level" binding-path="Level" width="70" />
    <tb:DataGridColumn header="Class" binding-path="Class" width="100" />
    <tb:DataGridColumn header="Action" cell-type="Button" button-text="Heal" width="70" sortable="false" />
</tb:DataGrid>

var grid = root.Q<DataGrid>("units");
grid.ItemsSource = units;   // a List<Unit>; the edits write to the items
grid.CellValueChanged += (i, column, old, now) => Debug.Log($"{units[i].Name}: {column.Header} {old} to {now}");
grid.CellClicked += (i, column) => grid.SetValue(i, grid.GetColumn("Health")!, 100f);
grid.SetFilter("Level", level => (int)level! >= 10);
grid.SearchText = "ash";
GUIUtility.systemCopyBuffer = grid.ToCsv(selectedOnly: true);

A grid with a check box column, pages of 25 rows with page buttons, and a footer row:

<tb:DataGrid name="units" selection-column="true" page-size="25" show-pagination="true" show-footer="true">
    <tb:DataGridColumn header="Name" binding-path="Name" width="130" can-hide="false" footer-text="Total" />
    <tb:DataGridColumn header="Level" binding-path="Level" width="70" footer-text="Avg " />
    <tb:DataGridColumn header="Notes" binding-path="Notes" width="200" visible="false" />
</tb:DataGrid>

grid.SetFooter("Level", rows => rows.Count == 0 ? "" : rows.Average(i => units[i].Level).ToString("F1"));
columnsButton.clicked += () => grid.ShowColumnMenu(new Vector2(columnsButton.worldBound.xMin, columnsButton.worldBound.yMax));
grid.VisibleColumnsChanged += () => PlayerPrefs.SetString("columns", string.Join(",", grid.VisibleColumns));
grid.SetVisibleColumns(PlayerPrefs.GetString("columns", "Name,Level").Split(','));

• An edit that the setter refuses logs the exception, and the cell shows the item value again.
• In the UI Builder, a grid without items shows three sample rows in a dashed outline. A column of the UXML file shows its header and the row number, such as "Name 1". The sample does not show in Play mode or in a build, and the UI Builder does not save it to the UXML file.
• Text that does not convert, such as "five" for a number, returns false from SetValue without a log.
• A click on a group header collapses or expands the group. Header rows are never in the selection, and ShownIndices leaves them out.
• An edit of the group column moves the row to its new group.

#Column menu

• A right-click on the header shows a menu with one item per column. A check mark shows that the column is visible. A click on an item shows or hides the column and closes the menu.
• The last column that shows has a disabled item, so the grid always has one column.
• A hidden column keeps its filter and its sort. The search and the CSV leave it out.
• VisibleColumns has the names in the shown order. SetVisibleColumns changes which columns show, not their order.
• The header has no keyboard focus. For keyboard and gamepad users, add a button that calls ShowColumnMenu; the arrow keys and Submit then work in the menu.

#Selection column

• The check boxes show the selection of the grid and change it. SelectedIndices, SetSelection and SelectionChanged work as before; a row click still selects.
• The header box selects all shown rows, or none. It shows a mixed state when some of the shown rows are selected.
• With selection-mode="Single", a row box selects only its row and the header box is disabled. With None, the boxes do nothing.
• The column is not in Columns or VisibleColumns, and not in the CSV.

#Pages

• The filters and the sort come first; then the grid cuts the rows in pages. A sort or a filter keeps the page number when that page still exists, or goes to the last page.
• ShownIndices has the rows of the current page. FilteredIndices and ToCsv() have the rows of all pages. ToCsv(selectedOnly: true) has the selected rows.
• The selection holds rows of the current page only. A page change removes the rows of the old page from the selection and sends SelectionChanged. The header box of the selection column selects the rows of the current page.
• With groups, a page holds PageSize items, counted in group order; the header rows do not count. A group that goes over a page end shows its header on both pages, with the count of the whole group.
• A collapsed group keeps its place in the pages, so the page count does not change with a collapse. A page can then show only headers.
• Groups has the groups of all pages.

#Footer

• The footer row stays under the rows; it does not scroll up or down. Its cells follow the column widths, the column order and the horizontal scroll.
• The grid calls the callbacks of SetFooter after a filter, a sort, a group collapse, a page change and an edit. Call Refresh() after your code changes the items.
• The callback gets the rows of all pages, without the rows of collapsed groups. For the rows of the current page, read ShownIndices in the callback.

Tips:

• For a sum, a count or an average, write one line: grid.SetFooter("Health", rows => rows.Sum(i => units[i].Health).ToString("F0")).
• Set can-hide="false" on the column that names the row, so the user cannot hide it.
• To keep the user's columns, save VisibleColumns in the VisibleColumnsChanged handler and give the names to SetVisibleColumns at the start.
• Use pages for a list that the user reads page by page. The rows are virtual, so a long list without pages is also fast.

#Styling

To put the page buttons on the right and make the footer text normal:

.tb-data-grid__pagination { justify-content: flex-end; }
.tb-data-grid__footer-cell { -unity-font-style: normal; }