Sorting, more, and special cells

PostTable(
  {
    page: Posts.page(model),
    onOpen: row => Message.OpenedPost({ id: row.id }),
    onMore: Message.RequestedMorePosts(), // shown while the page has a next one
    sort: {
      title: {
        direction: model.postSort === 'title' ? 'asc' : undefined,
        message: Message.SortedPosts({ sort: 'title' }),
      },
    },
    cells: {
      published: (row, h) => h.span([h.Class(row.published ? 'live' : 'draft')], ['●']),
    },
    words: { yes: 'Live', no: 'Draft', empty: 'No posts yet.', more: 'Load more', retry: 'Reload' },
  },
  h,
)

• sort: PostSort.inputs(model.postSort, (_, column) => Message.SortedPosts({ column })) is the whole sort input when the state is a foldkit-crud Sort.
• Sorting is state the application holds, as the query's input (see foldkit-crud). sort names the columns that sort, how each is sorted now, and the Message a click sends. The header becomes a button and the column carries aria-sort.
• cells draws one column specially, and gets the whole row, so a link can use the id. renderers draws every column of a Display kind, a shipped one or your own, in any list or detail: renderers: { Badge: ({ value, h, badge }) => h.span(badge.attrs(), [String(value)]) }. badge is the list's (or detail's) badge Slot, so what a renderer draws is styled like any other part. A column's cells entry wins over its kind's renderer, and a kind with neither says Display.show.
• words is text, with {message} a blank in failed; it shares no key with a form's words, so one object serves both.
• words supplies every word the view says itself, and the words Display.show uses (yes, no, nothing, separator), for wording and for translation.

A detail#

import { DetailView } from 'foldkit-mixins-crud'

const PostLines = DetailView.forMessages<Message>().define(PostDetail)

PostLines({ value: Shown.value(model) }, h) // Shown = PostDetail.at({ data, id })

A dl with a dt per shown field and its value in a dd. It takes cells and words as a list does.