Data grid
UI::DataGridA sortable, filterable, server-paged table on AG Grid.
# VelvetKit
## Data grid (`UI::DataGrid`)
A sortable, filterable, server-paged table on AG Grid.
Add it: `bin/rails generate velvetkit:add data_grid`
Stimulus: `ui--data-grid`
Installs: `ag-grid-community`
### Arguments
```ruby
UI::DataGrid.new(url:, page_size: 15, empty_message: nil, class: nil, **html_attrs)
```
### Notes
UI::DataGrid — a sortable, filterable, server-paged table backed by AG Grid.
The grid holds one page at a time and asks the server for the next, sending
the sort and filter it wants applied, so paging, sorting and filtering all
happen in the database. The server answers GET `url` with `startRow`,
`endRow`, `sortModel` and `filterModel` (both JSON) as params, returning
`{ "rows": [...], "total": n }`.
Columns are declared in Ruby so the headers, their widths and which of them
the server will accept a sort or filter for are decided in one place.
AG Grid is ~365 KB gzipped, so the Stimulus controller fetches it at connect
time: a page without a grid never downloads it.
Usage:
<%= render(UI::DataGrid.new(url: customers_path(format: :json)) do |grid|
grid.column(:id, t(".id"), width: 90, type: :number)
grid.column(:name, t(".name"))
grid.column(:owner, t(".owner"), sortable: false, filterable: false)
end) %>
bin/rails generate velvetkit:add data_grid- Also adds
- Nothing else
- Stimulus
- ui--data-grid
- Installs
- ag-grid-community
Live demo
Talks to a serverSort a column, or filter one from its menu. Each change asks this site for a fresh page of 120 sample rows.
API
Arguments
UI::DataGrid.new(url:, page_size: 15, empty_message: nil, class: nil, **html_attrs)Notes
UI::DataGrid — a sortable, filterable, server-paged table backed by AG Grid.
The grid holds one page at a time and asks the server for the next, sending
the sort and filter it wants applied, so paging, sorting and filtering all
happen in the database. The server answers GET `url` with `startRow`,
`endRow`, `sortModel` and `filterModel` (both JSON) as params, returning
`{ "rows": [...], "total": n }`.
Columns are declared in Ruby so the headers, their widths and which of them
the server will accept a sort or filter for are decided in one place.
AG Grid is ~365 KB gzipped, so the Stimulus controller fetches it at connect
time: a page without a grid never downloads it.
Usage:
<%= render(UI::DataGrid.new(url: customers_path(format: :json)) do |grid|
grid.column(:id, t(".id"), width: 90, type: :number)
grid.column(:name, t(".name"))
grid.column(:owner, t(".owner"), sortable: false, filterable: false)
end) %>