feat: initial alpine adapter work

README.md

@@ -39,6 +39,7 @@
 > - [Solid Table](https://tanstack.com/table/alpha/docs/framework/solid/solid-table)
 > - [Svelte Table](https://tanstack.com/table/alpha/docs/framework/svelte/svelte-table)
 > - [Vue Table](https://tanstack.com/table/alpha/docs/framework/vue/vue-table)
+> - [Alpine Table](https://tanstack.com/table/alpha/docs/framework/alpine/alpine-table)
 
 A headless table library for building powerful datagrids with full control over markup, styles, and behavior.
 

docs/config.json

@@ -16,6 +16,15 @@
         { "label": "FAQ", "to": "faq" }
       ],
       "frameworks": [
+        {
+          "label": "alpine",
+          "children": [
+            {
+              "label": "Alpine Table Adapter",
+              "to": "framework/alpine/alpine-table"
+            }
+          ]
+        },
         {
           "label": "angular",
           "children": [
@@ -87,6 +96,15 @@
         { "label": "Columns", "to": "guide/columns" }
       ],
       "frameworks": [
+        {
+          "label": "alpine",
+          "children": [
+            {
+              "label": "Table State",
+              "to": "framework/alpine/guide/table-state"
+            }
+          ]
+        },
         {
           "label": "angular",
           "children": [
@@ -934,6 +952,14 @@
       "label": "Basic Examples",
       "children": [],
       "frameworks": [
+        {
+          "label": "alpine",
+          "children": [
+            { "to": "framework/alpine/examples/basic-create-table", "label": "Basic (createTable)" },
+            { "to": "framework/alpine/examples/basic-external-state", "label": "Basic (External State)" },
+            { "to": "framework/alpine/examples/basic-external-atoms", "label": "Basic (External Atoms)" }
+          ]
+        },
         {
           "label": "angular",
           "children": [
@@ -1017,6 +1043,16 @@
       "label": "Feature Examples",
       "children": [],
       "frameworks": [
+        {
+          "label": "alpine",
+          "children": [
+            { "to": "framework/alpine/examples/filters", "label": "Column Filters" },
+            { "to": "framework/alpine/examples/filters-faceted", "label": "Column Filters (Faceted)" },
+            { "to": "framework/alpine/examples/filters-fuzzy", "label": "Fuzzy Search Filters" },
+            { "to": "framework/alpine/examples/pagination", "label": "Pagination" },
+            { "to": "framework/alpine/examples/sorting", "label": "Sorting" }
+          ]
+        },
         {
           "label": "angular",
           "children": [

docs/framework/alpine/alpine-table.md

@@ -0,0 +1,5 @@
+---
+title: Alpine Table
+---
+
+TODO

docs/framework/alpine/guide/table-state.md

@@ -0,0 +1,5 @@
+---
+title: Table State (Alpine) Guide
+---
+
+TODO

docs/installation.md

@@ -14,6 +14,7 @@ solid: @tanstack/solid-table
 svelte: @tanstack/svelte-table
 angular: @tanstack/angular-table
 lit: @tanstack/lit-table
+alpine: @tanstack/alpine-table
 
 <!-- ::end:tabs -->
 
@@ -46,6 +47,10 @@ The `@tanstack/angular-table` package works with Angular 17. The Angular adapter
 
 The `@tanstack/lit-table` package works with Lit 3.
 
+# Alpine
+
+The `@tanstack/alpine-table` package works with Alpine 3.
+
 <!-- ::end:framework -->
 
 Don't see your favorite framework (or favorite version of your framework) listed? You can always just use the `@tanstack/table-core` package and build your own adapter in your own codebase. Usually, only a thin wrapper is needed to manage state and rendering for your specific framework. Browse the [source code](https://github.com/TanStack/table/tree/main/packages) of all of the other adapters to see how they work.

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, Svelte and Alpine.
 
 ## What is "headless" UI?
 

docs/overview.md

@@ -12,13 +12,13 @@ If you use TypeScript, you will get top-notch type safety and editor autocomplet
 
 ## Headless
 
-As it was mentioned extensively in the [Intro](./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, Angular, and even JS-to-native platforms like React Native!
+As it was mentioned extensively in the [Intro](./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, Angular, Alpine, and even JS-to-native platforms like React Native!
 
 ## Agnostic
 
 Since TanStack Table is headless and runs on a vanilla JavaScript core, it is agnostic in a couple of ways:
 
-1. TanStack Table is **Framework Agnostic**, which means you can use it with any JavaScript framework (or library) that you want. TanStack Table provides ready-to-use adapters for React, Vue, Solid, Svelte out of the box, but you can create your own adapter if you need to.
+1. TanStack Table is **Framework Agnostic**, which means you can use it with any JavaScript framework (or library) that you want. TanStack Table provides ready-to-use adapters for React, Vue, Solid, Svelte, Alpine out of the box, but you can create your own adapter if you need to.
 2. TanStack Table is **CSS / Component Library Agnostic**, which means that you can use TanStack Table with whatever CSS strategy or component library you want. TanStack Table itself does not render any table markup or styles. You bring your own! Want to use Tailwind or ShadCN? No problem! Want to use Material UI or Bootstrap? No problem! Have your own custom design system? TanStack Table was made for you!
 
 ## Core Objects and Types

examples/alpine/basic-create-table/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TanStack Alpine Table - Basic Create Table</title>
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+  </head>
+  <body>
+    <div id="root" class="p-2">
+      <div x-data="table">
+        <div x-text="count"></div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

examples/alpine/basic-create-table/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "tanstack-alpine-table-example-basic-create-table",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite",
+    "lint": "eslint ./src"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^10.4.0",
+    "@tanstack/alpine-table": "^9.0.0-alpha.45",
+    "alpinejs": "^3.15.12"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^6.0.3",
+    "@types/alpinejs": "^3.13.11",
+    "typescript": "6.0.3",
+    "vite": "^8.0.10"
+  }
+}

examples/alpine/basic-create-table/src/main.ts

@@ -0,0 +1,49 @@
+import Alpine from 'alpinejs'
+import { createColumnHelper, tableFeatures } from '@tanstack/alpine-table'
+import { makeData } from './makeData'
+import type { Person } from './makeData'
+
+let data = makeData(20)
+
+const _features = tableFeatures({})
+
+const columnHelper = createColumnHelper<typeof _features, Person>()
+
+const columns = columnHelper.columns([
+  columnHelper.accessor('firstName', {
+    cell: (info) => info.getValue(),
+    footer: (info) => info.column.id,
+  }),
+  columnHelper.accessor((row) => row.lastName, {
+    id: 'lastName',
+    cell: (info) => `<i>${info.getValue()}</i>`,
+    header: () => '<span>Last Name</span>',
+    footer: (info) => info.column.id,
+  }),
+  columnHelper.accessor('age', {
+    header: () => 'Age',
+    cell: (info) => info.renderValue(),
+    footer: (info) => info.column.id,
+  }),
+  columnHelper.accessor('visits', {
+    header: () => '<span>Visits</span>',
+    footer: (info) => info.column.id,
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    footer: (info) => info.column.id,
+  }),
+  columnHelper.accessor('progress', {
+    header: 'Profile Progress',
+    footer: (info) => info.column.id,
+  }),
+])
+
+Alpine.data('table', () => {
+  return {
+    // TODO
+    count: 1,
+  }
+})
+
+Alpine.start()

examples/alpine/basic-create-table/src/makeData.ts

@@ -0,0 +1,43 @@
+import { faker } from '@faker-js/faker'
+
+export type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  status: string
+  progress: number
+  subRows?: Array<Person>
+}
+
+const range = (len: number) => {
+  const arr: Array<number> = []
+  for (let i = 0; i < len; i++) arr.push(i)
+  return arr
+}
+
+const newPerson = (): Person => ({
+  firstName: faker.person.firstName(),
+  lastName: faker.person.lastName(),
+  age: faker.number.int(40),
+  visits: faker.number.int(1000),
+  progress: faker.number.int(100),
+  status: faker.helpers.shuffle<string>([
+    'relationship',
+    'complicated',
+    'single',
+  ])[0],
+})
+
+export function makeData(...lens: Array<number>) {
+  const makeDataLevel = (depth = 0): Array<Person> => {
+    const len = lens[depth]
+    return range(len).map(
+      (): Person => ({
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }),
+    )
+  }
+  return makeDataLevel()
+}

examples/alpine/basic-create-table/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "emitDecoratorMetadata": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowJs": true
+  },
+  "include": ["src", "vite.config.js", "vite.config.ts"]
+}

examples/alpine/basic-create-table/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import rollupReplace from '@rollup/plugin-replace'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    rollupReplace({
+      preventAssignment: true,
+      values: {
+        __DEV__: JSON.stringify(true),
+        'process.env.NODE_ENV': JSON.stringify('development'),
+      },
+    }),
+  ],
+})

package.json

@@ -15,7 +15,7 @@
     "clean": "find . -name 'dist' -type d -prune -exec rm -rf {} +",
     "clean:node_modules": "find . -name 'node_modules' -type d -prune -exec rm -rf {} +",
     "dev": "pnpm run watch",
-    "copy:readme": "cp README.md packages/table-core/README.md && cp README.md packages/table-devtools/README.md && cp README.md packages/react-table/README.md && cp README.md packages/react-table-devtools/README.md && cp README.md packages/preact-table/README.md && cp README.md packages/preact-table-devtools/README.md && cp README.md packages/angular-table/README.md && cp README.md packages/solid-table/README.md && cp README.md packages/solid-table-devtools/README.md && cp README.md packages/vue-table/README.md && cp README.md packages/vue-table-devtools/README.md && cp README.md packages/lit-table/README.md && cp README.md packages/svelte-table/README.md && cp README.md packages/match-sorter-utils/README.md",
+    "copy:readme": "cp README.md packages/table-core/README.md && cp README.md packages/table-devtools/README.md && cp README.md packages/react-table/README.md && cp README.md packages/react-table-devtools/README.md && cp README.md packages/preact-table/README.md && cp README.md packages/preact-table-devtools/README.md && cp README.md packages/angular-table/README.md && cp README.md packages/solid-table/README.md && cp README.md packages/solid-table-devtools/README.md && cp README.md packages/vue-table/README.md && cp README.md packages/vue-table-devtools/README.md && cp README.md packages/lit-table/README.md && cp README.md packages/svelte-table/README.md && cp README.md packages/match-sorter-utils/README.md && cp README.md packages/alpine-table/README.md",
     "generate-docs": "node scripts/generateDocs.js && pnpm run copy:readme",
     "format": "prettier --experimental-cli --ignore-unknown '**/*' --write",
     "lint:fix:all": "pnpm run format && nx run-many --targets=lint --fix",
@@ -74,6 +74,7 @@
     "vitest": "^4.1.5"
   },
   "overrides": {
+    "@tanstack/alpine-table": "workspace:*",
     "@tanstack/angular-table": "workspace:*",
     "@tanstack/lit-table": "workspace:*",
     "@tanstack/match-sorter-utils": "workspace:*",