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 <kevinvandy656@gmail.com>
TanStack · Mar 22, 2024 · f99f500 · f99f500
1 parent bf09ef9
commit f99f500
Show file tree

Hide file tree

Showing 60 changed files with 2,328 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 # [TanStack](https://tanstack.com) Table v8
 
-Headless UI for building **powerful tables & datagrids** for **React, Solid, Vue, Svelte and TS/JS**.
+Headless UI for building **powerful tables & datagrids** for **React, Solid, Vue, Svelte, Qwik and TS/JS**.
 
 <a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
   <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:
 
 You may know **TanStack Table** by our adapter names, too!
 
-- [React Table](https://tanstack.com/table/v8/docs/adapters/react-table)
+- [Qwik Table](https://tanstack.com/table/v8/docs/adapters/qwik-table)
+- [**React Table**](https://tanstack.com/table/v8/docs/adapters/react-table)
 - [Solid Table](https://tanstack.com/table/v8/docs/adapters/solid-table)
 - [Svelte Table](https://tanstack.com/table/v8/docs/adapters/svelte-table)
 - [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:
 
 ```bash
 # Npm
+npm install @tanstack/qwik-table
 npm install @tanstack/react-table
 npm install @tanstack/solid-table
-npm install @tanstack/vue-table
 npm install @tanstack/svelte-table
+npm install @tanstack/vue-table
+npm install @tanstack/table-core #vanilla js that can work with any framework
 ```
 
 ## How to help?

diff --git a/docs/api/core/column-def.md b/docs/api/core/column-def.md
@@ -97,7 +97,7 @@ meta?: ColumnMeta // This interface is extensible via declaration merging. See b
 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:
 
 ```tsx
-import '@tanstack/react-table' //or vue, svelte, solid, etc.
+import '@tanstack/react-table' //or vue, svelte, solid, qwik, etc.
 
 declare module '@tanstack/react-table' {
   interface ColumnMeta<TData extends RowData, TValue> {

diff --git a/docs/api/core/table.md b/docs/api/core/table.md
@@ -2,7 +2,7 @@
 title: Table APIs
 ---
 
-## `useReactTable` / `createSolidTable` / `useVueTable` / `createSvelteTable`
+## `useReactTable` / `createSolidTable` / `useQwikTable` / `useVueTable` / `createSvelteTable`
 
 ```tsx
 type useReactTable = <TData extends AnyData>(

diff --git a/docs/config.json b/docs/config.json
@@ -24,13 +24,18 @@
         {
           "label": "FAQ",
           "to": "faq"
-        },
-        {
-          "label": "Vanilla JS/TS",
-          "to": "vanilla"
         }
       ],
       "frameworks": [
+        {
+          "label": "qwik",
+          "children": [
+            {
+              "label": "Qwik Table",
+              "to": "framework/react/qwik-table"
+            }
+          ]
+        },
         {
           "label": "react",
           "children": [
@@ -66,6 +71,15 @@
               "to": "framework/vue/vue-table"
             }
           ]
+        },
+        {
+          "label": "vanilla",
+          "children": [
+            {
+              "label": "Vanilla JS/TS",
+              "to": "vanilla"
+            }
+          ]
         }
       ]
     },
@@ -277,6 +291,23 @@
       "label": "Examples",
       "children": [],
       "frameworks": [
+        {
+          "label": "qwik",
+          "children": [
+            {
+              "to": "framework/qwik/examples/basic",
+              "label": "Basic"
+            },
+            {
+              "to": "framework/qwik/examples/row-selection",
+              "label": "Row Selection"
+            },
+            {
+              "to": "framework/qwik/examples/filters",
+              "label": "Filters"
+            }
+          ]
+        },
         {
           "label": "react",
           "children": [

diff --git a/docs/framework/qwik/qwik-table.md b/docs/framework/qwik/qwik-table.md
@@ -0,0 +1,47 @@
+---
+title: Qwik Table
+---
+
+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.
+
+## Exports
+
+`@tanstack/qwik-table` re-exports all of `@tanstack/table-core`'s and the following:
+
+### `useQwikTable`
+
+Takes an `options` object and returns a table from a Qwik Store with `NoSerialize`.
+
+```ts
+import { useQwikTable } from '@tanstack/qwik-table'
+
+const table = useQwikTable(options)
+// ...render your table
+
+```
+
+### `flexRender`
+
+A utility function for rendering cell/header/footer templates with dynamic values.
+
+Example:
+
+```jsx
+import { flexRender } from '@tanstack/qwik-table'
+//...
+return (
+  <tbody>
+    {table.getRowModel().rows.map(row => {
+      return (
+        <tr key={row.id}>
+          {row.getVisibleCells().map(cell => (
+            <td key={cell.id}>
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </td>
+          ))}
+        </tr>
+      )
+    })}
+  </tbody>
+);
+```
diff --git a/docs/guide/tables.md b/docs/guide/tables.md
@@ -8,7 +8,7 @@ title: Table Instance Guide
 
 ## Table Instance Guide
 
-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`).
+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`).
 
 ### Creating a Table Instance
 

diff --git a/docs/installation.md b/docs/installation.md
@@ -6,6 +6,12 @@ Before we dig in to the API, let's get you set up!
 
 Install your table adapter as a dependency using your favorite npm package manager
 
+## Qwik Table
+
+```bash
+npm install @tanstack/qwik-table
+```
+
 ## React Table
 
 ```bash

diff --git a/docs/introduction.md b/docs/introduction.md
@@ -2,7 +2,7 @@
 title: Introduction
 ---
 
-TanStack Table is a **Headless UI** library for building powerful tables & datagrids for TS/JS, React, Vue, Solid, and Svelte.
+TanStack Table is a **Headless UI** library for building powerful tables & datagrids for TS/JS, React, Vue, Solid, Qwik, and Svelte.
 
 ## What is "headless" UI?
 

diff --git a/docs/overview.md b/docs/overview.md
@@ -10,7 +10,7 @@ While TanStack Table is written in [TypeScript](https://www.typescriptlang.org/)
 
 ## Headless
 
-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!
+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!
 
 ## Core Objects and Types
 

diff --git a/examples/qwik/basic/.gitignore b/examples/qwik/basic/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/qwik/basic/README.md b/examples/qwik/basic/README.md
@@ -0,0 +1,38 @@
+# Qwik + Vite
+
+## Qwik in CSR mode
+
+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.
+
+```ts
+export default defineConfig({
+  plugins: [
+    qwikVite({
+      csr: true,
+    }),
+  ],
+})
+```
+
+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.
+
+## Usage
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+Learn more on the [Qwik Website](https://qwik.builder.io) and join our community on our [Discord](https://qwik.builder.io/chat)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
diff --git a/examples/qwik/basic/index.html b/examples/qwik/basic/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Qwik + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/qwik/basic/package.json b/examples/qwik/basic/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "tanstack-table-example-qwik-basic",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "serve dist"
+  },
+  "devDependencies": {
+    "@builder.io/qwik": "^1.5.1",
+    "serve": "^14.2.1",
+    "typescript": "5.4.2",
+    "vite": "^5.2.2"
+  },
+  "dependencies": {
+    "@tanstack/qwik-table": "^8.14.0"
+  }
+}
diff --git a/examples/qwik/basic/src/index.css b/examples/qwik/basic/src/index.css
@@ -0,0 +1,26 @@
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+table {
+  border: 1px solid lightgray;
+}
+
+tbody {
+  border-bottom: 1px solid lightgray;
+}
+
+th {
+  border-bottom: 1px solid lightgray;
+  border-right: 1px solid lightgray;
+  padding: 2px 4px;
+}
+
+tfoot {
+  color: gray;
+}
+
+tfoot th {
+  font-weight: normal;
+}