VelvetKit

Previews

No matching results.

x
1
<div class="[&_.ag-row]:cursor-pointer" style="height: 628px" data-controller="ui--data-grid" data-ui--data-grid-url-value="/customers.json" data-ui--data-grid-columns-value="[{"field":"id","headerName":"ID","type":"number","sortable":true,"filterable":true,"width":90},{"field":"name","headerName":"Name","type":"text","sortable":true,"filterable":true},{"field":"plan","headerName":"Plan","type":"text","sortable":true,"filterable":true},{"field":"owner","headerName":"Owner","type":"text","sortable":false,"filterable":false}]" data-ui--data-grid-page-size-value="15" data-ui--data-grid-empty-message-value="Nothing to show" data-ui--data-grid-module-url-value="/assets/ag_grid-5984dabb.js"></div>
1
2
3
4
5
6
render(UI::DataGrid.new(url: "/customers.json", page_size: page_size.to_i)) do |grid|
  grid.column(:id, "ID", width: 90, type: :number)
  grid.column(:name, "Name")
  grid.column(:plan, "Plan")
  grid.column(:owner, "Owner", sortable: false, filterable: false)
end

The grid fetches its rows from the server, so a preview needs a real class endpoint to point at, so here it shows the markup and the reserved height. velvetkit.com's Data grid page has a live one.

Param Description Input

—