react-resource-view

Choosing a layout

Seven variants over one resource, and how the reader switches.

A collection is not one screen. The same articles are a table when you are comparing them, a board when you are moving them along, and a calendar when you are scheduling them. All three are the same resource with a different listComponent.

The seven factories#

Table

tableViewOptionFactory
One column per field of the view's form, editable in place. The default for anything with more than three fields worth comparing.

Cards

cardViewOptionFactory
A grid of cards, grid per row. Right when a record has a title and a couple of attributes.

Item list

itemViewOptionFactory
A plain vertical list. The lightest of the seven, and the one that survives a narrow column.

Columns

columnViewOptionFactory
A board grouped by a key — a kanban. Needs identifierKey and identifierKeyList.

Split

splitViewFactory
The list on the left, the selected item on the right. Replaces the separate detail page.

Calendar

calendarViewOptionFactory
By day, week or month, from a date field. dateKey says which.

Timeline

timelineViewOptionFactory
A Gantt-like band per row, grouped by a key — rooms, staff, vehicles.

Declaring several#

viewVariants is a list. Declare more than one and the view renders a switcher; the reader's choice is written into the URL, so it survives a reload and travels in a shared link.

import {
  cardViewOptionFactory,
  splitViewFactory,
  tableViewOptionFactory,
} from "react-resource-view"

view: {
  form: articleForm,
  viewVariants: [
    tableViewOptionFactory(),        // the default: the first one listed
    cardViewOptionFactory({ grid: 3 }),
    splitViewFactory({ redirectReadToList: true }),
  ],
}

Five layouts over the same articles

The first one wins

With no variant in the URL, the first of the list is used. Ordering them is how you choose the default, and a variant id that no longer exists falls back to it rather than rendering nothing.

How a variant is identified#

Each factory names its variant, and the id is the slug of that name. Pass a name to change both — which you have to do when the same factory appears twice.

// A variant is identified by the slug of its name.
tableViewOptionFactory()                    // id: "table"
cardViewOptionFactory()                     // id: "card"
tableViewOptionFactory({ name: "Compact" }) // id: "compact"

What every variant shares#

A variant is a ViewInterface, so anything a view accepts, a variant accepts — and only for that layout:

  • form — different columns per layout, if the table needs more than the cards.
  • itemsPerPage — a grid of cards holds fewer than a table.
  • components.top, components.bottom, components.noResult, components.pagination.
  • behavior.canExport — a CSV export honouring the current filters.
  • className, icon, label.

The three rendering slots are what a factory actually sets: listComponent draws the collection, rowComponent one record, and itemComponent one field of a record.

Writing your own#

A factory is a preset over createView, nothing more. A layout of your own is three components and one call:

import { createView } from "react-resource-view"

// A factory is just a preset. Nothing stops you writing your own layout.
const heatmapView = createView({
  name: "Heatmap",
  icon: Flame,
  listComponent: MyHeatmap,   // receives { rows }
  rowComponent: MyHeatCell,   // receives { row }
  itemComponent: MyHeatValue, // receives { formInput }
})

Inside those components, useList gives the rows and the mutations, and useCurrentViewResourceContext gives the whole context — loading state, filters, selection.

You need not type any of it: the package ships a command that writes that file where you want it, components and factory included.

npx react-resource-view create-view-variant Heatmap --dir src/views

Create your own view variant takes the generated file apart, line by line.

The next three pages take the built-in layouts one family at a time: table and cards, split and columns, and calendar and timeline — then one you write yourself.