DOM Studio

Component

Data grid

<DomDataGrid>

A dense spreadsheet-like grid for database records, with typed column filters, sorting, row selection, and a server-query friendly API. We talk about databases, rendering pipelines, virtual DOMs, and scalable app architecture. But really, they just want Excel.

Demo

Database-style account table

Column filters use typed controls: date columns open a date range, number columns use min/max, select columns use checklist filters, and applied filters are visible in both the header and toolbar.

Customer accounts

15 of 24 accounts

Status: Active, TrialRenewal: 2026-07-01 to 2026-09-30
ABCDEFGHIJKL
#

Filter Account

Filter Status

Values

Filter Plan

Values

Filter Owner

Filter Seats

Filter ARR

Filter Health

Values

Filter Region

Values

Filter Renewal

Filter Active users

Filter Verified

Filter Updated

1Anchor CloudActiveEnterpriseSofia Jensen264£310,000StrongNA31 Jul 2026240Yes11 Jun 2026
2Orchid HealthActiveEnterpriseLaura Chen232£268,000StrongNA22 Sept 2026211Yes11 Jun 2026
3Forge RoboticsActiveEnterprisePriya Singh188£224,500StrongAPAC04 Sept 2026169Yes10 Jun 2026
4Mercury MediaActiveEnterpriseCaleb Stone176£201,300StrongNA09 Jul 2026151Yes09 Jun 2026
5Northstar AnalyticsActiveEnterpriseAmelia Hart142£184,000StrongEMEA19 Aug 2026118Yes10 Jun 2026
6Signal HarborActiveScaleNora Ellis96£112,900StrongEMEA02 Aug 202688Yes07 Jun 2026
7Atlas FinanceActiveScaleRavi Patel84£96,500WatchNA28 Jul 202662Yes08 Jun 2026
8Sable SecurityActiveScaleElena Rossi72£88,900StrongEMEA29 Sept 202670Yes02 Jun 2026
9Violet ManufacturingTrialScaleKai Foster58£65,400WatchAPAC24 Aug 202643No01 Jun 2026
10Summit GroceryActiveGrowthMaeve Walsh36£41,800StrongNA16 Sept 202634Yes06 Jun 2026
11Bluejay TravelTrialGrowthTara Lewis22£24,800WatchLATAM19 Jul 202617No04 Jun 2026
12Brightwell StudioTrialGrowthMina Okafor18£21,400StrongEMEA14 Sept 202616No09 Jun 2026
13Mosaic CivicActiveStarterGeorge White16£15,800StrongEMEA11 Sept 202615Yes10 Jun 2026
14Kite EducationTrialStarterOwen Price14£11,800StrongEMEA31 Aug 202613No06 Jun 2026
15Pioneer RetailTrialStarterMiles Brooks9£7,800WatchNA12 Jul 20266No03 Jun 2026
12 columns2 selected

Resource API shape

The grid can filter locally today, but the same query-change payload can be sent to a resource endpoint for SQL-backed search, where, order, and pagination later. 

{
  "search": "",
  "filters": {
    "status": {
      "type": "select",
      "values": [
        "active",
        "trial"
      ]
    },
    "renewalDate": {
      "type": "date",
      "start": "2026-07-01",
      "end": "2026-09-30"
    }
  },
  "sort": {
    "key": "arr",
    "direction": "desc"
  }
}
CustomerDatabase.vuevue

Large memory

Virtual rows for in-memory data

Use virtualRows when a large local array is already in memory. The grid keeps the full 10,000-row data set available for client-side search, filters, and sort, while the isolated virtual row renderer mounts only the visible rows plus the configured buffer.

Usage events

10000 of 10000 events

ABCDEFGH
#

Filter Event

Filter Account

Filter Service

Values

Filter Status

Values

Filter Region

Values

Filter Requests

Filter Spend

Filter Updated

11Atlas Works 1Billing APIHealthyUK2,500£150.0001 Jan 2026
22Northstar Labs 1MailDelayedEU2,597£187.0002 Feb 2026
33Pioneer Health 1Billing APIQueuedUS2,694£224.0003 Mar 2026
44Evergreen Finance 1MailHealthyCA2,791£261.0004 Apr 2026
55Lunar Retail 1Billing APIHealthyAU2,888£298.0005 May 2026
66Cobalt Systems 1MailFailedUK2,985£335.0006 Jun 2026
77Atlas Works 2Billing APIHealthyEU3,082£372.0007 Jan 2026
88Northstar Labs 2MailDelayedUS3,179£409.0008 Feb 2026
99Pioneer Health 2Billing APIQueuedCA3,276£446.0009 Mar 2026
1010Evergreen Finance 2MailHealthyAU3,373£483.0010 Apr 2026
1111Lunar Retail 2Billing APIHealthyUK3,470£520.0011 May 2026
1212Cobalt Systems 2MailFailedEU3,567£557.0012 Jun 2026
1313Atlas Works 3Billing APIHealthyUS3,664£594.0013 Jan 2026
1414Northstar Labs 3MailDelayedCA3,761£631.0014 Feb 2026
1515Pioneer Health 3Billing APIQueuedAU3,858£668.0015 Mar 2026
1616Evergreen Finance 3MailHealthyUK3,955£705.0016 Apr 2026
1717Lunar Retail 3Billing APIHealthyEU4,052£742.0017 May 2026
1818Cobalt Systems 3MailFailedUS4,149£779.0018 Jun 2026
1919Atlas Works 4Billing APIHealthyCA4,246£816.0019 Jan 2026
2020Northstar Labs 4MailDelayedAU4,343£853.0020 Feb 2026
2121Pioneer Health 4Billing APIQueuedUK4,440£890.0021 Mar 2026
2222Evergreen Finance 4MailHealthyEU4,537£927.0022 Apr 2026
2323Lunar Retail 4Billing APIHealthyUS4,634£964.0023 May 2026
2424Cobalt Systems 4MailFailedCA4,731£1,00124 Jun 2026
2525Atlas Works 5Billing APIHealthyAU4,828£1,03825 Jan 2026
2626Northstar Labs 5MailDelayedUK4,925£1,07526 Feb 2026
2727Pioneer Health 5Billing APIQueuedEU5,022£1,11227 Mar 2026
2828Evergreen Finance 5MailHealthyUS5,119£1,14928 Apr 2026
2929Lunar Retail 5Billing APIHealthyCA5,216£1,18601 May 2026
3030Cobalt Systems 5MailFailedAU5,313£1,22302 Jun 2026
3131Atlas Works 6Billing APIHealthyUK5,410£1,26003 Jan 2026
3232Northstar Labs 6MailDelayedEU5,507£1,29704 Feb 2026
3333Pioneer Health 6Billing APIQueuedUS5,604£1,33405 Mar 2026
3434Evergreen Finance 6MailHealthyCA5,701£1,37106 Apr 2026
3535Lunar Retail 6Billing APIHealthyAU5,798£1,40807 May 2026
3636Cobalt Systems 6MailFailedUK5,895£1,44508 Jun 2026
3737Atlas Works 7Billing APIHealthyEU5,992£1,48209 Jan 2026
3838Northstar Labs 7MailDelayedUS6,089£1,51910 Feb 2026
3939Pioneer Health 7Billing APIQueuedCA6,186£1,55611 Mar 2026
4040Evergreen Finance 7MailHealthyAU6,283£1,59312 Apr 2026
4141Lunar Retail 7Billing APIHealthyUK6,380£1,63013 May 2026
4242Cobalt Systems 7MailFailedEU6,477£1,66714 Jun 2026
4343Atlas Works 8Billing APIHealthyUS6,574£1,70415 Jan 2026
4444Northstar Labs 8MailDelayedCA6,671£1,74116 Feb 2026
4545Pioneer Health 8Billing APIQueuedAU6,768£1,77817 Mar 2026
4646Evergreen Finance 8MailHealthyUK6,865£1,81518 Apr 2026
4747Lunar Retail 8Billing APIHealthyEU6,962£1,85219 May 2026
4848Cobalt Systems 8MailFailedUS7,059£1,88920 Jun 2026
4949Atlas Works 9Billing APIHealthyCA7,156£1,92621 Jan 2026
5050Northstar Labs 9MailDelayedAU7,253£1,96322 Feb 2026
5151Pioneer Health 9Billing APIQueuedUK7,350£2,00023 Mar 2026
8 columnsReady
LargeMemoryGrid.vuevue

Advanced sorting

Keyword table sort presets

Enable multiSort when header clicks should toggle ordered sort rules per column. Click Volume to add it, click Difficulty to add a second rule, and click a sorted header through asc, desc, and off.

Keyword opportunity sort

The selected preset sends ordered sort rules, so APIs can translate them to stable ORDER BY clauses.

Keyword research

10 of 10 keywords

ABCDEF
#

Filter Keyword

Filter Intent

Values

Filter Volume

Filter Difficulty

Filter Opportunity

Filter CPC

1vue data gridCommercial5,400283,942$5.40
2javascript spreadsheet componentComparison5,400433,132$7.10
3editable table vueCommercial2,900212,320$4.80
4tailwind data tableInformational8,100613,240$3.90
5server side data gridCommercial3,600352,376$8.20
6open source data grid vueComparison4,400243,388$4.60
7keyword clustering toolTransactional6,600483,498$6.70
8saas dashboard tableInformational1,900171,596$3.20
9best vue table libraryComparison5,400313,780$5.90
10crm data gridCommercial2,400191,968$9.40
6 columnsReady
{
  "search": "",
  "sort": {
    "key": "",
    "direction": "",
    "rules": []
  }
}

Remote data

Server pagination and forever scrolling

The same resource endpoint handles page-number navigation and cursor-based forever scrolling. The grid sends search, filters, and sort; pagination adds either page/pageSize or cursor/limit.

Remote customer resource

The grid asks for rows; the mock API applies search, filters, sort, and pagination.

Customers

0 of 0 customers from resource API

ABCDEFG
#

Filter Customer

Filter Status

Values

Filter Owner

Filter Region

Values

Filter Seats

Filter ARR

Filter Updated

No rows match the current filters.
7 columnsReady

Request

{
  "resource": "customers",
  "query": {
    "search": "",
    "filters": {},
    "sort": {
      "key": "updatedAt",
      "direction": "desc"
    }
  },
  "pagination": {
    "strategy": "page",
    "page": 1,
    "pageSize": 8
  }
}

Response

{
  "data": [],
  "pageInfo": {
    "strategy": "page",
    "page": 1,
    "pageSize": 8,
    "pageCount": 1,
    "total": 0,
    "hasNextPage": false,
    "hasPreviousPage": false,
    "nextCursor": ""
  },
  "meta": {
    "total": 0,
    "returned": 0
  }
}
ServerResourceGrid.vuevue

Live data

SQL query log with duration ordering

A live developer query-log surface that treats the grid as a server-backed resource: new query rows stream into the buffer, search and typed filters update the resource query, and duration_ms desc exposes the slowest statements first.

Live query log 4-9/sec Last event 00:00:22

Buffered

140

P95 duration

901 ms

Slow queries

29

Errors

4

SQL log

80 of 140 queries from resource API

#

Filter Database

Values

Filter Service

Values

Filter Verb

Values

Filter Table

Values

Filter Duration ms

Filter Lock wait

Filter Rows examined

Filter Status

Values

Filter Plan

Values

Filter Endpoint

Filter SQL statement

123:53:27Read replicaBilling syncSELECTaudit_events1426 ms0 ms369,374SlowSeq scanstripe:selectselect * from audit_events where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
223:59:34AnalyticsWorkerSELECTjobs1296 ms272 ms520,033SlowSeq scanjob:jobs:syncselect * from jobs where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
323:55:53Read replicaWorkerSELECTwebsite_pages1214 ms656 ms716,665SlowSeq scanjob:website_pages:syncselect * from website_pages where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
423:57:52Read replicaReportingUPDATEsessions1211 ms0 ms72TimeoutNested loop/reports/sessionsupdate sessions set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
523:57:36BillingBilling syncSELECTaudit_events1170 ms0 ms376,671SlowSeq scanstripe:selectselect * from audit_events where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
623:50:58BillingReportingUPDATEaudit_events1140 ms0 ms74SlowNested loop/reports/audit_eventsupdate audit_events set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
700:00:22BillingWorkerDELETEorganisations1070 ms0 ms968SlowIndex scanjob:organisations:syncdelete from organisations where organisation_id = ? and archived_at < now() - interval '90 days'
823:59:47BillingReportingSELECTcontent_items901 ms0 ms15,790SlowSeq scan/reports/content_itemsselect * from content_items where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
923:58:02Primary writerWebhookUPDATEusers745 ms72 ms722SlowIndex scan/webhooks/usersupdate users set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
1023:57:53BillingWebhookSELECTaudit_events639 ms0 ms43,933SlowBitmap heap/webhooks/audit_eventsselect * from audit_events where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
1123:55:24AnalyticsWorkerSELECTaudit_events546 ms0 ms713,223SlowSeq scanjob:audit_events:syncselect * from audit_events where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
1223:58:40BillingWorkerINSERTfeature_flags528 ms168 ms54SlowNested loopjob:feature_flags:syncinsert into feature_flags (organisation_id, payload, created_at) values (?, ?, now()) returning id
1323:55:05Primary writerApp APISELECTaudit_events401 ms0 ms533,966SlowSeq scan/api/audit_eventsselect * from audit_events where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
1423:56:12AnalyticsApp APIDELETEaudit_events311 ms0 ms211SlowNested loop/api/audit_eventsdelete from audit_events where organisation_id = ? and archived_at < now() - interval '90 days'
1523:55:18Primary writerWorkerINSERTfeature_flags311 ms25 ms847SlowNested loopjob:feature_flags:syncinsert into feature_flags (organisation_id, payload, created_at) values (?, ?, now()) returning id
1623:59:37BillingWorkerINSERTwebsite_pages300 ms0 ms695SlowNested loopjob:website_pages:syncinsert into website_pages (organisation_id, payload, created_at) values (?, ?, now()) returning id
1700:00:05AnalyticsWebhookUPDATEaudit_events299 ms23 ms762SlowIndex scan/webhooks/audit_eventsupdate audit_events set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
1823:58:13Primary writerReportingUPDATEbilling_events297 ms28 ms382SlowNested loop/reports/billing_eventsupdate billing_events set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
1923:54:48BillingBilling syncINSERTfeature_flags295 ms0 ms237SlowIndex scanstripe:insertinsert into feature_flags (organisation_id, payload, created_at) values (?, ?, now()) returning id
2023:54:56Primary writerReportingINSERTbilling_events294 ms26 ms1,022SlowNested loop/reports/billing_eventsinsert into billing_events (organisation_id, payload, created_at) values (?, ?, now()) returning id
2123:59:16Primary writerBilling syncUPDATEbilling_events286 ms0 ms738SlowIndex scanstripe:updateupdate billing_events set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
2200:00:18Primary writerWebhookUPDATEaudit_events284 ms0 ms193SlowIndex scan/webhooks/audit_eventsupdate audit_events set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
2323:59:31Read replicaWebhookUPDATEusers284 ms54 ms735SlowIndex scan/webhooks/usersupdate users set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
2423:55:45Primary writerApp APIUPDATEwebsite_pages279 ms117 ms366SlowIndex scan/api/website_pagesupdate website_pages set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
2523:57:24Primary writerReportingINSERTfeature_flags274 ms93 ms73SlowIndex scan/reports/feature_flagsinsert into feature_flags (organisation_id, payload, created_at) values (?, ?, now()) returning id
2623:57:11BillingApp APIUPDATEorganisations271 ms68 ms1,077SlowIndex scan/api/organisationsupdate organisations set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
2723:53:44BillingReportingINSERTfeature_flags257 ms0 ms1,141SlowIndex scan/reports/feature_flagsinsert into feature_flags (organisation_id, payload, created_at) values (?, ?, now()) returning id
2823:59:26Read replicaWebhookINSERTinvoices252 ms137 ms507SlowIndex scan/webhooks/invoicesinsert into invoices (organisation_id, payload, created_at) values (?, ?, now()) returning id
2923:57:36Primary writerApp APIUPDATEaccounts251 ms90 ms225SlowNested loop/api/accountsupdate accounts set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
3000:00:15Primary writerApp APIUPDATEaccounts246 ms0 ms222OKNested loop/api/accountsupdate accounts set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
3123:58:20Primary writerWorkerDELETEbilling_events243 ms0 ms254OKIndex scanjob:billing_events:syncdelete from billing_events where organisation_id = ? and archived_at < now() - interval '90 days'
3223:59:07BillingReportingDELETEusers242 ms67 ms725OKIndex scan/reports/usersdelete from users where organisation_id = ? and archived_at < now() - interval '90 days'
3323:53:05Read replicaWebhookUPDATEwebsite_pages232 ms0 ms206OKIndex scan/webhooks/website_pagesupdate website_pages set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
3423:59:03AnalyticsWebhookINSERTorganisations231 ms0 ms1,018OKIndex scan/webhooks/organisationsinsert into organisations (organisation_id, payload, created_at) values (?, ?, now()) returning id
3523:59:55AnalyticsWebhookUPDATEaudit_events220 ms109 ms339OKNested loop/webhooks/audit_eventsupdate audit_events set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
3623:59:19AnalyticsApp APIINSERTfeature_flags219 ms0 ms122OKNested loop/api/feature_flagsinsert into feature_flags (organisation_id, payload, created_at) values (?, ?, now()) returning id
3723:57:46Primary writerWebhookUPDATEsessions216 ms0 ms264OKIndex scan/webhooks/sessionsupdate sessions set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
3823:59:48Primary writerWebhookUPDATEbilling_events190 ms0 ms565OKIndex scan/webhooks/billing_eventsupdate billing_events set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
3923:58:25Read replicaWebhookUPDATEcontent_items190 ms0 ms797OKIndex scan/webhooks/content_itemsupdate content_items set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
4023:56:51Primary writerApp APISELECTaccounts185 ms0 ms7,038OKIndex scan/api/accountsselect id, organisation_id, status, updated_at from accounts where organisation_id = ? and id = ? limit 1
4123:54:32Read replicaWorkerINSERTusers184 ms82 ms1,098OKIndex scanjob:users:syncinsert into users (organisation_id, payload, created_at) values (?, ?, now()) returning id
4200:00:07AnalyticsBilling syncINSERTaccounts183 ms0 ms751OKNested loopstripe:insertinsert into accounts (organisation_id, payload, created_at) values (?, ?, now()) returning id
4300:00:04AnalyticsWorkerSELECTwebsite_pages183 ms0 ms3,298OKIndex scanjob:website_pages:syncselect id, organisation_id, status, updated_at from website_pages where organisation_id = ? and id = ? limit 1
4423:56:28Primary writerReportingSELECTjobs182 ms0 ms1,201OKIndex scan/reports/jobsselect id, organisation_id, status, updated_at from jobs where organisation_id = ? and id = ? limit 1
4523:58:10Read replicaWebhookINSERTaccounts181 ms95 ms567OKNested loop/webhooks/accountsinsert into accounts (organisation_id, payload, created_at) values (?, ?, now()) returning id
4623:55:39Read replicaReportingUPDATEinvoices175 ms0 ms120OKNested loop/reports/invoicesupdate invoices set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
4700:00:15Read replicaApp APISELECTorganisations174 ms0 ms7,247OKIndex scan/api/organisationsselect id, organisation_id, status, updated_at from organisations where organisation_id = ? and id = ? limit 1
4823:52:55BillingWebhookSELECTaccounts168 ms0 ms4,366OKIndex scan/webhooks/accountsselect id, organisation_id, status, updated_at from accounts where organisation_id = ? and id = ? limit 1
4923:59:04AnalyticsApp APISELECTaudit_events167 ms0 ms3,629OKIndex scan/api/audit_eventsselect id, organisation_id, status, updated_at from audit_events where organisation_id = ? and id = ? limit 1
5023:57:25Read replicaApp APISELECTfeature_flags166 ms0 ms397OKIndex scan/api/feature_flagsselect id, organisation_id, status, updated_at from feature_flags where organisation_id = ? and id = ? limit 1
5123:55:02Read replicaReportingSELECTbilling_events162 ms0 ms773OKIndex scan/reports/billing_eventsselect id, organisation_id, status, updated_at from billing_events where organisation_id = ? and id = ? limit 1
5223:59:32Read replicaWebhookSELECTaccounts158 ms0 ms623OKIndex scan/webhooks/accountsselect id, organisation_id, status, updated_at from accounts where organisation_id = ? and id = ? limit 1
5323:59:08BillingApp APISELECTfeature_flags157 ms0 ms5,654OKIndex scan/api/feature_flagsselect id, organisation_id, status, updated_at from feature_flags where organisation_id = ? and id = ? limit 1
5423:57:07BillingWorkerSELECTcontent_items157 ms0 ms1,634OKIndex scanjob:content_items:syncselect id, organisation_id, status, updated_at from content_items where organisation_id = ? and id = ? limit 1
5523:59:55AnalyticsWorkerSELECTfeature_flags156 ms0 ms6,912ErrorIndex scanjob:feature_flags:syncselect id, organisation_id, status, updated_at from feature_flags where organisation_id = ? and id = ? limit 1
5623:59:09Primary writerBilling syncSELECTfeature_flags155 ms0 ms127OKIndex scanstripe:selectselect id, organisation_id, status, updated_at from feature_flags where organisation_id = ? and id = ? limit 1
5723:58:37AnalyticsApp APISELECTbilling_events155 ms0 ms8,298OKIndex scan/api/billing_eventsselect id, organisation_id, status, updated_at from billing_events where organisation_id = ? and id = ? limit 1
5823:54:14BillingReportingSELECTcontent_items154 ms0 ms609OKIndex scan/reports/content_itemsselect id, organisation_id, status, updated_at from content_items where organisation_id = ? and id = ? limit 1
5923:51:43Primary writerWorkerSELECTfeature_flags154 ms0 ms2,281OKIndex scanjob:feature_flags:syncselect id, organisation_id, status, updated_at from feature_flags where organisation_id = ? and id = ? limit 1
6023:58:03BillingReportingSELECTorganisations153 ms0 ms8,471OKIndex scan/reports/organisationsselect id, organisation_id, status, updated_at from organisations where organisation_id = ? and id = ? limit 1
6123:58:40BillingWebhookINSERTfeature_flags152 ms52 ms655OKNested loop/webhooks/feature_flagsinsert into feature_flags (organisation_id, payload, created_at) values (?, ?, now()) returning id
6223:52:20Read replicaApp APISELECTbilling_events152 ms0 ms6,811OKIndex scan/api/billing_eventsselect id, organisation_id, status, updated_at from billing_events where organisation_id = ? and id = ? limit 1
6323:59:56BillingApp APISELECTjobs151 ms0 ms3,310OKIndex scan/api/jobsselect id, organisation_id, status, updated_at from jobs where organisation_id = ? and id = ? limit 1
6423:55:22AnalyticsWebhookSELECTfeature_flags150 ms0 ms2,302OKIndex scan/webhooks/feature_flagsselect id, organisation_id, status, updated_at from feature_flags where organisation_id = ? and id = ? limit 1
6523:56:35Read replicaBilling syncSELECTfeature_flags147 ms0 ms3,082OKIndex scanstripe:selectselect id, organisation_id, status, updated_at from feature_flags where organisation_id = ? and id = ? limit 1
6623:52:13Read replicaReportingINSERTaccounts146 ms8 ms309OKIndex scan/reports/accountsinsert into accounts (organisation_id, payload, created_at) values (?, ?, now()) returning id
6723:59:31Primary writerApp APISELECTcontent_items142 ms0 ms5,958OKIndex scan/api/content_itemsselect id, organisation_id, status, updated_at from content_items where organisation_id = ? and id = ? limit 1
6823:58:00AnalyticsBilling syncSELECTinvoices141 ms0 ms3,117OKIndex scanstripe:selectselect id, organisation_id, status, updated_at from invoices where organisation_id = ? and id = ? limit 1
6923:57:36BillingBilling syncUPDATEsessions141 ms16 ms122OKIndex scanstripe:updateupdate sessions set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
7023:56:53AnalyticsReportingSELECTjobs138 ms0 ms9,245OKIndex scan/reports/jobsselect id, organisation_id, status, updated_at from jobs where organisation_id = ? and id = ? limit 1
7123:51:13BillingBilling syncSELECTcontent_items136 ms0 ms2,634OKIndex scanstripe:selectselect id, organisation_id, status, updated_at from content_items where organisation_id = ? and id = ? limit 1
7223:50:16BillingWorkerSELECTusers136 ms0 ms4,448OKIndex scanjob:users:syncselect id, organisation_id, status, updated_at from users where organisation_id = ? and id = ? limit 1
7323:54:11Read replicaApp APISELECTbilling_events135 ms0 ms3,479OKIndex scan/api/billing_eventsselect id, organisation_id, status, updated_at from billing_events where organisation_id = ? and id = ? limit 1
7423:59:32BillingReportingSELECTinvoices128 ms0 ms5,888OKIndex scan/reports/invoicesselect id, organisation_id, status, updated_at from invoices where organisation_id = ? and id = ? limit 1
7523:59:14BillingApp APISELECTsessions127 ms0 ms2,489OKIndex scan/api/sessionsselect id, organisation_id, status, updated_at from sessions where organisation_id = ? and id = ? limit 1
7623:51:25Primary writerWebhookSELECTaccounts127 ms0 ms863OKIndex scan/webhooks/accountsselect id, organisation_id, status, updated_at from accounts where organisation_id = ? and id = ? limit 1
7723:55:20Read replicaWebhookSELECTwebsite_pages126 ms0 ms6,152OKIndex scan/webhooks/website_pagesselect id, organisation_id, status, updated_at from website_pages where organisation_id = ? and id = ? limit 1
7800:00:07AnalyticsBilling syncSELECTcontent_items125 ms0 ms2,793OKIndex scanstripe:selectselect id, organisation_id, status, updated_at from content_items where organisation_id = ? and id = ? limit 1
7900:00:02Read replicaWebhookUPDATEinvoices125 ms0 ms737OKIndex scan/webhooks/invoicesupdate invoices set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
8023:59:12Read replicaApp APISELECTusers119 ms0 ms2,657OKIndex scan/api/usersselect id, organisation_id, status, updated_at from users where organisation_id = ? and id = ? limit 1
12 columnsReady

SQL generated from grid state

select
	id, started_at, database_name, service_name, operation, table_name,
	duration_ms, lock_wait_ms, rows_examined, status, plan, endpoint, statement
from observability.query_log
order by duration_ms DESC
limit 80;

Request

{
  "resource": "observability.query_log",
  "query": {
    "search": "",
    "filters": {},
    "sort": {
      "key": "durationMs",
      "direction": "desc",
      "rules": [
        {
          "key": "durationMs",
          "direction": "desc"
        }
      ]
    }
  },
  "pagination": {
    "strategy": "live-window",
    "limit": 80,
    "buffered": 140
  }
}

Response window

{
  "returned": 80,
  "total": 140,
  "buffered": 140,
  "lastUpdatedAt": "00:00:22"
}
LiveSqlQueryLog.vuevue

Custom cells

Column components and row actions

Set column.component to a Vue component. The component receives row, column, value, formatted, rowIndex, and rowKey. Display-only columns such as actions still use a stable key, but do not need a matching row property.

Team members

6 of 6 users

Filter User

Filter Team

Filter Status

Values

Filter Last active

ProductPending17 Jun 2026
EngineeringActive16 Jun 2026
DesignActive12 Jun 2026
SupportPaused08 Jun 2026
OperationsPending06 Jun 2026
SalesActive04 Jun 2026
5 columnsReady

EditNameCell.vue

EditNameCell.vuevue

RowActionsCell.vue

RowActionsCell.vuevue

Architecture

Resource query API

The component filters client-side by default so it works immediately with local rows. Set remote when the grid should render API results exactly as supplied and use query-change to request a SQL-backed resource. Keep pagination beside the grid query so the same endpoint can support numbered pages, previous/next controls, and cursor-fed scrolling.

Use virtualRows when rows are already held in memory but the DOM should stay small. It swaps the table body to a dedicated virtual row renderer, using virtualRowBuffer to keep extra rows mounted above and below the viewport.

For custom rendering, add component to a column definition. The column key is the stable column id; set field when the component should read a different row property, or omit it for display-only columns such as row actions.

Column definitions are the contract. A date column gets a date-range filter, numeric columns get min/max, boolean columns get a yes/no segmented control, and select columns can render known options from the resource schema. Set filterable: false on display-only or operational columns so they stay out of the filter UI and resource query.

For more complex ordering, pass sort.rules as an ordered array, or enable multiSort so header clicks build that array interactively. A keyword table can send searchVolume desc followed by difficulty asc, and a resource API can translate that directly to a multi-column ORDER BY.

resource-query-api.jsjs

Reference

Props

Control props

NameTypeTSDefaultDescription
rowsarrayArray<unknown>[]Rows to render. Each row should be a plain object from an API, store, or database result.
columnsarrayArray<DataGridColumn
type DataGridColumn = {
	key: string; // Stable column id. It can match a row property, or identify a display-only column such as actions.
	field?: string; // Row property to read when it differs from key.
	label?: string; // Header label.
	type?: 'text' | 'number' | 'date' | 'boolean' | 'select' | 'currency'; // Column data type. Drives sorting, formatting, and filter controls.
	width?: string | number; // CSS width for the column.
	align?: 'left' | 'center' | 'right'; // Cell alignment.
	component?: object | Function | string; // Vue component used to render cells in this column. Receives row, column, value, formatted, rowIndex, and rowKey props.
	resizable?: boolean; // Set false to disable drag resizing for this column.
	sortable?: boolean; // Set false to disable sorting.
	filterable?: boolean; // Set false to disable filtering for this column, hide the filter button, and omit the column from query filters.
	searchable?: boolean; // Set false to remove the column from global search.
	options?: Array<string | number | boolean | object>; // Select filter options. Objects may include label, value, and tone.
	currency?: string; // Currency code for currency columns.
	accessor?: Function; // Function that receives a row and returns the cell value.
	sortAccessor?: Function; // Function that receives a row and column and returns the value used for local sorting.
	format?: Function; // Function that receives value, row, and column and returns display text.
};
>		[]Column definitions. Each type chooses its own sorting, formatting, and filter controls.
rowKeystring | functionstring'id'Field name or function used to identify each row.
filtersobjectRecord<string, unknown>{}Controlled filter map keyed by column key.
sortobject | arrayArray<unknown>{"key":"","direction":""}Controlled sort state as { key, direction }, or { rules } for multi-column and computed sorting.
multiSortbooleanbooleanfalseWhen true, header clicks toggle each sortable column inside an ordered sort.rules array.
searchstringstring''Global search text.
selectedKeysarrayArray<unknown>[]Selected row keys.
remotebooleanbooleanfalseWhen true, rows render as supplied and query-change can drive a server/API request.
loadingbooleanbooleanfalseShow a loading row while server data is being fetched.
virtualRowsbooleanbooleanfalseRender large in-memory row sets through the isolated virtual row renderer.
virtualRowBuffernumbernumber50Rows kept mounted above and below the visible viewport when virtualRows is true.
virtualRowHeightnumbernumber—Fixed row height in pixels for virtual row calculations. Defaults to the grid density.
selectablebooleanbooleantrueShow row selection checkboxes.
showRowNumbersbooleanbooleantrueShow spreadsheet-style row numbers.
showColumnLettersbooleanbooleantrueShow spreadsheet-style column letters above headers.
stickyHeaderbooleanbooleantrueKeep header rows visible while the grid scrolls.
resizableColumnsbooleanbooleantrueAllow users to drag header dividers to resize columns.
minColumnWidthnumbernumber40Minimum column width in pixels while resizing. The default leaves room for the filter icon.
toolbarbooleanbooleantrueShow the title, search box, filter chips, and row count toolbar.
titlestringstring'Data grid'Toolbar title.
resourceLabelstringstring'rows'Human label for the resource being rendered.
totalRowsnumbernumber—Server-side total row count when remote is true.
density'compact' | 'comfortable'string'compact'Row height density.
heightstring | numberstring'34rem'Scrollable grid height as a CSS size or pixel number.
emptyTextstringstring'No rows match the current filters.'Message shown when no rows are visible.

Auto-generated from Data grid.props and inline _edit hints.

Events

NamePayloadDescription
@update:filtersRecord<string, DataGridFilter>Fired when a column filter is applied or cleared.
@filter-change(payload
payload: unknown;
: unknown)		—
@update:sortDataGridSortFired when column sorting changes. Complex sort values may include an ordered rules array.
@sort-change(payload
payload: unknown;
: unknown)		—
@update:searchstringFired when the toolbar search changes.
@query-changeDataGridQueryFired with the normalized search, filters, and sort state. Use this to call a resource API.
@viewport-scroll{ scrollTop, scrollHeight, clientHeight, remaining, atEnd }Fired when the scrollable row viewport scrolls.
@viewport-end{ scrollTop, scrollHeight, clientHeight, remaining, atEnd }Fired when the scrollable row viewport reaches the bottom threshold. Useful for cursor pagination and infinite loading.
@cell-update({ row, column, rowIndex, rowKey, value, previousValue })Re-emitted when a column component emits update:value.
@cell-action({ row, column, rowIndex, rowKey, value, formatted, action, payload })Re-emitted when a column component emits action.
@column-resize({ column, key, width, previousWidth, startWidth })Fired while a header divider is dragged and a column width changes.
@column-resize-end({ column, key, width, previousWidth, startWidth })Fired when the user finishes resizing a column.
@render-window-change({ startIndex, endIndex, renderedRows, totalRows, firstVisibleIndex, lastVisibleIndex })Fired by the virtual row renderer when the mounted row window changes.
@update:selectedKeysArray<string | number>Fired when row selection changes.
@selection-change(payload
payload: unknown;
: unknown)		—
@row-click({ row, index })Fired when a data row is clicked.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.

Slots

NameScopeDescription
#cell{ row, column, value, formatted, rowIndex, rowKey }Custom cell renderer.
#toolbar-actions{ query, clearFilters }Extra controls rendered next to search and Clear filters.
#empty—Custom empty state.