Data Table

The data table is a component that allows you to easily consume data from a pageable API endpoint, while allowing flexible and type safe customization of the row layout.

To use the data table an end point must check these criteria:

  • The endpoint contract must use inputStructure: 'detailed'
  • The endpoint contract must define a query in the input with the following fields:
    • skip: z.coerce.number().optional() Number of entries to omit. Will be (page number - 1) * page size
    • take: z.coerce.number().optional() Number of entries to fetch. Is equal to the page size
    • ( Optional ) filters: z.record(ExpectedEntryType.keyof(), z.string()).optional() Optional filters
    • ( Optional ) sortBy: z.record(ExpectedEntryType.keyof(), z.enum(['asc', 'desc'])).optional() Optional columns that the results should be sortedBy
  • The endpoint contract must define an output with the following fields:
    • totalCount: z.number() The total number of entries for the given filters
    • items: z.array(ExpectedEntryType) Returns the current page based on query params