Example app · synthetic data
Customer Management
A customer module the way a CRM team uses one: find the accounts that need attention, fix a record in place, hand a batch of customers to another owner, and take the list to a spreadsheet. Every control above is the real React DataGrid, running in your browser over 2,500 made-up customers.
Things to try
- Open the “At-risk accounts” view and watch the figures above the grid change.
- Tick a few customers and reassign them to another owner.
- Double-click a Status or Owner cell, pick a value, then Save.
- Type a broken email address and see the cell refuse it.
- Expand a row for the contact, recent orders and notes.
- Group by owner for each owner’s customers and revenue.
- Open Chart in the table’s toolbar, click a segment’s bar to filter the table, then go full screen.
What it shows
The quick filters, the saved views and the filter row are one filter: a status chip writes the same condition as the Status column’s header filter, the sentence under the grid reads it back, and its × clears the chips too. The five figures at the top are computed from the rows in view, so they follow every filter, search, bulk change and saved edit.
Edits wait in the grid until you press Save. Each saved row goes back to the app’s own data, which is what the figures and the detail panel read, and your changes stay for this browser tab only. The detail panel’s orders come from the same seeded history as the row’s Orders and Revenue, so they add up to the cent.
The chart is the grid’s own chart panel, opened above the table by the toolbar’s Chart button: revenue by segment over the rows in view, so it follows the same filters. A click on a bar filters the table to that segment and a second click clears it; the panel’s toolbar switches the chart type and the column, downloads PNG or SVG and goes full screen.
Free and paid
Sorting by several columns, filtering, search, column chooser, pinning and resizing, row selection, one level of grouping, footer totals, CSV export, cards on a phone, colour schemes and density are in the free DataGrid. Batch editing with validation rules, the chart, the detail panel, group subtotals and multi-level grouping, Excel export and the status bar are the Enterprise edition; the app marks each of them. See pricing.
How it is built
Read the filtering, saved views, editing, grouping and theming guides for the pieces this app puts together.