Angular adapter for tanstack table initial

.gitignore

@@ -46,3 +46,5 @@ yarn.lock
 *.tsbuildinfo
 
 .nx/cache
+
+.angular

.prettierignore

@@ -6,3 +6,5 @@
 **/docs
 **/old-examples
 pnpm-lock.yaml
+
+.angular

package.json

@@ -29,6 +29,7 @@
   },
   "namespace": "@tanstack",
   "devDependencies": {
+    "@angular-devkit/core": "~17.1.0",
     "@babel/core": "^7.23.7",
     "@babel/preset-env": "^7.23.8",
     "@babel/preset-react": "^7.23.3",
@@ -65,5 +66,6 @@
     "vite": "^5.0.11",
     "vitest": "^1.2.0",
     "vue": "^3.4.14"
-  }
+  },
+  "dependencies": {}
 }

packages/angular-table/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@tanstack/angular-table",
+  "version": "8.11.7",
+  "description": "Headless UI for building powerful tables & datagrids for Angular.",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/table.git",
+    "directory": "packages/angular-table"
+  },
+  "homepage": "https://tanstack.com/table",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "angular",
+    "table",
+    "angular-table",
+    "datagrid"
+  ],
+  "type": "commonjs",
+  "module": "build/lib/index.esm.js",
+  "main": "build/lib/index.js",
+  "types": "build/lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/lib/index.d.ts",
+      "import": "./build/lib/index.mjs",
+      "default": "./build/lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "engines": {
+    "node": ">=12"
+  },
+  "files": [
+    "build/lib/*",
+    "build/umd/*",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rimraf ./build",
+    "test:types": "tsc --noEmit",
+    "build": "pnpm build:rollup && pnpm build:types",
+    "build:rollup": "rollup --config rollup.config.mjs",
+    "build:types": "tsc --emitDeclarationOnly"
+  },
+  "dependencies": {
+    "@tanstack/table-core": "workspace:*"
+  },
+  "peerDependencies": {
+    "@angular/common": "^17.0.0",
+    "@angular/core": "^17.0.0"
+  },
+  "sideEffects": false
+}

packages/angular-table/rollup.config.mjs

@@ -0,0 +1,15 @@
+import { defineConfig } from 'rollup'
+import { buildConfigs } from '../../scripts/getRollupConfig.js'
+export default defineConfig(
+  buildConfigs({
+    name: 'angular-table',
+    jsName: 'AngularTable',
+    outputFile: 'index',
+    entryFile: 'src/index.ts',
+    external: ['@angular/core', '@angular/common', '@tanstack/table-core'],
+    globals: {
+      '@angular/core': 'AngularCore',
+      '@angular/common': 'AngularCommon',
+    },
+  })
+)

packages/angular-table/src/flexrender.directive.ts

@@ -0,0 +1,59 @@
+import {
+  Directive,
+  Input,
+  OnInit,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core'
+
+@Directive({
+  selector: '[flexRender]',
+  standalone: true,
+})
+export class FlexRenderDirective implements OnInit {
+  private _flexRender: any
+
+  /** properties to render */
+  private _flexRenderProps: any
+
+  @Input()
+  set flexRender(render: any) {
+    this._flexRender = render
+  }
+
+  @Input()
+  set flexRenderProps(props: any) {
+    this._flexRenderProps = props
+  }
+
+  constructor(
+    private viewContainer: ViewContainerRef,
+    private templateRef: TemplateRef<any>
+  ) {}
+
+  ngOnInit(): void {
+    this.renderComponent()
+  }
+
+  renderComponent() {
+    this.viewContainer.clear()
+    if (!this._flexRender) {
+      return ''
+    }
+
+    if (typeof this._flexRender === 'string') {
+      return this.viewContainer.createEmbeddedView(this.templateRef, {
+        $implicit: this._flexRender,
+      })
+    }
+
+    if (typeof this._flexRender === 'function') {
+      const componentInstance = this._flexRender(this._flexRenderProps)
+      return this.viewContainer.createEmbeddedView(this.templateRef, {
+        $implicit: componentInstance,
+      })
+    }
+
+    return ''
+  }
+}

packages/angular-table/src/index.ts

@@ -0,0 +1,41 @@
+import {
+  RowData,
+  TableOptions,
+  TableOptionsResolved,
+  createTable,
+} from '@tanstack/table-core'
+
+export * from '@tanstack/table-core'
+
+export * from './flexrender.directive'
+
+export function createAngularTable<TData extends RowData>(
+  options: TableOptions<TData>
+) {
+  const resolvedOptions: TableOptionsResolved<TData> = {
+    state: {},
+    onStateChange: () => {},
+    renderFallbackValue: null,
+    ...options,
+  }
+
+  let table = createTable<TData>(resolvedOptions)
+  let state = table.initialState
+
+  // Compose the default state above with any user state.
+  table.setOptions((prev: any) => {
+    return {
+      ...prev,
+      ...options,
+      state: {
+        ...state,
+        ...options.state,
+      },
+      onStateChange: (updater: any) => {
+        options.onStateChange?.(updater)
+      },
+    }
+  })
+
+  return table
+}

packages/angular-table/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./build/lib",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+  },
+  "include": ["src"]
+}