# 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) %>