JLTable

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.

Props

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

Emits

This component does not emit any events.

Styles

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

The following classes are available for styling:

ClassDescription
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

Examples

<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']
</script>

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

Docs v.0.14.15 Copyright © 2024