CRUD / foldkit-mixins-crud

Example

This is a view integration fragment. Define PostList and bind Posts with Crud's list API first; the parent Model and Message union must include its loading and OpenedPost paths. Import Html and HtmlBuilder from foldkit/html for the view signature.

ts
import { ListView } from 'foldkit-mixins-crud'

const PostTable = ListView.forMessages<Message>().define(PostList)

const table = (model: Model, h: HtmlBuilder<Message>): Html =>
  PostTable(
    {
      page: Posts.page(model), // Posts = PostList.at({ data, input })
      onOpen: row => Message.OpenedPost({ id: row.id }),
    },
    h,
  )

That is a whole table: a header per shown column with its label, a row per item, each cell saying what its Display calls for, a status line while there are no rows, and the first cell of each row a button that sends OpenedPost.

  • forMessages<Message>() names the Messages the buttons send, as SlotView.forMessages does. define takes the list itself, not the placed one, and types row from the list's Selection.
  • A column whose Display is Hidden is read and not drawn. Hide the id with Entity.annotateMembers({ id: Display.of(Display.hidden()) }) and row.id is still there for onOpen.