Data grid

Variants of the data grid scenario, each on its own isolated page.

• Orders (baseline)

  Inline-edit a specific status cell. Double-click to edit, Enter to commit, Escape to cancel.

  • grid
  • table
  • inline-edit
  • admin
  • orders

• Column sorting

  Click a column header to sort rows ascending/descending.

  • grid
  • table
  • sort
  • column

• Filter then edit

  Type in the filter box to narrow rows, then inline-edit a cell in the results.

  • grid
  • table
  • filter
  • search
  • inline-edit

• Dropdown cell editor

  Click a status cell to open a <select> dropdown and choose a new value.

  • grid
  • table
  • dropdown
  • select
  • inline-edit

• Pagination + edit

  Navigate to page 2 then inline-edit a cell on that page.

  • grid
  • table
  • pagination
  • paging
  • inline-edit

• Checkbox + bulk action

  Select multiple rows with checkboxes then apply a bulk status change.

  • grid
  • table
  • checkbox
  • bulk-action
  • multi-select