This component renders a fully functional table with pagination, sorting, filtering, and more.

This component uses websocket (if enabled on your backend application) to keep the frontend in sync with the backend, without the user needing to reload the page.


This component accepts the following props:

  • options - The table options, see TableSchema for more information.
  • visibleColumns - Array of strings that enlists the collumns that will be visible


This component does not emit any events.


These are Tailwind CSS @Apply classes, you can override them in your own CSS file.

The following classes are available for styling:

jl-tableThe wrapper for the table
jl-table-tableThe table itself
jl-table-top-leftThe top left section of the table
jl-table-top-rightThe top right section of the table
jl-table-titleThe title of the table
jl-table-loading-no-dataThe loading state when there is no data
jl-table-loading-skeletonThe loading state when there is data
jl-table-row-col-visibleThe visible column in the row
jl-table-row-col-hideThe hidden column in the row
jl-table-row-col-valueThe value of the column in the row
jl-table-actionsThe actions section of the table
jl-table-add-recordThe add record button
jl-table-addThe add button
jl-table-editThe edit button
jl-table-add-edit-cardThe add/edit card
jl-table-form-wrapperThe form wrapper


<script setup lang="ts">
import { JLTable } from '@juicyllama/frontend-core'
import type { TableSchema, TableColumn } from '@juicyllama/frontend-core'

const options = {
    title: 'Users',
    name: 'Users',
    event: `users_list`, // if using WEBSOCKET
    endpoint: `/users`, // if using REST API
    find: [],
    functions: [],
    schema: [
            required: true,
            label: 'User #',
            align: 'left',
            name: 'user_id',
            field: 'user_id',
            sortable: true,
            show: true,
            primary_key: true,

const visibleColumns = ['user_id']

    <JLTable :options="options" :visibleColumns="visibleColumns" />

Docs v.0.14.15 Copyright © 2024