This component renders a table schema, it is used by the JLTable component to render the table.

import type { TableSchema } from '@juicyllama/frontend-core'
namestringThe name of the table
schemaarrayThe array of TableColumn
title[string]The title of the table
event[string]The event the websocket should listen for
endpoint[string]The endpoint to fetch the data from
icon[object]The IconSettings to use for the table
show[object]The show object to use for the table
redirects[object]The redirect settings to use for the table
find[object]The FindOptions settings to use for the table
functions[object]The Functions to use with the actions


This is the schema for each table column you want to render.

import type { TableColumn } from '@juicyllama/frontend-core'
fieldstringThe name of the field, should match the entity key
labelstringThe label to display for the column
primary_key[boolean]If this is the primary key for the entity
required[boolean]If this field is required
align[string]The alignment of the column, can be left, center, or right
sortable[boolean]If this column is sortable
format[Function]The function to format the value in the display
reformat[Function]Used to reformat on create/edit before sending to server
show[boolean]If this column should be shown in the table
form[object]The FormField the form element for this entity item
extra[object]Table Extra options for this column


Control what options are shown/hidden for the table.

clickable[boolean]If the row is clickable
column_filter[boolean]If the column filter is enabled
search_filter[object]If the search filter is enabled, pass the SearchFilterOptions
advanced_filters[boolean]Display button that shows popum with detailed filter per each collumn
add_record[boolean]If the add record button is enabled
update_inline[boolean]If the inline update is enabled
update_record[boolean]If the update record icon is added
delete_record[boolean]If the delete record icon is added
custom_buttons[array]The array of TableCustomButton objects


If you would like to redirect to a different route, rather than handling it in the component, you can use the redirects object.

click[string]The route to redirect to when the row is clicked. You can include row params in the url for example: /edit/:${record_id}/${name.toUpperCase()}/${description}
add[string]The route to redirect to when the add button is clicked
edit[string]The route to redirect to when the edit button is clicked. You can include row params in the url for example: /edit/:${record_id}
delete[string]The route to redirect to when the delete button is clicked. You can include row params in the url for example: /delete/:${record_id}


When actions are performed on the table, you can use the functions object to add custom functionality.

create[Function]The function to run when a new record should be created
findOne[Function]The function to run when a record should be found
findAll[Function]The function to run when all records should be found
stats[Function]The function to run when stats should be found
update[Function]The function to run when a record should be updated
delete[Function]The function to run when a record should be deleted


Additional column items specific to the column type:

typeenumBADGE, HTML

Table Custom Button

If you would like to add your own custom buttons to the table.

This extends CustomButton, so you can use all the same properties as a CustomButton along with these additional properties.

Search Filter Options

placeholder[string]The placeholder text for the search filter

Docs v.0.14.0 Copyright © 2024