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
• filters
• 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()
• Online and Animal columns show text data as emoji

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.

Adding a new object to your rows array will be detected by BlitzTable.

• .unshift() an object to your rows array & it will appear as the first row.
• .push() an object to your rows array & it will appear as the last row.

Deleting From Parent #

There are a couple ways you can add delete row logic. No way in particular is the "best" way, so check the code of these examples and feel free to use any method.

Here we show an example where the delete logic is handled directly from the parent where you define the schemaColumns logic.

Deleting via @rowDeleted #

This example uses the @rowDeleted event to then remove the row via index from the rows array.

Deleting via v-model:rows #

This example uses v-model:rows to keep rows in sync when deleting a row.

Filters #

Filters that Auto-Detect Values #

Range Filters #

If you need more complex filters, you can also pass a custom component (just like a SchemaField) alongside your own compareFn which will compare all rows against the user input of that component.

This example passes input fields alongside a compareFn to achieve range filters; > (greater than) and < (less than).

Advanced Filters #

Here is an example where we provide a compareFn which parses a certain field as a Date and then compares the year/month and compare that to the user input in the filter field.

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.

Show Row Numbers #

This example uses parseValue to show row numbers.