Component

Vue Data Grid with Filtering

<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.

Quick start

Use DomDataGrid now

Choose the installation path that suits this stage

Use npm for the fastest working version. Copy the source when you want DomDataGrid to become part of your codebase: yours to edit, adapt, and maintain.

View install options

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

SQL-ready query state

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

	A	B	C	D	E	F	G	H	I	J	K	L
#	Filter Account MatchValue	Filter Status Values ActiveTrialPausedRisk	Filter Plan Values StarterGrowthScaleEnterprise	Filter Owner MatchValue	Filter Seats MinimumMaximum	Filter ARR MinimumMaximum	Filter Health Values StrongWatchWeak	Filter Region Values EMEANAAPACLATAM	Filter Renewal FromTo	Filter Active users MinimumMaximum	Filter Verified	Filter Updated FromTo
1	Anchor Cloud	Active	Enterprise	Sofia Jensen	264	£310,000	Strong	NA	31 Jul 2026	240	Yes	11 Jun 2026
2	Orchid Health	Active	Enterprise	Laura Chen	232	£268,000	Strong	NA	22 Sept 2026	211	Yes	11 Jun 2026
3	Forge Robotics	Active	Enterprise	Priya Singh	188	£224,500	Strong	APAC	04 Sept 2026	169	Yes	10 Jun 2026
4	Mercury Media	Active	Enterprise	Caleb Stone	176	£201,300	Strong	NA	09 Jul 2026	151	Yes	09 Jun 2026
5	Northstar Analytics	Active	Enterprise	Amelia Hart	142	£184,000	Strong	EMEA	19 Aug 2026	118	Yes	10 Jun 2026
6	Signal Harbor	Active	Scale	Nora Ellis	96	£112,900	Strong	EMEA	02 Aug 2026	88	Yes	07 Jun 2026
7	Atlas Finance	Active	Scale	Ravi Patel	84	£96,500	Watch	NA	28 Jul 2026	62	Yes	08 Jun 2026
8	Sable Security	Active	Scale	Elena Rossi	72	£88,900	Strong	EMEA	29 Sept 2026	70	Yes	02 Jun 2026
9	Violet Manufacturing	Trial	Scale	Kai Foster	58	£65,400	Watch	APAC	24 Aug 2026	43	No	01 Jun 2026
10	Summit Grocery	Active	Growth	Maeve Walsh	36	£41,800	Strong	NA	16 Sept 2026	34	Yes	06 Jun 2026
11	Bluejay Travel	Trial	Growth	Tara Lewis	22	£24,800	Watch	LATAM	19 Jul 2026	17	No	04 Jun 2026
12	Brightwell Studio	Trial	Growth	Mina Okafor	18	£21,400	Strong	EMEA	14 Sept 2026	16	No	09 Jun 2026
13	Mosaic Civic	Active	Starter	George White	16	£15,800	Strong	EMEA	11 Sept 2026	15	Yes	10 Jun 2026
14	Kite Education	Trial	Starter	Owen Price	14	£11,800	Strong	EMEA	31 Aug 2026	13	No	06 Jun 2026
15	Pioneer Retail	Trial	Starter	Miles Brooks	9	£7,800	Watch	NA	12 Jul 2026	6	No	03 Jun 2026

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

10,000 in memory 0 mounted 1-0

	A	B	C	D	E	F	G	H
#	Filter Event MinimumMaximum	Filter Account MatchValue	Filter Service Values Billing APICheckoutIdentityMailStorageAnalytics	Filter Status Values HealthyDelayedFailedQueued	Filter Region Values UKEUUSCAAU	Filter Requests MinimumMaximum	Filter Spend MinimumMaximum	Filter Updated FromTo
1	1	Atlas Works 1	Billing API	Healthy	UK	2,500	£150.00	01 Jan 2026
2	2	Northstar Labs 1	Mail	Delayed	EU	2,597	£187.00	02 Feb 2026
3	3	Pioneer Health 1	Billing API	Queued	US	2,694	£224.00	03 Mar 2026
4	4	Evergreen Finance 1	Mail	Healthy	CA	2,791	£261.00	04 Apr 2026
5	5	Lunar Retail 1	Billing API	Healthy	AU	2,888	£298.00	05 May 2026
6	6	Cobalt Systems 1	Mail	Failed	UK	2,985	£335.00	06 Jun 2026
7	7	Atlas Works 2	Billing API	Healthy	EU	3,082	£372.00	07 Jan 2026
8	8	Northstar Labs 2	Mail	Delayed	US	3,179	£409.00	08 Feb 2026
9	9	Pioneer Health 2	Billing API	Queued	CA	3,276	£446.00	09 Mar 2026
10	10	Evergreen Finance 2	Mail	Healthy	AU	3,373	£483.00	10 Apr 2026
11	11	Lunar Retail 2	Billing API	Healthy	UK	3,470	£520.00	11 May 2026
12	12	Cobalt Systems 2	Mail	Failed	EU	3,567	£557.00	12 Jun 2026
13	13	Atlas Works 3	Billing API	Healthy	US	3,664	£594.00	13 Jan 2026
14	14	Northstar Labs 3	Mail	Delayed	CA	3,761	£631.00	14 Feb 2026
15	15	Pioneer Health 3	Billing API	Queued	AU	3,858	£668.00	15 Mar 2026
16	16	Evergreen Finance 3	Mail	Healthy	UK	3,955	£705.00	16 Apr 2026
17	17	Lunar Retail 3	Billing API	Healthy	EU	4,052	£742.00	17 May 2026
18	18	Cobalt Systems 3	Mail	Failed	US	4,149	£779.00	18 Jun 2026
19	19	Atlas Works 4	Billing API	Healthy	CA	4,246	£816.00	19 Jan 2026
20	20	Northstar Labs 4	Mail	Delayed	AU	4,343	£853.00	20 Feb 2026
21	21	Pioneer Health 4	Billing API	Queued	UK	4,440	£890.00	21 Mar 2026
22	22	Evergreen Finance 4	Mail	Healthy	EU	4,537	£927.00	22 Apr 2026
23	23	Lunar Retail 4	Billing API	Healthy	US	4,634	£964.00	23 May 2026
24	24	Cobalt Systems 4	Mail	Failed	CA	4,731	£1,001	24 Jun 2026
25	25	Atlas Works 5	Billing API	Healthy	AU	4,828	£1,038	25 Jan 2026
26	26	Northstar Labs 5	Mail	Delayed	UK	4,925	£1,075	26 Feb 2026
27	27	Pioneer Health 5	Billing API	Queued	EU	5,022	£1,112	27 Mar 2026
28	28	Evergreen Finance 5	Mail	Healthy	US	5,119	£1,149	28 Apr 2026
29	29	Lunar Retail 5	Billing API	Healthy	CA	5,216	£1,186	01 May 2026
30	30	Cobalt Systems 5	Mail	Failed	AU	5,313	£1,223	02 Jun 2026
31	31	Atlas Works 6	Billing API	Healthy	UK	5,410	£1,260	03 Jan 2026
32	32	Northstar Labs 6	Mail	Delayed	EU	5,507	£1,297	04 Feb 2026
33	33	Pioneer Health 6	Billing API	Queued	US	5,604	£1,334	05 Mar 2026
34	34	Evergreen Finance 6	Mail	Healthy	CA	5,701	£1,371	06 Apr 2026
35	35	Lunar Retail 6	Billing API	Healthy	AU	5,798	£1,408	07 May 2026
36	36	Cobalt Systems 6	Mail	Failed	UK	5,895	£1,445	08 Jun 2026
37	37	Atlas Works 7	Billing API	Healthy	EU	5,992	£1,482	09 Jan 2026
38	38	Northstar Labs 7	Mail	Delayed	US	6,089	£1,519	10 Feb 2026
39	39	Pioneer Health 7	Billing API	Queued	CA	6,186	£1,556	11 Mar 2026
40	40	Evergreen Finance 7	Mail	Healthy	AU	6,283	£1,593	12 Apr 2026
41	41	Lunar Retail 7	Billing API	Healthy	UK	6,380	£1,630	13 May 2026
42	42	Cobalt Systems 7	Mail	Failed	EU	6,477	£1,667	14 Jun 2026
43	43	Atlas Works 8	Billing API	Healthy	US	6,574	£1,704	15 Jan 2026
44	44	Northstar Labs 8	Mail	Delayed	CA	6,671	£1,741	16 Feb 2026
45	45	Pioneer Health 8	Billing API	Queued	AU	6,768	£1,778	17 Mar 2026
46	46	Evergreen Finance 8	Mail	Healthy	UK	6,865	£1,815	18 Apr 2026
47	47	Lunar Retail 8	Billing API	Healthy	EU	6,962	£1,852	19 May 2026
48	48	Cobalt Systems 8	Mail	Failed	US	7,059	£1,889	20 Jun 2026
49	49	Atlas Works 9	Billing API	Healthy	CA	7,156	£1,926	21 Jan 2026
50	50	Northstar Labs 9	Mail	Delayed	AU	7,253	£1,963	22 Feb 2026
51	51	Pioneer Health 9	Billing API	Queued	UK	7,350	£2,000	23 Mar 2026

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.

Sort preset

Keyword research

10 of 10 keywords

Multi-rule sort active

	A	B	C	D	E	F
#	Filter Keyword MatchValue	Filter Intent Values CommercialComparisonInformationalTransactional	Filter Volume MinimumMaximum	Filter Difficulty MinimumMaximum	Filter Opportunity MinimumMaximum	Filter CPC MinimumMaximum
1	vue data grid	Commercial	5,400	28	3,942	$5.40
2	javascript spreadsheet component	Comparison	5,400	43	3,132	$7.10
3	editable table vue	Commercial	2,900	21	2,320	$4.80
4	tailwind data table	Informational	8,100	61	3,240	$3.90
5	server side data grid	Commercial	3,600	35	2,376	$8.20
6	open source data grid vue	Comparison	4,400	24	3,388	$4.60
7	keyword clustering tool	Transactional	6,600	48	3,498	$6.70
8	saas dashboard table	Informational	1,900	17	1,596	$3.20
9	best vue table library	Comparison	5,400	31	3,780	$5.90
10	crm data grid	Commercial	2,400	19	1,968	$9.40

{
  "search": "",
  "sort": {
    "key": "",
    "direction": "",
    "rules": []
  }
}

KeywordOpportunityGrid.vuevue

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

0 returned / 0 total

		A	B	C	D	E	F	G
	#	Filter Customer MatchValue	Filter Status Values ActiveTrialPausedRisk	Filter Owner MatchValue	Filter Region Values	Filter Seats MinimumMaximum	Filter ARR MinimumMaximum	Filter Updated FromTo
No rows match the current filters.

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 20:46:50

Buffered

140

P95 duration

1007 ms

Slow queries

Errors

View preset

SQL log

80 of 140 queries from resource API

80 returned / 140 matching avg 270 ms

#		Filter Database Values Primary writerRead replicaAnalyticsBilling	Filter Service Values App APIWorkerBilling syncReportingWebhook	Filter Verb Values SELECTINSERTUPDATEDELETE	Filter Table Values accountsaudit_eventsbilling_eventscontent_itemsfeature_flagsinvoicesjobsorganisationssessionsuserswebsite_pages	Filter Duration ms MinimumMaximum	Filter Lock wait MinimumMaximum	Filter Rows examined MinimumMaximum	Filter Status Values OKSlowTimeoutError	Filter Plan Values Index scanNested loopSeq scanBitmap heap	Filter Endpoint MatchValue	Filter SQL statement MatchValue
1	20:43:37	Primary writer	Worker	DELETE	website_pages	1581 ms	0 ms	447	Slow	Nested loop	job:website_pages:sync	delete from website_pages where organisation_id = ? and archived_at < now() - interval '90 days'
2	20:45:05	Billing	Webhook	SELECT	feature_flags	1445 ms	0 ms	699,067	Timeout	Seq scan	/webhooks/feature_flags	select * from feature_flags where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
3	20:45:52	Analytics	Webhook	SELECT	content_items	1430 ms	0 ms	272,787	Timeout	Seq scan	/webhooks/content_items	select * from content_items where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
4	20:40:08	Billing	Worker	INSERT	organisations	1328 ms	0 ms	204	Slow	Nested loop	job:organisations:sync	insert into organisations (organisation_id, payload, created_at) values (?, ?, now()) returning id
5	20:43:03	Analytics	Worker	SELECT	audit_events	1250 ms	564 ms	773,214	Slow	Seq scan	job:audit_events:sync	select * from audit_events where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
6	20:40:24	Billing	App API	UPDATE	accounts	1158 ms	0 ms	722	Slow	Nested loop	/api/accounts	update accounts set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
7	20:42:49	Billing	Webhook	SELECT	website_pages	1084 ms	580 ms	385,111	Slow	Seq scan	/webhooks/website_pages	select * from website_pages where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
8	20:41:40	Primary writer	App API	SELECT	sessions	1007 ms	0 ms	181,382	Slow	Seq scan	/api/sessions	select * from sessions where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
9	20:39:34	Read replica	Worker	SELECT	content_items	995 ms	0 ms	245,918	Slow	Seq scan	job:content_items:sync	select * from content_items where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
10	20:46:46	Primary writer	Billing sync	SELECT	jobs	959 ms	0 ms	24,578	Slow	Seq scan	stripe:select	select * from jobs where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
11	20:42:15	Primary writer	App API	UPDATE	sessions	930 ms	0 ms	680	Slow	Index scan	/api/sessions	update sessions set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
12	20:46:16	Analytics	Worker	UPDATE	website_pages	924 ms	18 ms	1,148	Slow	Index scan	job:website_pages:sync	update website_pages set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
13	20:44:09	Primary writer	Webhook	UPDATE	organisations	913 ms	0 ms	72	Slow	Nested loop	/webhooks/organisations	update organisations set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
14	20:45:38	Read replica	App API	INSERT	jobs	889 ms	0 ms	222	Slow	Index scan	/api/jobs	insert into jobs (organisation_id, payload, created_at) values (?, ?, now()) returning id
15	20:46:04	Read replica	Worker	SELECT	sessions	882 ms	0 ms	557,706	Slow	Seq scan	job:sessions:sync	select * from sessions where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
16	20:39:22	Read replica	Billing sync	UPDATE	audit_events	862 ms	0 ms	981	Slow	Index scan	stripe:update	update audit_events set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
17	20:45:13	Billing	Reporting	SELECT	accounts	853 ms	33 ms	605,003	Slow	Seq scan	/reports/accounts	select * from accounts where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
18	20:42:22	Read replica	Billing sync	INSERT	audit_events	806 ms	0 ms	402	Slow	Index scan	stripe:insert	insert into audit_events (organisation_id, payload, created_at) values (?, ?, now()) returning id
19	20:46:49	Analytics	Webhook	INSERT	billing_events	788 ms	330 ms	1,054	Slow	Nested loop	/webhooks/billing_events	insert into billing_events (organisation_id, payload, created_at) values (?, ?, now()) returning id
20	20:41:13	Billing	Webhook	DELETE	invoices	633 ms	0 ms	615	Slow	Index scan	/webhooks/invoices	delete from invoices where organisation_id = ? and archived_at < now() - interval '90 days'
21	20:45:29	Analytics	App API	SELECT	jobs	595 ms	266 ms	488,582	Slow	Seq scan	/api/jobs	select * from jobs where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
22	20:46:37	Read replica	Reporting	SELECT	audit_events	580 ms	232 ms	591,145	Slow	Seq scan	/reports/audit_events	select * from audit_events where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
23	20:44:05	Read replica	App API	DELETE	audit_events	535 ms	0 ms	800	Slow	Nested loop	/api/audit_events	delete from audit_events where organisation_id = ? and archived_at < now() - interval '90 days'
24	20:45:45	Billing	Worker	SELECT	invoices	478 ms	0 ms	661,673	Slow	Seq scan	job:invoices:sync	select * from invoices where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
25	20:39:15	Analytics	Reporting	UPDATE	organisations	463 ms	0 ms	372	Slow	Index scan	/reports/organisations	update organisations set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
26	20:44:09	Primary writer	Reporting	SELECT	billing_events	456 ms	0 ms	122,285	Slow	Seq scan	/reports/billing_events	select * from billing_events where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
27	20:46:33	Read replica	App API	SELECT	website_pages	442 ms	0 ms	214,703	Slow	Seq scan	/api/website_pages	select * from website_pages where organisation_id = ? and lower(search_text) like ? order by updated_at desc limit 100
28	20:36:22	Primary writer	Reporting	INSERT	accounts	319 ms	130 ms	757	Slow	Index scan	/reports/accounts	insert into accounts (organisation_id, payload, created_at) values (?, ?, now()) returning id
29	20:46:10	Analytics	App API	UPDATE	accounts	316 ms	0 ms	678	Slow	Nested loop	/api/accounts	update accounts set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
30	20:44:02	Primary writer	Billing sync	DELETE	website_pages	296 ms	9 ms	149	Slow	Index scan	stripe:delete	delete from website_pages where organisation_id = ? and archived_at < now() - interval '90 days'
31	20:44:56	Primary writer	Reporting	INSERT	content_items	293 ms	152 ms	437	Slow	Index scan	/reports/content_items	insert into content_items (organisation_id, payload, created_at) values (?, ?, now()) returning id
32	20:45:13	Billing	Reporting	DELETE	sessions	283 ms	0 ms	390	Slow	Index scan	/reports/sessions	delete from sessions where organisation_id = ? and archived_at < now() - interval '90 days'
33	20:42:14	Read replica	Webhook	UPDATE	feature_flags	282 ms	71 ms	129	Slow	Index scan	/webhooks/feature_flags	update feature_flags set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
34	20:40:04	Read replica	Billing sync	UPDATE	billing_events	279 ms	84 ms	1,142	Slow	Index scan	stripe:update	update billing_events set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
35	20:37:37	Billing	App API	INSERT	users	269 ms	0 ms	830	Slow	Nested loop	/api/users	insert into users (organisation_id, payload, created_at) values (?, ?, now()) returning id
36	20:45:07	Primary writer	App API	DELETE	jobs	266 ms	0 ms	765	Slow	Nested loop	/api/jobs	delete from jobs where organisation_id = ? and archived_at < now() - interval '90 days'
37	20:46:36	Billing	Worker	INSERT	billing_events	261 ms	0 ms	892	Slow	Index scan	job:billing_events:sync	insert into billing_events (organisation_id, payload, created_at) values (?, ?, now()) returning id
38	20:44:17	Billing	Reporting	INSERT	organisations	260 ms	67 ms	669	Slow	Index scan	/reports/organisations	insert into organisations (organisation_id, payload, created_at) values (?, ?, now()) returning id
39	20:41:09	Primary writer	Worker	UPDATE	billing_events	260 ms	0 ms	568	Slow	Index scan	job:billing_events:sync	update billing_events set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
40	20:45:26	Billing	Webhook	INSERT	users	252 ms	0 ms	315	Slow	Nested loop	/webhooks/users	insert into users (organisation_id, payload, created_at) values (?, ?, now()) returning id
41	20:45:47	Read replica	Billing sync	INSERT	users	248 ms	0 ms	43	OK	Nested loop	stripe:insert	insert into users (organisation_id, payload, created_at) values (?, ?, now()) returning id
42	20:46:33	Read replica	Webhook	UPDATE	feature_flags	244 ms	0 ms	1,136	OK	Index scan	/webhooks/feature_flags	update feature_flags set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
43	20:44:51	Read replica	Billing sync	DELETE	accounts	233 ms	0 ms	958	OK	Index scan	stripe:delete	delete from accounts where organisation_id = ? and archived_at < now() - interval '90 days'
44	20:36:48	Read replica	App API	INSERT	audit_events	214 ms	0 ms	979	OK	Nested loop	/api/audit_events	insert into audit_events (organisation_id, payload, created_at) values (?, ?, now()) returning id
45	20:44:44	Primary writer	Reporting	INSERT	content_items	197 ms	0 ms	468	OK	Index scan	/reports/content_items	insert into content_items (organisation_id, payload, created_at) values (?, ?, now()) returning id
46	20:46:28	Analytics	App API	SELECT	invoices	188 ms	0 ms	8,670	OK	Index scan	/api/invoices	select id, organisation_id, status, updated_at from invoices where organisation_id = ? and id = ? limit 1
47	20:43:52	Billing	Webhook	DELETE	invoices	188 ms	21 ms	969	OK	Index scan	/webhooks/invoices	delete from invoices where organisation_id = ? and archived_at < now() - interval '90 days'
48	20:40:58	Analytics	Worker	DELETE	sessions	186 ms	70 ms	21	OK	Nested loop	job:sessions:sync	delete from sessions where organisation_id = ? and archived_at < now() - interval '90 days'
49	20:41:30	Read replica	App API	SELECT	website_pages	185 ms	0 ms	4,624	OK	Index scan	/api/website_pages	select id, organisation_id, status, updated_at from website_pages where organisation_id = ? and id = ? limit 1
50	20:45:22	Analytics	Webhook	INSERT	users	184 ms	0 ms	451	OK	Index scan	/webhooks/users	insert into users (organisation_id, payload, created_at) values (?, ?, now()) returning id
51	20:37:23	Read replica	Worker	SELECT	sessions	184 ms	0 ms	3,713	OK	Index scan	job:sessions:sync	select id, organisation_id, status, updated_at from sessions where organisation_id = ? and id = ? limit 1
52	20:44:07	Analytics	Reporting	SELECT	invoices	183 ms	0 ms	6,245	OK	Index scan	/reports/invoices	select id, organisation_id, status, updated_at from invoices where organisation_id = ? and id = ? limit 1
53	20:41:57	Billing	Webhook	UPDATE	jobs	182 ms	0 ms	394	OK	Index scan	/webhooks/jobs	update jobs set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
54	20:42:51	Read replica	Webhook	INSERT	organisations	176 ms	0 ms	638	OK	Index scan	/webhooks/organisations	insert into organisations (organisation_id, payload, created_at) values (?, ?, now()) returning id
55	20:45:46	Billing	Worker	SELECT	accounts	171 ms	0 ms	851	OK	Index scan	job:accounts:sync	select id, organisation_id, status, updated_at from accounts where organisation_id = ? and id = ? limit 1
56	20:45:44	Analytics	Billing sync	UPDATE	jobs	169 ms	0 ms	567	OK	Index scan	stripe:update	update jobs set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
57	20:44:45	Billing	App API	UPDATE	accounts	165 ms	0 ms	327	OK	Index scan	/api/accounts	update accounts set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
58	20:44:17	Primary writer	App API	SELECT	content_items	165 ms	0 ms	1,294	OK	Index scan	/api/content_items	select id, organisation_id, status, updated_at from content_items where organisation_id = ? and id = ? limit 1
59	20:43:33	Billing	App API	SELECT	audit_events	165 ms	0 ms	7,543	OK	Index scan	/api/audit_events	select id, organisation_id, status, updated_at from audit_events where organisation_id = ? and id = ? limit 1
60	20:44:16	Primary writer	Reporting	SELECT	audit_events	156 ms	0 ms	7,489	OK	Index scan	/reports/audit_events	select id, organisation_id, status, updated_at from audit_events where organisation_id = ? and id = ? limit 1
61	20:44:07	Primary writer	Reporting	SELECT	accounts	152 ms	0 ms	6,847	OK	Index scan	/reports/accounts	select id, organisation_id, status, updated_at from accounts where organisation_id = ? and id = ? limit 1
62	20:44:51	Read replica	App API	SELECT	users	148 ms	0 ms	2,288	OK	Index scan	/api/users	select id, organisation_id, status, updated_at from users where organisation_id = ? and id = ? limit 1
63	20:45:01	Read replica	Billing sync	SELECT	organisations	147 ms	0 ms	4,536	OK	Index scan	stripe:select	select id, organisation_id, status, updated_at from organisations where organisation_id = ? and id = ? limit 1
64	20:45:16	Billing	Webhook	SELECT	feature_flags	144 ms	0 ms	7,381	OK	Index scan	/webhooks/feature_flags	select id, organisation_id, status, updated_at from feature_flags where organisation_id = ? and id = ? limit 1
65	20:45:32	Billing	Webhook	SELECT	jobs	143 ms	0 ms	3,705	OK	Index scan	/webhooks/jobs	select id, organisation_id, status, updated_at from jobs where organisation_id = ? and id = ? limit 1
66	20:43:32	Primary writer	App API	SELECT	invoices	143 ms	0 ms	8,970	OK	Index scan	/api/invoices	select id, organisation_id, status, updated_at from invoices where organisation_id = ? and id = ? limit 1
67	20:45:00	Read replica	Webhook	SELECT	audit_events	142 ms	0 ms	3,927	OK	Index scan	/webhooks/audit_events	select id, organisation_id, status, updated_at from audit_events where organisation_id = ? and id = ? limit 1
68	20:37:41	Analytics	Webhook	SELECT	billing_events	142 ms	0 ms	4,894	OK	Index scan	/webhooks/billing_events	select id, organisation_id, status, updated_at from billing_events where organisation_id = ? and id = ? limit 1
69	20:42:45	Billing	App API	INSERT	website_pages	141 ms	26 ms	773	OK	Index scan	/api/website_pages	insert into website_pages (organisation_id, payload, created_at) values (?, ?, now()) returning id
70	20:38:41	Primary writer	Webhook	INSERT	accounts	140 ms	0 ms	520	OK	Index scan	/webhooks/accounts	insert into accounts (organisation_id, payload, created_at) values (?, ?, now()) returning id
71	20:46:25	Read replica	App API	SELECT	sessions	132 ms	0 ms	5,233	OK	Index scan	/api/sessions	select id, organisation_id, status, updated_at from sessions where organisation_id = ? and id = ? limit 1
72	20:45:42	Analytics	Worker	SELECT	invoices	131 ms	0 ms	407	OK	Index scan	job:invoices:sync	select id, organisation_id, status, updated_at from invoices where organisation_id = ? and id = ? limit 1
73	20:44:53	Analytics	App API	SELECT	website_pages	129 ms	0 ms	2,061	OK	Index scan	/api/website_pages	select id, organisation_id, status, updated_at from website_pages where organisation_id = ? and id = ? limit 1
74	20:45:48	Analytics	App API	SELECT	billing_events	126 ms	0 ms	5,492	OK	Index scan	/api/billing_events	select id, organisation_id, status, updated_at from billing_events where organisation_id = ? and id = ? limit 1
75	20:42:23	Primary writer	Reporting	SELECT	invoices	126 ms	0 ms	9,156	OK	Index scan	/reports/invoices	select id, organisation_id, status, updated_at from invoices where organisation_id = ? and id = ? limit 1
76	20:39:27	Billing	Reporting	UPDATE	feature_flags	121 ms	0 ms	249	OK	Index scan	/reports/feature_flags	update feature_flags set updated_at = now(), metadata = jsonb_set(metadata, ?, ?) where organisation_id = ? and id = ?
77	20:45:30	Primary writer	Billing sync	SELECT	billing_events	118 ms	0 ms	7,181	OK	Index scan	stripe:select	select id, organisation_id, status, updated_at from billing_events where organisation_id = ? and id = ? limit 1
78	20:46:29	Billing	Webhook	INSERT	sessions	117 ms	0 ms	270	OK	Index scan	/webhooks/sessions	insert into sessions (organisation_id, payload, created_at) values (?, ?, now()) returning id
79	20:46:32	Read replica	App API	INSERT	accounts	115 ms	0 ms	588	OK	Index scan	/api/accounts	insert into accounts (organisation_id, payload, created_at) values (?, ?, now()) returning id
80	20:45:45	Primary writer	Reporting	SELECT	organisations	110 ms	0 ms	8,994	Error	Index scan	/reports/organisations	select id, organisation_id, status, updated_at from organisations where organisation_id = ? and id = ? limit 1

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": "20:46:50"
}

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

Custom cell events will appear here.

Filter Team MatchValue	Filter Status Values ActivePendingPaused	Filter Last active FromTo
Product	Pending	17 Jun 2026
Engineering	Active	16 Jun 2026
Design	Active	12 Jun 2026
Support	Paused	08 Jun 2026
Operations	Pending	06 Jun 2026
Sales	Active	04 Jun 2026

CustomColumnComponents.vuevue

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

Name	Type	TS	Default	Description
`rows`	array	Array<unknown>	[]	Rows to render. Each row should be a plain object from an API, store, or database result.
`columns`	array	Array<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.
`rowKey`	string \| function	string	'id'	Field name or function used to identify each row.
`filters`	object	Record<string, unknown>	{}	Controlled filter map keyed by column key.
`sort`	object \| array	Array<unknown>	{"key":"","direction":""}	Controlled sort state as { key, direction }, or { rules } for multi-column and computed sorting.
`multiSort`	boolean	boolean	false	When true, header clicks toggle each sortable column inside an ordered sort.rules array.
`search`	string	string	''	Global search text.
`selectedKeys`	array	Array<unknown>	[]	Selected row keys.
`remote`	boolean	boolean	false	When true, rows render as supplied and query-change can drive a server/API request.
`loading`	boolean	boolean	false	Show a loading row while server data is being fetched.
`virtualRows`	boolean	boolean	false	Render large in-memory row sets through the isolated virtual row renderer.
`virtualRowBuffer`	number	number	50	Rows kept mounted above and below the visible viewport when virtualRows is true.
`virtualRowHeight`	number	number	—	Fixed row height in pixels for virtual row calculations. Defaults to the grid density.
`selectable`	boolean	boolean	true	Show row selection checkboxes.
`showRowNumbers`	boolean	boolean	true	Show spreadsheet-style row numbers.
`showColumnLetters`	boolean	boolean	true	Show spreadsheet-style column letters above headers.
`stickyHeader`	boolean	boolean	true	Keep header rows visible while the grid scrolls.
`resizableColumns`	boolean	boolean	true	Allow users to drag header dividers to resize columns.
`minColumnWidth`	number	number	40	Minimum column width in pixels while resizing. The default leaves room for the filter icon.
`toolbar`	boolean	boolean	true	Show the title, search box, filter chips, and row count toolbar.
`title`	string	string	'Data grid'	Toolbar title.
`resourceLabel`	string	string	'rows'	Human label for the resource being rendered.
`totalRows`	number	number	—	Server-side total row count when remote is true.
`density`	'compact' \| 'comfortable'	string	'compact'	Row height density.
`height`	string \| number	string	'34rem'	Scrollable grid height as a CSS size or pixel number.
`emptyText`	string	string	'No rows match the current filters.'	Message shown when no rows are visible.

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

Events

Name	Payload	Description
@update:filters	Record<string, DataGridFilter>	Fired when a column filter is applied or cleared.
@filter-change	(payload `payload: unknown;` : unknown)	—
@update:sort	DataGridSort	Fired when column sorting changes. Complex sort values may include an ordered rules array.
@sort-change	(payload `payload: unknown;` : unknown)	—
@update:search	string	Fired when the toolbar search changes.
@query-change	DataGridQuery	Fired 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:selectedKeys	Array<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

Name	Scope	Description
#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.