Quasar QTable Columns Generator

Paste a JSON array of rows and get a typed QTable columns array, with alignment, sorting and a format for dates and numbers, plus a ready q-table.

Your rows
4 rows, 9 columns. Nothing leaves your browser.
Columns
Rename a label, change the type when a guess is wrong, or untick a column to leave it out.
id
Sort
customer.name
Sort
customer.country
Sort
amountCents
Sort
seats
Sort
issuedAt
Sort
paidAt
Sort
autoRenew
Sort
tags
Sort
import type { QTableColumn } from 'quasar'

interface Row {
  id: number
  customer: { name: string; country: string }
  amountCents: number
  seats: number
  issuedAt: string
  paidAt: string | null
  autoRenew: boolean
  tags: string[]
}

const numberFormat = new Intl.NumberFormat('en-US')
const moneyFormat = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
// Date-only strings parse as UTC midnight, so format them in UTC.
const dateFormat = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeZone: 'UTC' })
const dateTimeFormat = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeStyle: 'short' })

const columns: QTableColumn<Row>[] = [
  {
    name: 'id',
    label: 'ID',
    field: 'id',
    align: 'left',
    sortable: true,
  },
  {
    name: 'customerName',
    label: 'Customer name',
    field: row => row.customer.name,
    align: 'left',
    sortable: true,
  },
  {
    name: 'customerCountry',
    label: 'Customer country',
    field: row => row.customer.country,
    align: 'left',
    sortable: true,
  },
  {
    name: 'amountCents',
    label: 'Amount',
    field: 'amountCents',
    align: 'right',
    sortable: true,
    format: (val: number) => moneyFormat.format(val / 100),
  },
  {
    name: 'seats',
    label: 'Seats',
    field: 'seats',
    align: 'right',
    sortable: true,
    format: (val: number) => numberFormat.format(val),
  },
  {
    name: 'issuedAt',
    label: 'Issued',
    field: 'issuedAt',
    align: 'left',
    sortable: true,
    format: (val: string) => dateFormat.format(new Date(val)),
  },
  {
    name: 'paidAt',
    label: 'Paid',
    field: 'paidAt',
    align: 'left',
    sortable: true,
    format: (val: string | null) => (val == null ? '' : dateTimeFormat.format(new Date(val))),
  },
  {
    name: 'autoRenew',
    label: 'Auto renew',
    field: 'autoRenew',
    align: 'center',
    sortable: true,
    format: (val: boolean) => (val ? 'Yes' : 'No'),
  },
  {
    name: 'tags',
    label: 'Tags',
    field: 'tags',
    align: 'left',
    sortable: false,
    format: (val: string[]) => val.join(', '),
  },
]
Paste it into the script of the component that renders your q-table. The Row interface is inferred from every pasted row.
Preview
A real QTable with these columns. Click a header to check how it sorts.
IDCustomer nameCustomer countryAmountSeatsIssuedPaidAuto renewTags
1042Acme CorpUS$1,200.0012Nov 3, 2026Nov 10, 2026, 2:32 PMYesannual
1043GlobexDE$950.008Oct 28, 2026No
1044InitechGB$45.001Oct 15, 2026Oct 20, 2026, 9:05 AMYesmonthly, discount
1045UmbrellaUS$2,100.0025Sep 30, 2026Oct 2, 2026, 4:48 PMYesannual
Records per page:
1–4 of 4

How to use the Quasar QTable Columns Generator

  1. Paste a JSON array of rows into Your rows, for example a response copied from your browser's network tab. An object that wraps the array, like { "data": [...] }, works too.
  2. Check the columns: each key becomes one column, nested objects are flattened into their own columns, and the type picks the alignment and the format.
  3. Fix any guess that is wrong: rename a label, switch a number to Money or an amount to Money in cents, turn sorting off, or untick a column you don't want.
  4. Click a header in the preview to make sure each column sorts the way you expect.
  5. Copy the columns array, or the complete QTable component, and paste it into your Quasar app.

Need the rest of the screen around the table? Browse ready-made Quasar components for data tables, filters and dashboards.

Frequently asked questions