Rate and Rank Demos

You can click a cell to edit it. Hit enter to confirm or escape to cancel. You can also hit tab to go to the next cell and edit it. Note that editing the "Rank" column changes the order of the rows. i.e. if you edit a row's rank and set it to one, that row becomes the new row #1 and the rest move down. You can also drag and drop rows to re-order them.

Grids can also have rich text columns (formatted inline using markdown) and images. Drag an image onto a column to set it. The image data gets saved inline.

There are a number of other things you can do to a grid: Use the "+ Add Row" to add a new empty row at the bottom. You can drag a row to the "remove" area underneath the grid to delete. Use control+z to undo changes and edits. control+Z (shift z) will redo changes that have been undone. There is actually a pair of button for doing both of these all the way at the bottom of the page. Both the keys and buttons undo and redo changes for all grids on the page.

Here's a combination of multiple column types into an example of using the grid to rank favorite movies. The "Seen" column is using an "option" column type which gives you a drop-down menu of choices. It's hard-coded to make the cell green if "yes" is selected. Columns of this type will apply a class to the cell so you can use CSS to control the appearance depending on which option is selected.