Tables

FancyCRUD can help you with rendering tables, viewing data, or deleting existing records. You can combine it with forms to allow the user to create or edit records.

In the next example you can see how to create a table, by using the useTable and useForm composables.

vue

<template>
  <f-table v-bind="table" />
</template>
  
<script setup lang='ts'>
import { FieldType, useForm, useTable } from '@fancy-crud/vue';

// The next form will be used to create/edit records
const form = useForm({
  fields: {
    firstName: {
      type: FieldType.text,
      label: 'First Name'
    },
    lastName: {
      type: FieldType.text,
      label: 'Last Name' 
    },
    age: {
      type: FieldType.text,
      label: 'Age'
    }
  },
  settings: {
    url: '/api/users/',
  }
})

// The next table will be used to display the records
// and to perform actions on them
const table = useTable({
  // The form to create/edit records
  form,

  // Columns are going to be automatically inferred from the form
  // but you can override them here and add more
  columns: {
    // You need to specify the actions column
    // if you want to perform actions on the records
    actions: {}
  },
  settings: {
    // The url to fetch the records and/or delete them
    url: '/api/users/',
  },
  buttons: {
    // The button to export the records.
    // This functionality is not implemented by default
    // but you can add it here
    dump: {
      onClick() {
        alert('Exporting data...')
      }
    }
  },
})
</script>

First Name	Last Name	Age

The table is performing a GET requests to the endpoint /api/users/, which can be and endpoint from your backend side. This endpoint is returning the next response:

json

{
  "data": [
    { "id": "84e1ea10-f482-4fd4-a2bf-ca075e27ad6b", "firstName": "John", "lastName": "Doe", "age": 25 },
    { "id": "2b1f0f58-f207-4b2f-9ddb-4f3f4feb6e07", "firstName": "Jane", "lastName": "Doe", "age": 24 },
    { "id": "eeff9587-27a3-40e5-a01d-4042b0d05455", "firstName": "Jim", "lastName": "Doe", "age": 23 },
    { "id": "906aef41-0d5d-4579-9050-27c4121ac6df", "firstName": "Jill", "lastName": "Doe", "age": 22 }
  ]
}

Then the table is mapping the column with the corresponding object key in the data array.

Tables ​

Tables