Skip to content

Commit f99f500

Browse files
anxhirrKevinVandy
anxhirr
and
KevinVandy
authored
feat: qwik-table adapter (#5420)
* feat: qwik-table v1 hook + basic example * feat: row selection example * chore: add todo * add qwik examples to workspace * fix build and repo stuff. tests passing * feat: qwik filter example * fix: qwik-table package devDep & peerDep * fix qwik adapters state * code comments * fix jsx complier source + manage qwik comp on flex render + replace table state store with signal * spread state.value * fix: handle case when function(not qwik comp) is passed to flex render * some qwik docs * add sorting example * prettier * add install instructions for qwik * fix qwik flex render docs --------- Co-authored-by: Kevin Vandy <[email protected]>
1 parent bf09ef9 commit f99f500

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+2328
-58
lines changed

‎README.md

+6-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
# [TanStack](https://tanstack.com) Table v8
44

5-
Headless UI for building **powerful tables & datagrids** for **React, Solid, Vue, Svelte and TS/JS**.
5+
Headless UI for building **powerful tables & datagrids** for **React, Solid, Vue, Svelte, Qwik and TS/JS**.
66

77
<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
88
<img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack" />
@@ -46,7 +46,8 @@ Try other [TanStack](https://tanstack.com) libraries:
4646

4747
You may know **TanStack Table** by our adapter names, too!
4848

49-
- [React Table](https://tanstack.com/table/v8/docs/adapters/react-table)
49+
- [Qwik Table](https://tanstack.com/table/v8/docs/adapters/qwik-table)
50+
- [**React Table**](https://tanstack.com/table/v8/docs/adapters/react-table)
5051
- [Solid Table](https://tanstack.com/table/v8/docs/adapters/solid-table)
5152
- [Svelte Table](https://tanstack.com/table/v8/docs/adapters/svelte-table)
5253
- [Vue Table](https://tanstack.com/table/v8/docs/adapters/vue-table)
@@ -114,10 +115,12 @@ Install one of the following packages based on your framework of choice:
114115

115116
```bash
116117
# Npm
118+
npm install @tanstack/qwik-table
117119
npm install @tanstack/react-table
118120
npm install @tanstack/solid-table
119-
npm install @tanstack/vue-table
120121
npm install @tanstack/svelte-table
122+
npm install @tanstack/vue-table
123+
npm install @tanstack/table-core #vanilla js that can work with any framework
121124
```
122125

123126
## How to help?

‎docs/api/core/column-def.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ meta?: ColumnMeta // This interface is extensible via declaration merging. See b
9797
The meta data to be associated with the column. We can access it anywhere when the column is available via `column.columnDef.meta`. This type is global to all tables and can be extended like so:
9898

9999
```tsx
100-
import '@tanstack/react-table' //or vue, svelte, solid, etc.
100+
import '@tanstack/react-table' //or vue, svelte, solid, qwik, etc.
101101
102102
declare module '@tanstack/react-table' {
103103
interface ColumnMeta<TData extends RowData, TValue> {

‎docs/api/core/table.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Table APIs
33
---
44

5-
## `useReactTable` / `createSolidTable` / `useVueTable` / `createSvelteTable`
5+
## `useReactTable` / `createSolidTable` / `useQwikTable` / `useVueTable` / `createSvelteTable`
66

77
```tsx
88
type useReactTable = <TData extends AnyData>(

‎docs/config.json

+35-4
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,18 @@
2424
{
2525
"label": "FAQ",
2626
"to": "faq"
27-
},
28-
{
29-
"label": "Vanilla JS/TS",
30-
"to": "vanilla"
3127
}
3228
],
3329
"frameworks": [
30+
{
31+
"label": "qwik",
32+
"children": [
33+
{
34+
"label": "Qwik Table",
35+
"to": "framework/react/qwik-table"
36+
}
37+
]
38+
},
3439
{
3540
"label": "react",
3641
"children": [
@@ -66,6 +71,15 @@
6671
"to": "framework/vue/vue-table"
6772
}
6873
]
74+
},
75+
{
76+
"label": "vanilla",
77+
"children": [
78+
{
79+
"label": "Vanilla JS/TS",
80+
"to": "vanilla"
81+
}
82+
]
6983
}
7084
]
7185
},
@@ -277,6 +291,23 @@
277291
"label": "Examples",
278292
"children": [],
279293
"frameworks": [
294+
{
295+
"label": "qwik",
296+
"children": [
297+
{
298+
"to": "framework/qwik/examples/basic",
299+
"label": "Basic"
300+
},
301+
{
302+
"to": "framework/qwik/examples/row-selection",
303+
"label": "Row Selection"
304+
},
305+
{
306+
"to": "framework/qwik/examples/filters",
307+
"label": "Filters"
308+
}
309+
]
310+
},
280311
{
281312
"label": "react",
282313
"children": [

‎docs/framework/qwik/qwik-table.md

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
title: Qwik Table
3+
---
4+
5+
The `@tanstack/qwik-table` adapter is a wrapper around the core table logic. Most of it's job is related to managing state the "qwik" way, providing types and the rendering implementation of cell/header/footer templates.
6+
7+
## Exports
8+
9+
`@tanstack/qwik-table` re-exports all of `@tanstack/table-core`'s and the following:
10+
11+
### `useQwikTable`
12+
13+
Takes an `options` object and returns a table from a Qwik Store with `NoSerialize`.
14+
15+
```ts
16+
import { useQwikTable } from '@tanstack/qwik-table'
17+
18+
const table = useQwikTable(options)
19+
// ...render your table
20+
21+
```
22+
23+
### `flexRender`
24+
25+
A utility function for rendering cell/header/footer templates with dynamic values.
26+
27+
Example:
28+
29+
```jsx
30+
import { flexRender } from '@tanstack/qwik-table'
31+
//...
32+
return (
33+
<tbody>
34+
{table.getRowModel().rows.map(row => {
35+
return (
36+
<tr key={row.id}>
37+
{row.getVisibleCells().map(cell => (
38+
<td key={cell.id}>
39+
{flexRender(cell.column.columnDef.cell, cell.getContext())}
40+
</td>
41+
))}
42+
</tr>
43+
)
44+
})}
45+
</tbody>
46+
);
47+
```

‎docs/guide/tables.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ title: Table Instance Guide
88

99
## Table Instance Guide
1010

11-
TanStack Table is a headless UI library. When we talk about the `table` or "table instance", we're not talking about a literal `<table>` element. Instead, we're referring to the core table object that contains the table state and APIs. The `table` instance is created by calling your adapter's `createTable` function (e.g. `useReactTable`, `createSolidTable`, `createSvelteTable`, `useVueTable`).
11+
TanStack Table is a headless UI library. When we talk about the `table` or "table instance", we're not talking about a literal `<table>` element. Instead, we're referring to the core table object that contains the table state and APIs. The `table` instance is created by calling your adapter's `createTable` function (e.g. `useReactTable`, `createSolidTable`, `createSvelteTable`, `useQwikTable`, `useVueTable`).
1212

1313
### Creating a Table Instance
1414

‎docs/installation.md

+6
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ Before we dig in to the API, let's get you set up!
66

77
Install your table adapter as a dependency using your favorite npm package manager
88

9+
## Qwik Table
10+
11+
```bash
12+
npm install @tanstack/qwik-table
13+
```
14+
915
## React Table
1016

1117
```bash

‎docs/introduction.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Introduction
33
---
44

5-
TanStack Table is a **Headless UI** library for building powerful tables & datagrids for TS/JS, React, Vue, Solid, and Svelte.
5+
TanStack Table is a **Headless UI** library for building powerful tables & datagrids for TS/JS, React, Vue, Solid, Qwik, and Svelte.
66

77
## What is "headless" UI?
88

‎docs/overview.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ While TanStack Table is written in [TypeScript](https://www.typescriptlang.org/)
1010

1111
## Headless
1212

13-
As it was mentioned extensively in the [Intro](./guide/introduction) section, TanStack Table is **headless**. This means that it doesn't render any DOM elements, and instead relies on you, the UI/UX developer to provide the table's markup and styles. This is a great way to build a table that can be used in any UI framework, including React, Vue, Solid, and even JS-to-native platforms like React Native!
13+
As it was mentioned extensively in the [Intro](./guide/introduction) section, TanStack Table is **headless**. This means that it doesn't render any DOM elements, and instead relies on you, the UI/UX developer to provide the table's markup and styles. This is a great way to build a table that can be used in any UI framework, including React, Vue, Solid, Svelte, Qwik, and even JS-to-native platforms like React Native!
1414

1515
## Core Objects and Types
1616

‎examples/qwik/basic/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/qwik/basic/README.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Qwik + Vite
2+
3+
## Qwik in CSR mode
4+
5+
This starter is using a pure CSR (Client Side Rendering) mode. This means, that the application is fully bootstrapped in the browser. Most of Qwik innovations however take advantage of SSR (Server Side Rendering) mode.
6+
7+
```ts
8+
export default defineConfig({
9+
plugins: [
10+
qwikVite({
11+
csr: true,
12+
}),
13+
],
14+
})
15+
```
16+
17+
Use `npm create qwik@latest` to create a full production ready Qwik application, using SSR and [QwikCity](https://qwik.builder.io/docs/qwikcity/), our server-side metaframwork.
18+
19+
## Usage
20+
21+
```bash
22+
$ npm install # or pnpm install or yarn install
23+
```
24+
25+
Learn more on the [Qwik Website](https://qwik.builder.io) and join our community on our [Discord](https://qwik.builder.io/chat)
26+
27+
## Available Scripts
28+
29+
In the project directory, you can run:
30+
31+
### `npm run dev`
32+
33+
Runs the app in the development mode.<br>
34+
Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
35+
36+
### `npm run build`
37+
38+
Builds the app for production to the `dist` folder.<br>

‎examples/qwik/basic/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Qwik + TS</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎examples/qwik/basic/package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "tanstack-table-example-qwik-basic",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "serve dist"
10+
},
11+
"devDependencies": {
12+
"@builder.io/qwik": "^1.5.1",
13+
"serve": "^14.2.1",
14+
"typescript": "5.4.2",
15+
"vite": "^5.2.2"
16+
},
17+
"dependencies": {
18+
"@tanstack/qwik-table": "^8.14.0"
19+
}
20+
}

‎examples/qwik/basic/src/index.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
html {
2+
font-family: sans-serif;
3+
font-size: 14px;
4+
}
5+
6+
table {
7+
border: 1px solid lightgray;
8+
}
9+
10+
tbody {
11+
border-bottom: 1px solid lightgray;
12+
}
13+
14+
th {
15+
border-bottom: 1px solid lightgray;
16+
border-right: 1px solid lightgray;
17+
padding: 2px 4px;
18+
}
19+
20+
tfoot {
21+
color: gray;
22+
}
23+
24+
tfoot th {
25+
font-weight: normal;
26+
}

0 commit comments

Comments
 (0)