Datatables

Datatables are used to display lists of content in a table format, they can be used to display any type of data.

Defining Datatables

To define datatables in Minoro, you first need a view in which the data will be displayed. You can then use the defineDatatable within that view.

Let's create a very simple view with a datatable that displays a list of items.

import { defineView } from 'minoro'

const ItemSchema = z.object({
  id: z.string(),
  name: z.string(),
  description: z.string().optional(),
  // ...
})
// to avoid displaying possibly long information in the datatable, we can pick only the fields we want to display
const ItemSchemaForDatatable = ItemSchema.pick({
  id: true,
  name: true,
})

export const datatableView = defineView(
  { name: 'Datatable View', icon: 'lucide:info' },
  (view) => {
    view.defineDatatable({
      name: 'Items',
      description: 'List of all items',
      input: ItemSchemaForDatatable,
      jsonSchema: z.toJsonSchema(ItemSchemaForDatatable),
      enableSearch: true,
      searchKeys: ['name'],
      data: async () => {
        const items = await sql`SELECT * FROM items`
        return items
      },
      onRowClick: async ({ fields }) => {
        return redirectToView(itemDetails, {
          itemId: fields.id,
        })
      },
    })
  },
)

Datatables Options

type DatatableOptions = {
  name: string
  /**
   * A Standard Schema V1 compliant schema (zod, valibot, etc.) that defines the structure of the data table.
   * The schema should represent an object, that represents a row in the data table.
   */
  input: YourDataSchema
  /**
   * A JSON Schema that describes the structure of the data table.
   * This is used for the generation of the columns headers and other internal computations.
   */
  jsonSchema?: Record<string, unknown>
  /**
   * A description of the datatable, displayed in the UI.
   */
  description?: string
  /**
   * Whether to enable the search functionality in the datatable.
   * If true, a search input will be displayed above the datatable.
   * @default false
   */
  enableSearch?: boolean
  /**
   * An array of keys from the input schema that should be used for searching.
   * If not provided, the seach will not work.
   */
  searchKeys?: (keyof YourData)[]
  /**
   * A function that returns the data to be displayed in the datatable.
   * This function should return an array of objects that match the input schema.
   * It can be an async function, returning a Promise.
   */
  data: () => MaybePromise<YourData[]>
  /**
   * A function that is called when a row in the datatable is clicked.
   * It receives an object with the fields of the clicked row.
   * It can return a redirection to another view with the `redirectToView` function.
   * See the Buttons documentation for more details on redirections.
   */
  onRowClick?: (
    context: { fields: YourData },
  ) => MaybePromise<ViewRedirection | void>
}