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

Author: anxhirr

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?

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

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

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": [

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>
+);
+```

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
 

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

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?
 

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
 

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?