BlitzTable

Basics

<BlitzTable /> is a data table component you can use with the same schema syntax of BlitzForms to define your columns.

With a single "schema" you can generate:

  • the columns of the table
  • the fields of the cards in grid-view
  • an editable form in a dialog when clicking on a row

Basic Example

Here we see a basic example for a BlitzTable. Check out the template and script tabs below to see how easy it is to render a data table based on the schema.

By default

  • the table shows ALL the rows without pagination
  • all the rows are sortable

Advanced Example

This is a more advanced example that includes...

  • a title
  • a search input field
  • a grid/table view toggle
  • pagination features
  • an image rendered with <img />
  • dates are shown with toLocaleDateString()
  • numbers are shown with toLocaleString()

Using Custom Components

Here you see the example uses all HTML5 components to render all the fields surrounding the table.

The idea, as always with Blitzar, is that you BYOC (Bring Your Own Components).

Column Features

Because every column is based on a BlitzForm field, there is quite some flexibility what you can do with a column. Below are some examples of this.

Nested Data

Columns support "dot-notation" to access nested data in your rows array.

const rows = [
  { name: { first: 'Luca', last: 'Ban' } }
]

const schemaColumns = [
  { id: 'name.first', label: 'First Name' },
  { id: 'name.last', label: 'Last Name' },
]

Full example:

Mutating Columns

Columns can be "mutated" meaning data can be shown differently from the actual underlying data. To do so define a parseValue function.

const schemaColumns = [
  { id: 'name', label: 'Name', parseValue: (val) => val.toUpperCase() },
  { id: 'date', label: 'Date', parseValue: (val) => val.toLocaleDateString() },
  { id: 'number', label: 'Balance', parseValue: (val) => val.toLocaleString() },
]

Full example:

Combining Columns

Two table columns can be combined. A combined column is one that shows data based on multiple fields/columns.

const schemaColumns = [
  // no 'id' required for the combined column
  { label: 'Full Name', (val, { formData }) => `${formData.firstName} ${formData.lastName}` },
]

In this example the Full Name and Initials are calculated on the fly when showing the table. You can even sort and search for data in these combined columns.

Grid View

You can have a separate view for the table and grid views.

Editing

There are various ways to implement the ability to edit table data. Below I show case 4 ways to easily implement editing. Each time you can check the template and script tabs to check how it can be implemented.

Any editing requires every object in your rows array to have an id prop.

Edit Inline

This example simply toggles the "mode" of the table from "raw" to "edit". See BlitzTable > Modes for more info.

To be able to show actual form components (like <input /> or custom components) you need to make sure to add them to the schemaColumns.

<BlitzTable mode="edit" :schemaColumns="schemaColumns" />
const schemaColumns = [
  { id: 'name', label: 'Name', component: 'input' }
]

Full example:

Edit on Cell Double-Click

Making a Cell editable on double-click is a bit more advanced and requires more setup. You need to make use of Dynamic Props to make it possible. (more info on Dynamic Props at Advanced > Dynamic Props)

Check the source code of the example below to see how it's implemented:

Edit Modal on Row Click

It's possible to show a modal with a BlitzForm to edit data on row click. See the source code below to see how it's implemented:

Edit Modal on Button Click

It's possible to show a modal with a BlitzForm to edit data on the click of a button. See the source code below to see how it's implemented:

Adding a New Row

This is an example of how you could set up a button that shows a BlitzForm to add new data to the table.

Selection

Select by Checkbox

To be able to select rows with some sort of checkbox (please provide your own, or use the HTML5 input with type 'checkbox') you need to set a column ID to a special string imported from Blitzar:

Please note that every object in your rows array needs an id prop in order for the selection feature to work.

import { ROW_SELECTION_ID } from 'blitzar'
import 'blitzar/dist/style.css'

const schemaColumns = [
  {
    id: ROW_SELECTION_ID, // or you can use the string 'BLITZ-TABLE-ROW-SELECTION'
    component: 'input',
    type: 'checkbox',
  },
]

For the actual selection checkbox, you can use any component that works with v-model and accepts a boolean for its modelValue. Please Bring Your Own Components. : )

When you search something and then click the select all checkbox in the header, it will select all filtered rows based on your search results.

Styling

TODO: Styling section will be re-written soon.