[
{
"path": ".editorconfig",
"content": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n"
},
{
"path": ".gitattributes",
"content": "# Auto detect text files and perform LF normalization\n* text=auto eol=lf\n"
},
{
"path": ".github/FUNDING.yml",
"content": "# These are supported funding model platforms\n\ngithub: tannerlinsley\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.yml",
"content": "name: '🐛 Bug report'\ndescription: Report a reproducible bug or regression\nbody:\n - type: markdown\n attributes:\n value: |\n Thank you for reporting an issue :pray:.\n\n This issue tracker is for reporting reproducible bugs or regression's found in [react-table](https://github.com/tanstack/table)\n If you have a question about how to achieve or implement something and are struggling, please post a question\n inside of react-table's [Discussions tab](https://github.com/tanstack/table/discussions) instead of filing an issue.\n\n Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already:\n - TanStack Table's [Discussions tab](https://github.com/tanstack/table/discussions)\n - TanStack Table's [Open Issues](https://github.com/tanstack/table/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc)\n - TanStack Table's [Closed Issues](https://github.com/tanstack/table/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed)\n\n The more information you fill in, the better the community can help you.\n\n - type: input\n id: tanstack-table-version\n attributes:\n label: TanStack Table version\n description: |\n - Please let us know the exact version of the TanStack Table framework adapter that you were using when the issue occurred. If you are using an older version, check to see if your bug has already been solved in the latest version. Please don't just put in \"latest\", as this is subject to change.\n - The latest \"table-core\" version is \n placeholder: |\n e.g. v8.11.6\n validations:\n required: true\n\n - type: input\n id: framework-library-version\n attributes:\n label: Framework/Library version\n description: Which framework and what version of that framework are you using?\n placeholder: |\n e.g. React v17.0.2\n validations:\n required: true\n\n - type: textarea\n id: description\n attributes:\n label: Describe the bug and the steps to reproduce it\n description: Provide a clear and concise description of the challenge you are running into, and the steps we should take to try to reproduce your bug.\n validations:\n required: true\n\n - type: input\n id: link\n attributes:\n label: Your Minimal, Reproducible Example - (Sandbox Highly Recommended)\n description: |\n Please add a link to a minimal reproduction.\n Note:\n - Your bug may get fixed much faster if we can run your code and it doesn't have dependencies other than React.\n - To create a shareable code example for web, you can use CodeSandbox (https://codesandbox.io/s/new) or Stackblitz (https://stackblitz.com/).\n - Please make sure the example is complete and runnable without prior dependencies and free of unnecessary abstractions\n - Feel free to fork any of the official CodeSandbox examples to reproduce your issue: https://github.com/tanstack/table/tree/main/examples/\n - For React Native, you can use: https://snack.expo.dev/\n - For TypeScript related issues only, a TypeScript Playground link might be sufficient: https://www.typescriptlang.org/play\n - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve.\n placeholder: |\n e.g. Code Sandbox, Stackblitz, TypeScript Playground, etc.\n validations:\n required: true\n\n - type: textarea\n id: screenshots_or_videos\n attributes:\n label: Screenshots or Videos (Optional)\n description: |\n If applicable, add screenshots or a video to help explain your problem.\n For more information on the supported file image/file types and the file size limits, please refer\n to the following link: https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/attaching-files\n placeholder: |\n You can drag your video or image files inside of this editor ↓\n\n - type: dropdown\n attributes:\n options:\n - No, because I do not know how\n - No, because I do not have time to dig into it\n - Maybe, I'll investigate and start debugging\n - Yes, I think I know how to fix it and will discuss it in the comments of this issue\n - Yes, I am also opening a PR that solves the problem along side this issue\n label: Do you intend to try to help solve this bug with your own PR?\n description: |\n If you think you know the cause of the problem, the fastest way to get it fixed is to suggest a fix, or fix it yourself! However, it is ok if you cannot solve this yourself and are just wanting help.\n - type: checkboxes\n id: agrees-to-terms\n attributes:\n label: Terms & Code of Conduct\n description: By submitting this issue, you agree to follow our Code of Conduct and can verify that you have followed the requirements outlined above to the best of your ability.\n options:\n - label: I agree to follow this project's Code of Conduct\n required: true\n - label: I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.\n required: true\n"
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"content": "blank_issues_enabled: false\ncontact_links:\n - name: 🤔 Feature Requests & Questions\n url: https://github.com/TanStack/table/discussions\n about: Please ask and answer questions here.\n - name: 💬 Community Chat\n url: https://discord.gg/mQd7egN\n about: A dedicated discord server hosted by TanStack\n - name: 🦋 TanStack Bluesky\n url: https://bsky.app/profile/tanstack.com\n about: Stay up to date with new releases of our libraries\n"
},
{
"path": ".github/pull_request_template",
"content": "## 🎯 Changes\n\n\n\n## ✅ Checklist\n\n- [ ] I have followed the steps in the [Contributing guide](https://github.com/TanStack/table/blob/main/CONTRIBUTING.md).\n- [ ] I have tested this code locally with `pnpm test:pr`.\n"
},
{
"path": ".github/workflows/autofix.yml",
"content": "name: autofix.ci # needed to securely identify the workflow\n\non:\n pull_request:\n push:\n branches: [main, alpha, beta, rc]\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.number || github.ref }}\n cancel-in-progress: true\n\npermissions:\n contents: read\n\njobs:\n autofix:\n name: autofix\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v6.0.1\n with:\n fetch-depth: 0\n - name: Setup Tools\n uses: tanstack/config/.github/setup@main\n - name: Fix formatting\n run: pnpm format\n - name: Apply fixes\n uses: autofix-ci/action@dd55f44df8f7cdb7a6bf74c78677eb8acd40cd0a\n with:\n commit-message: 'ci: apply automated fixes'\n"
},
{
"path": ".github/workflows/pr.yml",
"content": "name: PR\n\non:\n pull_request:\n paths-ignore:\n - 'docs/**'\n - 'media/**'\n - '**/*.md'\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.number || github.ref }}\n cancel-in-progress: true\n\nenv:\n NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}\n\npermissions:\n contents: read\n\njobs:\n test:\n name: Test\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v6.0.1\n with:\n fetch-depth: 0\n - name: Start Nx Agents\n run: npx nx-cloud start-ci-run --distribute-on=\".nx/workflows/dynamic-changesets.yaml\"\n - name: Setup Tools\n uses: tanstack/config/.github/setup@main\n - name: Get base and head commits for `nx affected`\n uses: nrwl/nx-set-shas@v4.4.0\n with:\n main-branch-name: main\n - name: Run Checks\n run: pnpm run test:pr --parallel=3\n - name: Stop Nx Agents\n if: ${{ always() }}\n run: npx nx-cloud stop-all-agents\n preview:\n name: Preview\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v6.0.1\n with:\n fetch-depth: 0\n - name: Setup Tools\n uses: tanstack/config/.github/setup@main\n - name: Build Packages\n run: pnpm run build:all\n - name: Publish Previews\n run: pnpx pkg-pr-new publish --pnpm --compact './packages/*' --template './examples/*/*'\n"
},
{
"path": ".github/workflows/release.yml",
"content": "name: Release\n\non:\n workflow_dispatch:\n inputs:\n tag:\n description: override release tag\n required: false\n push:\n branches: [main, alpha, beta, rc]\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.number || github.ref }}\n cancel-in-progress: true\n\nenv:\n NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}\n\npermissions:\n contents: write\n id-token: write\n\njobs:\n release:\n name: Release\n if: github.repository_owner == 'TanStack'\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v6.0.1\n with:\n fetch-depth: 0\n - name: Start Nx Agents\n run: npx nx-cloud start-ci-run --distribute-on=\".nx/workflows/dynamic-changesets.yaml\"\n - name: Setup Tools\n uses: tanstack/config/.github/setup@main\n - name: Run Tests\n run: pnpm run test:ci --parallel=3\n - name: Stop Nx Agents\n if: ${{ always() }}\n run: npx nx-cloud stop-all-agents\n - name: Publish\n run: |\n git config --global user.name 'Tanner Linsley'\n git config --global user.email 'tannerlinsley@users.noreply.github.com'\n pnpm run cipublish\n env:\n GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n TAG: ${{ inputs.tag }}\n"
},
{
"path": ".gitignore",
"content": "\n# See https://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\npackage-lock.json\nyarn.lock\n\n# builds\nbuild\ndist\nlib\nes\nartifacts\n.rpt2_cache\ncoverage\n*.tgz\n\n# misc\n.DS_Store\n.env\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n.next\n.svelte-kit\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.history\nsize-plugin.json\nstats-hydration.json\nstats-react.json\nstats.html\n.vscode/settings.json\n.idea\n\n*.log\n.DS_Store\n.cache\n.idea\n.pnpm-store\n\npackage-lock.json\nyarn.lock\n*.tsbuildinfo\n*.tsbuildinfo\n\n.svelte-kit\n.nx/cache\n.nx/workspace-data\nvite.config.js.timestamp-*\nvite.config.ts.timestamp-*\n\n.angular\n"
},
{
"path": ".npmrc",
"content": "provenance=true\n"
},
{
"path": ".nvmrc",
"content": "24.8.0\n"
},
{
"path": ".nx/workflows/dynamic-changesets.yaml",
"content": "distribute-on:\n small-changeset: 3 linux-medium-js\n medium-changeset: 6 linux-medium-js\n large-changeset: 10 linux-medium-js\n"
},
{
"path": ".prettierignore",
"content": "**/.nx/\n**/.nx/cache\n**/.svelte-kit\n**/build\n**/coverage\n**/dist\n**/docs\n**/old-examples\n**/examples/**/*.svelte\npnpm-lock.yaml\n\n.angular\n"
},
{
"path": ".vscode/extensions.json",
"content": "{\n \"recommendations\": [\"dbaeumer.vscode-eslint\", \"esbenp.prettier-vscode\"]\n}\n"
},
{
"path": "CODE_OF_CONDUCT.md",
"content": "---\ntitle: Code of Conduct\nid: code-of-conduct\n---\n\n# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at TANNERLINSLEY@GMAIL.COM. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n"
},
{
"path": "CONTRIBUTING.md",
"content": "---\ntitle: Contributing\nid: contributing\n---\n\n# Contributing\n\n## Questions\n\nIf you have questions about implementation details, help or support, then please use our dedicated community forum at [Github Discussions](https://github.com/tanstack/table/discussions) **PLEASE NOTE:** If you choose to instead open an issue for your question, your issue will be immediately closed and redirected to the forum.\n\n## Reporting Issues\n\nIf you have found what you think is a bug, please [file an issue](https://github.com/tanstack/table/issues/new). **PLEASE NOTE:** Issues that are identified as implementation questions or non-issues will be immediately closed and redirected to [Github Discussions](https://github.com/tanstack/table/discussions)\n\n## Suggesting new features\n\nIf you are here to suggest a feature, first create an issue if it does not already exist. From there, we will discuss use-cases for the feature and then finally discuss how it could be implemented.\n\n## Development\n\nBefore proceeding with development, ensure you match one of the following criteria:\n\n- Fixing a small bug\n- Fixing a larger issue that has been previously discussed and agreed-upon by maintainers\n- Adding a new feature that has been previously discussed and agreed-upon by maintainers\n\n## Development Workflow\n\n- Fork this repository, we prefer the `feat-*` branch name style\n- Ensure you have `pnpm` installed\n- Install projects dependencies and linkages by running `pnpm install`\n- Auto-build and auto-test files as you edit by running `pnpm dev`\n- Implement your changes and tests\n- To run examples, follow their individual directions. Usually this includes:\n - cd into the example directory\n - Do NOT install dependencies again or do any linking. Nx already handles this for you. Only run install from the project root.\n - Starting the dev server with `pnpm dev` or `pnpm start` (from the example directory)\n- To test in your own projects:\n - Build/watch for changes with `pnpm build`/`pnpm dev`\n- Document your changes in the appropriate documentation website markdown pages\n- Commit your work and open a pull request\n- Submit PR for review\n\n## Adding a new example\n\n- Clone an existing example into the appropriate `examples` directory\n- Name it the example name in kebab-case\n- Update the new example's package.json to match the new example name and any other details\n- Check dependencies for unused packages\n- Install any additional packages to the example that you may need\n- Update the docs/config.json file to include the new example in the navigation sidebar\n- Commit the example eg. `docs: Add example-name`\n"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2016 Tanner Linsley\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "
\n\n### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)\n\n\n\n# TanStack Table\n\n> [!NOTE]\n> You may know TanStack Table by the adapter names:\n>\n> - [Angular Table](https://tanstack.com/table/alpha/docs/framework/angular/angular-table)\n> - [Lit Table](https://tanstack.com/table/alpha/docs/framework/lit/lit-table)\n> - [React Table](https://tanstack.com/table/alpha/docs/framework/react/react-table)\n> - [Solid Table](https://tanstack.com/table/alpha/docs/framework/solid/solid-table)\n> - [Svelte Table](https://tanstack.com/table/alpha/docs/framework/svelte/svelte-table)\n> - [Vue Table](https://tanstack.com/table/alpha/docs/framework/vue/vue-table)\n\nA headless table library for building powerful datagrids with full control over markup, styles, and behavior.\n\n- Framework‑agnostic core with bindings for React, Vue & Solid\n- 100% customizable — bring your own UI, components, and styles\n- Sorting, filtering, grouping, aggregation & row selection\n- Lightweight, virtualizable & server‑side friendly\n\n### Read the Docs →\n\n## Get Involved\n\n- We welcome issues and pull requests!\n- Participate in [GitHub discussions](https://github.com/TanStack/table/discussions)\n- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)\n- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions\n\n## Partners\n\n
\nWe're looking for TanStack Table Partners to join our mission! Partner with us to push the boundaries of TanStack Table and build amazing things together.\n
\n\nWhile we clearly love TanStack Table, we acknowledge that it is not a \"batteries\" included product packed with customer support and enterprise polish. We realize that some of our users may need this though! To help out here, we want to introduce you to AG Grid, an enterprise-grade data grid solution that can supercharge your applications with its extensive feature set and robust performance. While TanStack Table is also a powerful option for implementing data grids, we believe in providing our users with a diverse range of choices that best fit their specific requirements. AG Grid is one such choice, and we're excited to highlight its capabilities for you.\n\n## Why Choose [AG Grid](https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable)?\n\nHere are some good reasons to consider AG Grid for your next project:\n\n### Comprehensive Feature Set\n\nAG Grid offers an extensive set of features, making it a versatile and powerful data grid solution. With AG Grid, you get access to a wide range of functionalities that cater to the needs of complex enterprise applications. From advanced sorting, filtering, and grouping capabilities to column pinning, multi-level headers, and tree data structure support, AG Grid provides you with the tools to create dynamic and interactive data grids that meet your application's unique demands.\n\n### High Performance\n\nWhen it comes to handling large datasets and achieving exceptional performance, AG Grid delivers outstanding results. It employs highly optimized rendering techniques, efficient data updates, and virtualization to ensure smooth scrolling and fast response times, even when dealing with thousands or millions of rows of data. AG Grid's performance optimizations make it an excellent choice for applications that require high-speed data manipulation and visualization.\n\n### Customization and Extensibility\n\nAG Grid is designed to be highly customizable and extensible, allowing you to tailor the grid to your specific needs. It provides a rich set of APIs and events that enable you to integrate custom functionality seamlessly. You can define custom cell renderers, editors, filters, and aggregators to enhance the grid's behavior and appearance. AG Grid also supports a variety of themes, allowing you to match the grid's visual style to your application's design.\n\n### Support for Enterprise Needs\n\nAs an enterprise-focused solution, AG Grid caters to the requirements of complex business applications. It offers enterprise-specific features such as row grouping, column pinning, server-side row model, master/detail grids, and rich editing capabilities. AG Grid also integrates well with other enterprise frameworks and libraries, making it a reliable choice for large-scale projects.\n\n### Active Development and Community Support\n\nAG Grid benefits from active development and a thriving community of developers. The team behind AG Grid consistently introduces new features and enhancements, ensuring that the product evolves to meet the changing needs of the industry. The community support is robust, with forums, documentation, and examples readily available to assist you in utilizing the full potential of AG Grid.\n\n## Conclusion\n\nWhile TanStack Table remains a powerful and flexible option for implementing data grids, we understand that different projects have different requirements. AG Grid offers a compelling enterprise-grade solution that may be particularly suited to your needs. Its comprehensive feature set, high performance, customization options, and focus on enterprise requirements make AG Grid an excellent choice for projects that demand a robust and scalable data grid solution.\n\nWe encourage you to explore AG Grid further by visiting their website and trying out their demo. Remember that both TanStack Table and AG Grid have their unique strengths and considerations. We believe in providing options to our users, empowering you to make informed decisions and choose the best fit for your specific use case.\n\nVisit the [AG Grid website](https://www.ag-grid.com).\n"
},
{
"path": "docs/faq.md",
"content": "---\ntitle: FAQ\n---\n\n## How do I stop infinite rendering loops?\n\nIf you are using React, there is a very common pitfall that can cause infinite rendering. If you fail to give your `columns`, `data`, or `state` a stable reference, React will enter an infinite loop of re-rendering upon any change to the table state.\n\nWhy does this happen? Is this a bug in TanStack Table? **No**, it is not. *This is fundamentally how React works*, and properly managing your columns, data, and state will prevent this from happening.\n\nTanStack Table is designed to trigger a re-render whenever either the `data` or `columns` that are passed into the table change, or whenever any of the table's state changes.\n\n> Failing to give `columns` or `data` stable references can cause an infinite loop of re-renders.\n\n### Pitfall 1: Creating new columns or data on every render\n\n```js\nexport default function MyComponent() {\n //😵 BAD: This will cause an infinite loop of re-renders because `columns` is redefined as a new array on every render!\n const columns = [\n // ...\n ];\n\n //😵 BAD: This will cause an infinite loop of re-renders because `data` is redefined as a new array on every render!\n const data = [\n // ...\n ];\n\n //❌ Columns and data are defined in the same scope as `useTable` without a stable reference, will cause infinite loop!\n const table = useTable({\n columns,\n data,\n });\n\n return
...
;\n}\n```\n\n### Solution 1: Stable references with useMemo or useState\n\nIn React, you can give a \"stable\" reference to variables by defining them outside/above the component, or by using `useMemo` or `useState`, or by using a 3rd party state management library (like Redux or React Query 😉)\n\n```js\n//✅ OK: Define columns outside of the component\nconst columns = [\n // ...\n];\n\n//✅ OK: Define data outside of the component\nconst data = [\n // ...\n];\n\n// Usually it's more practical to define columns and data inside the component, so use `useMemo` or `useState` to give them stable references\nexport default function MyComponent() {\n //✅ GOOD: This will not cause an infinite loop of re-renders because `columns` is a stable reference\n const columns = useMemo(() => [\n // ...\n ], []);\n\n //✅ GOOD: This will not cause an infinite loop of re-renders because `data` is a stable reference\n const [data, setData] = useState(() => [\n // ...\n ]);\n\n // Columns and data are defined in a stable reference, will not cause infinite loop!\n const table = useTable({\n columns,\n data,\n });\n\n return
...
;\n}\n```\n\n### Pitfall 2: Mutating columns or data in place\n\nEven if you give your initial `columns` and `data` stable references, you can still run into infinite loops if you mutate them in place. This is a common pitfall that you may not notice that you are doing at first. Something as simple as an inline `data.filter()` can cause an infinite loop if you are not careful.\n\n```js\nexport default function MyComponent() {\n //✅ GOOD\n const columns = useMemo(() => [\n // ...\n ], []);\n\n //✅ GOOD (React Query provides stable references to data automatically)\n const { data, isLoading } = useQuery({\n //...\n });\n\n const table = useTable({\n columns,\n //❌ BAD: This will cause an infinite loop of re-renders because `data` is mutated in place (destroys stable reference)\n data: data?.filter(d => d.isActive) ?? [],\n });\n\n return
...
;\n}\n```\n\n### Solution 2: Memoize your data transformations\n\nTo prevent infinite loops, you should always memoize your data transformations. This can be done with `useMemo` or similar.\n\n```js\nexport default function MyComponent() {\n //✅ GOOD\n const columns = useMemo(() => [\n // ...\n ], []);\n\n //✅ GOOD\n const { data, isLoading } = useQuery({\n //...\n });\n\n //✅ GOOD: This will not cause an infinite loop of re-renders because `filteredData` is memoized\n const filteredData = useMemo(() => data?.filter(d => d.isActive) ?? [], [data]);\n\n const table = useTable({\n columns,\n data: filteredData, // stable reference!\n });\n\n return
...
;\n}\n```\n\n### React Forget\n\nWhen React Forget is released, these problems might be a thing of the past. Or just use Solid.js... 🤓\n\n## How do I stop my table state from automatically resetting when my data changes?\n\nMost plugins use state that _should_ normally reset when the data sources changes, but sometimes you need to suppress that from happening if you are filtering your data externally, or immutably editing your data while looking at it, or simply doing anything external with your data that you don't want to trigger a piece of table state to reset automatically.\n\nFor those situations, each plugin provides a way to disable the state from automatically resetting internally when data or other dependencies for a piece of state change. By setting any of them to `false`, you can stop the automatic resets from being triggered.\n\nHere is a React-based example of stopping basically every piece of state from changing as they normally do while we edit the `data` source for a table:\n\n```js\nconst [data, setData] = React.useState([])\nconst skipPageResetRef = React.useRef()\n\nconst updateData = newData => {\n // When data gets updated with this function, set a flag\n // to disable all of the auto resetting\n skipPageResetRef.current = true\n\n setData(newData)\n}\n\nReact.useEffect(() => {\n // After the table has updated, always remove the flag\n skipPageResetRef.current = false\n})\n\nuseTable({\n ...\n autoResetPageIndex: !skipPageResetRef.current,\n autoResetExpanded: !skipPageResetRef.current,\n})\n```\n\nNow, when we update our data, the above table states will not automatically reset!\n"
},
{
"path": "docs/framework/angular/angular-table.md",
"content": "---\ntitle: Angular Table\n---\n\nThe `@tanstack/angular-table` adapter is a wrapper around the core table logic. Most of it's job is related to managing\nstate using angular signals, providing types and the rendering implementation of cell/header/footer templates.\n\n## Exports\n\n`@tanstack/angular-table` re-exports all of `@tanstack/table-core`'s APIs and the following:\n\n### `injectTable`\n\nCreates and returns an Angular-reactive table instance.\n\n`injectTable` accepts either:\n\n- an options function `() => TableOptions`\n- a computed signal returning `TableOptions`\n\nThe initializer is intentionally re-evaluated whenever any signal read inside it changes.\nThis is how the adapter keeps the table in sync with Angular's reactivity model.\n\nBecause of that behavior, keep expensive/static values (for example `columns`, feature setup, row models) as stable references outside the initializer, and only read reactive state (`data()`, pagination/filter/sorting signals, etc.) inside it.\n\nSince `ColumnDef` is stricter about generics, prefer building columns with `createColumnHelper()` so feature and row types are inferred consistently.\n\nThe returned table is also signal-reactive: table state and table APIs are wired for Angular signals, so you can safely consume table methods inside `computed(...)` and `effect(...)`.\n\n```ts\nimport { computed, effect, signal } from '@angular/core'\nimport {\n createColumnHelper,\n injectTable,\n type ColumnDef,\n rowPaginationFeature,\n stockFeatures\n} from '@tanstack/angular-table'\n\n// Register all table core features\nconst _features = tableFeatures(stockFeatures);\n// ...or register only your needed features \nconst _features = tableFeatures({\n rowPaginationFeature,\n // ...all other features\n})\n\nconst columnHelper = createColumnHelper()\n\nexport class AppComponent {\n readonly data = signal([])\n\n // If you type columns manually, include both generics:\n // readonly columns: ColumnDef[] = [...]\n readonly columns = columnHelper.columns([\n columnHelper.accessor('firstName', {\n header: 'First name',\n cell: info => info.getValue(),\n }),\n // ...\n ])\n\n // This function is re-run when any signal read inside changes.\n readonly table = injectTable(() => ({\n _features: _features,\n // Reactive state can be read directly\n data: this.data(),\n\n state: {\n // ...\n },\n\n // Keep stable references outside the initializer\n columns: this.columns,\n }))\n\n constructor() {\n effect(() => {\n console.log('Visible rows:', this.table.getRowModel().rows.length)\n })\n }\n}\n```\n\nSee [injectTable API Reference](reference/functions/injectTable)\n\n### `createTableHook`\n\n`createTableHook` is the Angular composition API for building reusable table infrastructure.\n\nUse it when multiple tables should share the same defaults (features, row models, default options, and component registries) while keeping strong types across the app.\n\nAt runtime, `createTableHook` wraps `injectTable` and returns typed helpers such as:\n\n- `injectAppTable` for creating tables with shared defaults\n- `createAppColumnHelper` for strongly typed column definitions\n- pre-typed context helpers (`injectTableContext`, `injectTableCellContext`, `injectTableHeaderContext`, `injectFlexRenderCellContext`, `injectFlexRenderHeaderContext`)\n\nFor full setup and patterns, see the [Table Composition Guide](./guide/table-composition.md).\n\n### `FlexRender`\n\nAn Angular structural rendering primitive for cell/header/footer content.\n\nIt supports the same content kinds as Angular rendering:\n\n- primitive values (`string`, `number`, plain objects)\n- `TemplateRef`\n- component types\n- `flexRenderComponent(component, options?)` wrappers with typed `inputs`, `outputs`, `injector`, `bindings`, and `directives`\n\nColumn render functions (`header`, `cell`, `footer`) run in Angular injection context, so you can use `inject()` and signals directly in render logic.\n\nFor complete rendering details (`*flexRender`, shorthand directives, `flexRenderComponent`, `TemplateRef`, component inputs/outputs, and `injectFlexRenderContext`), see the [Rendering components Guide](./guide/rendering.md).\n\n### Context helpers and directives\n\n`@tanstack/angular-table` also exports Angular DI helpers and directives for table/cell/header context:\n\n- `TanStackTable` + `injectTableContext()`\n- `TanStackTableCell` + `injectTableCellContext()`\n- `TanStackTableHeader` + `injectTableHeaderContext()`\n\nThese APIs provide signal-based context values and are available from nearest directives or from `*flexRender`-rendered components when matching props are present.\n\n### Full API Reference\n\nSee [Angular API Reference](reference/index.md)\n"
},
{
"path": "docs/framework/angular/guide/migrating.md",
"content": "---\ntitle: Migrating to TanStack Table v9 (Angular)\n---\n\n## What's New in TanStack Table v9\n\nTanStack Table v9 is a major release that introduces significant architectural improvements while maintaining the core table logic you're familiar with. Here are the key changes:\n\n### 1. Tree-shaking\n\n- **Features are tree-shakeable**: Features are now treated as plugins—import only what you use. If your table only needs sorting, you won't ship filtering, pagination, or other feature code. Bundlers can eliminate unused code, so for smaller tables you can expect a meaningfully smaller bundle compared to v8. This also lets TanStack Table add features over time without bloating everyone's bundles.\n- **Row models and their functions are refactored**: Row model factories (`createFilteredRowModel`, `createSortedRowModel`, etc.) now accept their processing functions (`filterFns`, `sortFns`, `aggregationFns`) as parameters. This enables tree-shaking of the functions themselves—if you use a custom filter, you don't pay for built-in filters you never use.\n\n### 2. State Management\n\n- **Uses TanStack Store**: The internal state system has been rebuilt on [TanStack Store](https://tanstack.com/store), providing a reactive, framework-agnostic foundation.\n- **Opt-in subscriptions instead of memo hacks**: In Angular, you consume state via signals and `computed(...)`. You can keep reads scoped to the state you actually need and avoid unnecessary template work.\n\n### 3. Composability\n\n- **`tableOptions`**: New utilities let you compose and share table configurations. Define `_features`, `_rowModels`, and default options once, then reuse them across tables or pass them through `createTableHook`.\n- **`createTableHook`** (optional, advanced): Create reusable, strongly typed Angular table factories with pre-bound features, row models, default options, and component registries.\n\n### The Good News: Most Upgrades Are Opt-in\n\nWhile v9 is a significant upgrade, **you don't have to adopt everything at once**:\n\n- **Don't want to think about tree-shaking yet?** You can start with `stockFeatures` to include most commonly used features.\n- **Your table markup is largely unchanged.** How you render `
`, ``, `
`, `
`, etc. remains the same.\n\nThe main change is **how you define a table** with the Angular adapter — specifically the new `_features` and `_rowModels` options.\n\n---\n\n## Quick Legacy Migration\n\nAngular does **not** ship a legacy API.\n\nIf you're migrating an Angular project from TanStack Table v8 to v9, you will migrate directly to the v9 Angular adapter APIs (`injectTable`, `_features`, and `_rowModels`).\n\n---\n\nThe rest of this guide focuses on migrating to the full v9 API and taking advantage of its features.\n\n## Core Breaking Changes\n\n### Entrypoint Change\n\nThe Angular adapter entrypoint to create a table instance is `injectTable`:\n\n```ts\n// v8\nimport { createAngularTable } from '@tanstack/angular-table'\n\nconst v8Table = createAngularTable(() => ({\n // options\n}))\n\n// v9\nimport { injectTable } from '@tanstack/angular-table'\n\nconst v9Table = injectTable(() => ({\n // options\n}))\n```\n\n> Note: `injectTable` evaluates your initializer whenever any Angular signal read inside of it changes.\n> Keep expensive/static values (like `columns`, `_features`, and `_rowModels`) as stable references outside the initializer.\n\n### New Required Options: `_features` and `_rowModels`\n\nIn v9, you must explicitly declare which features and row models your table uses:\n\n```ts\n// v8\nimport { createAngularTable, getCoreRowModel } from '@tanstack/angular-table'\n\nconst v8Table = createAngularTable(() => ({\n columns,\n data: data(),\n getCoreRowModel: getCoreRowModel(),\n}))\n\n// v9\nimport {\n injectTable,\n tableFeatures,\n} from '@tanstack/angular-table'\n\nconst _features = tableFeatures({}) // Empty = core feaFtures only\n\n// Define stable references outside the initializer\nconst v9Table = injectTable(() => ({\n _features,\n _rowModels: {}, // Core row model is automatic\n columns: this.columns,\n data: this.data(),\n}))\n```\n\n---\n\n## The `_features` Option\n\nFeatures control what table functionality is available. In v8, all features were bundled. In v9, you import only what you need.\n\n### Importing Individual Features\n\n```ts\nimport {\n tableFeatures,\n // Import only the features you need\n columnFilteringFeature,\n rowSortingFeature,\n rowPaginationFeature,\n columnVisibilityFeature,\n rowSelectionFeature,\n} from '@tanstack/angular-table'\n\n// Create a features object (define this outside your injectTable initializer for stable reference)\nconst _features = tableFeatures({\n columnFilteringFeature,\n rowSortingFeature,\n rowPaginationFeature,\n columnVisibilityFeature,\n rowSelectionFeature,\n})\n```\n\n### Using `stockFeatures` for v8-like Behavior\n\nIf you want all features without thinking about it (like v8), import `stockFeatures`:\n\n```ts\nimport { injectTable, stockFeatures } from '@tanstack/angular-table'\n\nclass TableCmp {\n readonly table = injectTable(() => ({\n _features: stockFeatures, // All features included\n _rowModels: { /* ... */ },\n columns: this.columns,\n data: this.data(),\n }))\n}\n```\n\n### Available Features\n\n| Feature | Import Name |\n|---------|-------------|\n| Column Filtering | `columnFilteringFeature` |\n| Global Filtering | `globalFilteringFeature` |\n| Row Sorting | `rowSortingFeature` |\n| Row Pagination | `rowPaginationFeature` |\n| Row Selection | `rowSelectionFeature` |\n| Row Expanding | `rowExpandingFeature` |\n| Row Pinning | `rowPinningFeature` |\n| Column Pinning | `columnPinningFeature` |\n| Column Visibility | `columnVisibilityFeature` |\n| Column Ordering | `columnOrderingFeature` |\n| Column Sizing | `columnSizingFeature` |\n| Column Resizing | `columnResizingFeature` |\n| Column Grouping | `columnGroupingFeature` |\n| Column Faceting | `columnFacetingFeature` |\n\n---\n\n## The `_rowModels` Option\n\nRow models are the functions that process your data (filtering, sorting, pagination, etc.). In v9, they're configured via `_rowModels` instead of `get*RowModel` options.\n\n### Migration Mapping\n\n| v8 Option | v9 `_rowModels` Key | v9 Factory Function |\n|-----------|---------------------|---------------------|\n| `getCoreRowModel()` | (automatic) | Not needed — always included |\n| `getFilteredRowModel()` | `filteredRowModel` | `createFilteredRowModel(filterFns)` |\n| `getSortedRowModel()` | `sortedRowModel` | `createSortedRowModel(sortFns)` |\n| `getPaginationRowModel()` | `paginatedRowModel` | `createPaginatedRowModel()` |\n| `getExpandedRowModel()` | `expandedRowModel` | `createExpandedRowModel()` |\n| `getGroupedRowModel()` | `groupedRowModel` | `createGroupedRowModel(aggregationFns)` |\n| `getFacetedRowModel()` | `facetedRowModel` | `createFacetedRowModel()` |\n| `getFacetedMinMaxValues()` | `facetedMinMaxValues` | `createFacetedMinMaxValues()` |\n| `getFacetedUniqueValues()` | `facetedUniqueValues` | `createFacetedUniqueValues()` |\n\n### Key Change: Row Model Functions Now Accept Parameters\n\nSeveral row model factories now accept their processing functions as parameters. This enables better tree-shaking and explicit configuration:\n\n```ts\nimport {\n injectTable,\n createFilteredRowModel,\n createSortedRowModel,\n createGroupedRowModel,\n createPaginatedRowModel,\n filterFns, // Built-in filter functions\n sortFns, // Built-in sort functions\n aggregationFns, // Built-in aggregation functions\n} from '@tanstack/angular-table'\n\nclass TableCmp {\n readonly table = injectTable(() => ({\n _features,\n _rowModels: {\n filteredRowModel: createFilteredRowModel(filterFns),\n sortedRowModel: createSortedRowModel(sortFns),\n groupedRowModel: createGroupedRowModel(aggregationFns),\n paginatedRowModel: createPaginatedRowModel(),\n },\n columns: this.columns,\n data: this.data(),\n }))\n}\n```\n\n### Full Migration Example\n\n```ts\n// v8\nimport {\n injectTable,\n getCoreRowModel,\n getFilteredRowModel,\n getSortedRowModel,\n getPaginationRowModel,\n filterFns,\n sortingFns,\n} from '@tanstack/angular-table'\n\nconst v8Table = createAngularTable(() => ({\n columns,\n data: data(),\n getCoreRowModel: getCoreRowModel(), // used to be called \"get*RowModel()\"\n getFilteredRowModel: getFilteredRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n filterFns, // used to be passed in as a root option\n sortingFns,\n}))\n\n// v9\nimport {\n injectTable,\n tableFeatures,\n columnFilteringFeature,\n rowSortingFeature,\n rowPaginationFeature,\n createFilteredRowModel,\n createSortedRowModel,\n createPaginatedRowModel,\n filterFns,\n sortFns,\n} from '@tanstack/angular-table'\n\nconst _features = tableFeatures({\n columnFilteringFeature,\n rowSortingFeature,\n rowPaginationFeature,\n})\n\nconst v9Table = injectTable(() => ({\n _features,\n _rowModels: {\n filteredRowModel: createFilteredRowModel(filterFns),\n sortedRowModel: createSortedRowModel(sortFns),\n paginatedRowModel: createPaginatedRowModel(),\n },\n columns,\n data: data(),\n}))\n```\n\n---\n\n## State Management Changes\n\n### Accessing State\n\nIn v8, you accessed state via `table.getState()`. In v9, state is accessed via the store:\n\n```ts\n// v8\nconst state = table.getState()\nconst v8 = table.getState()\nconst { sorting, pagination } = v8\n\n// v9 - via the store\nconst fullState = table.store.state\nconst v9 = table.store.state\nconst { sorting: v9Sorting, pagination: v9Pagination } = v9\n```\n\n### Optimizing Reads with Angular Signals\n\nIn Angular, you have a few good options for consuming table state.\n\n#### Option 1: Prefer `table.store.subscribe(...)` for a sliced signal\n\nTanStack Store lets you subscribe to (and derive) a slice of state. With the Angular adapter, you can use that to create a signal-like value that only updates when the selected slice changes.\n\nThis is the closest equivalent to the fine-grained subscription examples you might see in other frameworks.\n\n```ts\nimport { computed, effect } from '@angular/core'\n\nclass TableCmp {\n readonly table = injectTable(() => ({\n _features,\n _rowModels: { /* ... */ },\n columns: this.columns,\n data: this.data(),\n }))\n\n // Create a computed to a slice of state.\n // The store will only emit when this selected value changes.\n private readonly pagination = this.table.computed(\n state => state.pagination,\n )\n\n constructor() {\n effect(() => {\n const { pageIndex, pageSize } = this.pagination()\n console.log('Page', pageIndex, 'Size', pageSize)\n })\n }\n}\n```\n\n#### Option 2: Use `computed(...)` and read from `table.store.state`\n\nYou can also use Angular `computed(...)` and directly read from `table.store.state`. This is simple and works well, but for object/array slices you should provide an equality function to avoid unnecessary downstream work when the slice is recreated with the same values.\n\n```ts\nimport { computed, effect } from '@angular/core'\n\nclass TableCmp {\n readonly table = injectTable(() => ({\n _features,\n _rowModels: { /* ... */ },\n columns: this.columns,\n data: this.data(),\n }))\n\n // Provide an equality function for object slices\n readonly pagination = computed(\n () => this.table.store.state.pagination,\n {\n equal: (a, b) => a.pageIndex === b.pageIndex && a.pageSize === b.pageSize,\n },\n )\n\n constructor() {\n effect(() => {\n // This effect only re-runs when pagination changes\n const { pageIndex, pageSize } = this.pagination()\n console.log('Page', pageIndex, 'Size', pageSize)\n })\n }\n}\n```\n\n### Controlled State\n\nControlled state patterns are pretty the same as v8:\n\n```ts\nimport { signal } from '@angular/core'\nimport type { SortingState, PaginationState } from '@tanstack/angular-table'\n\nclass TableCmp {\n readonly sorting = signal([])\n readonly pagination = signal({ pageIndex: 0, pageSize: 10 })\n\n readonly table = injectTable(() => ({\n _features,\n _rowModels: { /* ... */ },\n columns: this.columns,\n data: this.data(),\n state: {\n sorting: this.sorting(),\n pagination: this.pagination(),\n },\n onSortingChange: (updater) => {\n updater instanceof Function\n ? this.sorting.update(updater)\n : this.sorting.set(updater)\n },\n onPaginationChange: (updater) => {\n updater instanceof Function\n ? this.pagination.update(updater)\n : this.pagination.set(updater)\n },\n }))\n}\n```\n\n---\n\n## Column Helper Changes\n\nThe `createColumnHelper` function now requires a `TFeatures` type parameter in addition to `TData`:\n\n```ts\n// v8\nimport { createColumnHelper } from '@tanstack/angular-table'\n\nconst columnHelperV8 = createColumnHelper()\n\n// v9\nimport { createColumnHelper, tableFeatures, rowSortingFeature } from '@tanstack/angular-table'\n\nconst _features = tableFeatures({ rowSortingFeature })\nconst columnHelperV9 = createColumnHelper()\n```\n\n### New `columns()` Helper Method\n\nv9 adds a `columns()` helper for better type inference when wrapping column arrays.\n\n```ts\nconst columnHelper = createColumnHelper()\n\n// Wrap your columns array for better type inference\nconst columns = columnHelper.columns([\n columnHelper.accessor('firstName', {\n header: 'First Name',\n cell: (info) => info.getValue(),\n }),\n columnHelper.accessor('lastName', {\n id: 'lastName',\n header: () => 'Last Name',\n cell: (info) => info.getValue(),\n }),\n columnHelper.display({\n id: 'actions',\n header: 'Actions',\n cell: () => 'Edit',\n }),\n])\n```\n\n### Using with `createTableHook`\n\nWhen using `createTableHook`, you get a pre-bound `createAppColumnHelper` that only requires `TData`:\n\n```ts\nimport { createTableHook, tableFeatures, rowSortingFeature } from '@tanstack/angular-table'\n\nconst { injectAppTable, createAppColumnHelper } = createTableHook({\n _features: tableFeatures({ rowSortingFeature }),\n _rowModels: { /* ... */ },\n})\n\n// TFeatures is already bound — only need TData!\nconst columnHelper = createAppColumnHelper()\n```\n\n---\n\n## Rendering Changes\n\n### `FlexRender`\n\nThe rendering primitives in the Angular adapter are `FlexRender` and the `*flexRender` directives.\n\nIn v9, you can continue to render header/cell/footer content using the Angular adapter rendering utilities, but there are a few important improvements and helper APIs to be aware of.\n\n#### Structural directive rendering\n\nAngular rendering is directive-based:\n\n- `FlexRender` / `*flexRender` renders arbitrary render content (primitives, `TemplateRef`, component types, or `flexRenderComponent(...)` wrappers)\n- The directive is responsible for mounting embedded views or components via `ViewContainerRef`\n\n#### Shorthand directives\n\nIf you're rendering standard table content, prefer the shorthand helpers:\n\n- `*flexRenderCell=\"cell; let value\"`\n- `*flexRenderHeader=\"header; let value\"`\n- `*flexRenderFooter=\"footer; let value\"`\n\nThese automatically select the correct column definition (`columnDef.cell` / `header` / `footer`) and the right props (`cell.getContext()` / `header.getContext()`), so you don't need to manually provide `props:`.\n\n#### DI-aware render functions + context injection\n\nColumn definition render functions (`header`, `cell`, `footer`) run inside an Angular injection context, so they can safely call `inject()` and use signals.\n\nWhen a component is rendered through the FlexRender directives, you can also access the full render props object via DI using `injectFlexRenderContext()`.\n\n#### Component rendering helper: `flexRenderComponent`\n\nIf you need to render an Angular component with explicit configuration (custom `inputs`, `outputs`, `injector`, and Angular v20+ creation-time `bindings`/`directives`), return a `flexRenderComponent(Component, options)` wrapper from your column definition.\n\nFor complete rendering details (including component rendering, `TemplateRef`, `flexRenderComponent`, and context helpers), see the [Rendering components Guide](./rendering.md).\n\n---\n\n## The `tableOptions()` Utility\n\nThe `tableOptions()` helper provides type-safe composition of table options. It's useful for creating reusable partial configurations that can be spread into your table setup.\n\n### Basic Usage\n\n```ts\nimport { injectTable, tableOptions, tableFeatures, rowSortingFeature } from '@tanstack/angular-table'\nimport { isDevMode } from '@angular/core';\n\n// Create a reusable options object with features pre-configured\nconst baseOptions = tableOptions({\n _features: tableFeatures({ rowSortingFeature }),\n debugTable: isDevMode()\n})\n\nclass TableCmp {\n readonly table = injectTable(() => ({\n ...baseOptions,\n columns: this.columns,\n data: this.data(),\n _rowModels: {},\n }))\n}\n```\n\n### Composing Partial Options\n\n`tableOptions()` allows you to omit certain required fields (like `data`, `columns`, or `_features`) when creating partial configurations:\n\n```ts\nimport {\n tableOptions,\n tableFeatures,\n rowSortingFeature,\n columnFilteringFeature,\n createSortedRowModel,\n createFilteredRowModel,\n filterFns,\n sortFns,\n} from '@tanstack/angular-table'\n\n// Partial options without data or columns\nconst featureOptions = tableOptions({\n _features: tableFeatures({\n rowSortingFeature,\n columnFilteringFeature,\n }),\n _rowModels: {\n sortedRowModel: createSortedRowModel(sortFns),\n filteredRowModel: createFilteredRowModel(filterFns),\n },\n})\n```\n\n```ts\nimport { injectTable, tableOptions, createPaginatedRowModel } from '@tanstack/angular-table'\n\n// Another partial without _features (inherits from spread)\nconst paginationDefaults = tableOptions({\n _rowModels: {\n paginatedRowModel: createPaginatedRowModel(),\n },\n initialState: {\n pagination: { pageIndex: 0, pageSize: 25 },\n },\n})\n\nclass TableCmp {\n readonly table = injectTable(() => ({\n ...featureOptions,\n ...paginationDefaults,\n columns: this.columns,\n data: this.data(),\n }))\n}\n```\n\n### Using with `createTableHook`\n\n`tableOptions()` pairs well with `createTableHook` for building composable table factories:\n\n```ts\nimport {\n createTableHook,\n tableOptions,\n tableFeatures,\n rowSortingFeature,\n rowPaginationFeature,\n createSortedRowModel,\n createPaginatedRowModel,\n sortFns,\n} from '@tanstack/angular-table'\n\nconst sharedOptions = tableOptions({\n _features: tableFeatures({ rowSortingFeature, rowPaginationFeature }),\n _rowModels: {\n sortedRowModel: createSortedRowModel(sortFns),\n paginatedRowModel: createPaginatedRowModel(),\n },\n})\n\nconst { injectAppTable } = createTableHook(sharedOptions)\n```\n\n---\n\n## `createTableHook`: Composable Table Patterns\n\n**This is an advanced, optional feature.** You don't need to use `createTableHook`—`injectTable` is sufficient for most use cases.\n\nFor applications with multiple tables sharing the same configuration, `createTableHook` lets you define features, row models, and reusable components once.\n\nFor full setup and patterns, see the [Table composition Guide](./table-composition.md).\n\n---\n\n## Other Breaking Changes\n\n### Column Pinning Option Split\n\nThe `enablePinning` option has been split into separate options:\n\n```ts\n// v8\nenablePinning: true\n\n// v9\nenableColumnPinning: true\nenableRowPinning: true\n```\n\n### Removed Internal APIs\n\nAll internal APIs prefixed with `_` have been removed. If you were using any of these, use their public equivalents.\n\n### Column Sizing vs. Column Resizing Split\n\nIn v8, column sizing and resizing were combined in a single feature. In v9, they've been split into separate features for better tree-shaking.\n\n| v8 | v9 |\n|----|-----|\n| `ColumnSizing` (combined feature) | `columnSizingFeature` + `columnResizingFeature` |\n| `columnSizingInfo` state | `columnResizing` state |\n| `setColumnSizingInfo()` | `setColumnResizing()` |\n| `onColumnSizingInfoChange` option | `onColumnResizingChange` option |\n\nIf you only need column sizing (fixed widths) without interactive resizing, you can import just `columnSizingFeature`. If you need drag-to-resize functionality, import both.\n\n### Sorting API Renames\n\nSorting-related APIs have been renamed for consistency:\n\n| v8 | v9 |\n|----|-----|\n| `sortingFn` (column def option) | `sortFn` |\n| `column.getSortingFn()` | `column.getSortFn()` |\n| `column.getAutoSortingFn()` | `column.getAutoSortFn()` |\n| `SortingFn` type | `SortFn` type |\n| `SortingFns` interface | `SortFns` interface |\n| `sortingFns` (built-in functions) | `sortFns` |\n\nUpdate your column definitions.\n\n### Row API Changes\n\nSome row APIs have changed from private to public:\n\n| v8 | v9 |\n|----|-----|\n| `row._getAllCellsByColumnId()` (private) | `row.getAllCellsByColumnId()` (public) |\n\n---\n\n## TypeScript Changes Summary\n\n### Type Generics\n\nMost types now require a `TFeatures` parameter:\n\n```txt\n// v8\ntype Column\ntype ColumnDef\ntype Table\ntype Row\ntype Cell\n\n// v9\ntype Column\ntype ColumnDef\ntype Table\ntype Row\ntype Cell\n```\n\n### Using `typeof _features`\n\nThe easiest way to get the `TFeatures` type is with `typeof`:\n\n```ts\nconst _features = tableFeatures({\n rowSortingFeature,\n columnFilteringFeature,\n})\n\ntype MyFeatures = typeof _features\n\nconst columns: ColumnDef[] = [...]\n```\n\n### Using `StockFeatures`\n\nIf using `stockFeatures`, use the `StockFeatures` type:\n\n```ts\nimport type { StockFeatures, ColumnDef } from '@tanstack/angular-table'\n\nconst columns: ColumnDef[] = [...]\n```\n\n### `ColumnMeta` Generic Change\n\nIf you're using module augmentation to extend `ColumnMeta`, note that it now requires a `TFeatures` parameter.\n\n### `RowData` Type Restriction\n\nThe `RowData` type is now more restrictive.\n\n---\n\n## Migration Checklist\n\n- [ ] Update your table setup to v9 and define `_features` using `tableFeatures()` (or use `stockFeatures`)\n- [ ] Migrate `get*RowModel()` options to `_rowModels`\n- [ ] Update row model factories to include `Fns` parameters where needed\n- [ ] Update TypeScript types to include `TFeatures` generic\n- [ ] Update state access: `table.getState()` → `table.store.state`\n- [ ] Update `createColumnHelper()` → `createColumnHelper()`\n- [ ] Replace `enablePinning` with `enableColumnPinning`/`enableRowPinning` if used\n- [ ] Rename `sortingFn` → `sortFn` in column definitions\n- [ ] Split column sizing/resizing: use both `columnSizingFeature` and `columnResizingFeature` if needed\n- [ ] Rename `columnSizingInfo` state → `columnResizing` (and related options)\n- [ ] Update `ColumnMeta` module augmentation to include `TFeatures` generic (if used)\n- [ ] (Optional) Use `tableOptions()` for composable configurations\n- [ ] (Optional) Use `createTableHook` for reusable table patterns\n\n---\n\n## Examples\n\nCheck out these examples to see v9 patterns in action:\n- [Basic](../examples/basic)\n- [Basic (App Table)](../examples/basic-app-table)\n- [Filters](../examples/filters)\n- [Column Ordering](../examples/column-ordering)\n- [Column Pinning](../examples/column-pinning)\n- [Column Visibility](../examples/column-visibility)\n- [Expanding](../examples/expanding)\n- [Grouping](../examples/grouping)\n- [Row Selection](../examples/row-selection)\n- [Composable Tables](../examples/composable-tables)\n\n\n\n"
},
{
"path": "docs/framework/angular/guide/rendering.md",
"content": "---\ntitle: Rendering components\n---\n\nThe `@tanstack/angular-table` adapter provides structural directives and dependency injection primitives for rendering table content in Angular templates.\n\n## FlexRender\n\n[`FlexRender`](../reference/variables/FlexRender) is the rendering primitive.\nIt is exported as a tuple of two directives:\n\n- [`FlexRenderDirective`](../reference/classes/FlexRenderDirective) — the base structural directive (`*flexRender`)\n- [`FlexRenderCell`](../reference/classes/FlexRenderCell.md) — shorthand directives (`*flexRenderCell`, `*flexRenderHeader`, `*flexRenderFooter`)\n\nImport `FlexRender` to get both:\n\n```ts\nimport { Component } from '@angular/core'\nimport { FlexRender } from '@tanstack/angular-table'\n\n@Component({\n imports: [FlexRender],\n templateUrl: './app.html',\n})\nexport class AppComponent {}\n```\n\n### How it works\n\n`FlexRender` is an Angular **structural directive**. Internally, it resolves the column definition's `header`, `cell`, or `footer` function and renders the result using [`ViewContainerRef`](https://angular.dev/api/core/ViewContainerRef):\n\n- **Primitives** (`string`, `number`): rendered via `createEmbeddedView` into the host `ng-template`. The value is exposed as the template's implicit context (`let value`).\n- **`TemplateRef`**: rendered via `createEmbeddedView`. The render context (`CellContext`, `HeaderContext`) is passed as `$implicit`.\n- **`flexRenderComponent(...)`**: rendered via `createComponent` with explicit `inputs`, `outputs`, `bindings`, `directives`, and `injector`.\n- **Component type** (`Type`): rendered via [`createComponent`](https://angular.dev/api/core/ViewContainerRef#createComponent). All properties from the render context are set as component inputs through [`ComponentRef.setInput`](https://angular.dev/api/core/ComponentRef#setInput).\n\nColumn definition functions (`header`, `cell`, `footer`) are called inside [`runInInjectionContext`](https://angular.dev/api/core/runInInjectionContext), which means you can call `inject()`, use signals, and access DI tokens directly in your render logic.\n\n## Cell rendering\n\nPrefer the shorthand directives for standard rendering:\n\n| Directive | Input | Column definition |\n|---|---|---|\n| `*flexRenderCell` | `Cell` | `columnDef.cell` |\n| `*flexRenderHeader` | `Header` | `columnDef.header` |\n| `*flexRenderFooter` | `Header` | `columnDef.footer` |\n\nEach shorthand resolves the correct column definition function and render context automatically through a `computed` signal, so no manual `props` mapping is needed.\n\n### Example\n\n```html\n\n @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n
\n @for (header of headerGroup.headers; track header.id) {\n
\n @if (!header.isPlaceholder) {\n \n {{ value }}\n \n }\n
\n }\n
\n }\n\n\n\n @for (row of table.getRowModel().rows; track row.id) {\n
\n @for (cell of row.getVisibleCells(); track cell.id) {\n
\n \n {{ value }}\n \n
\n }\n
\n }\n\n```\n\n## Cell rendering with custom props\n\nWhen you need full control over the `props` passed to the render function, use `*flexRender` directly.\n\n`FlexRenderDirective` accepts two inputs:\n\n- `flexRender` — the render definition (a column def function, a string, a `TemplateRef`, a component type, or a `flexRenderComponent(...)` wrapper)\n- `flexRenderProps` — the props object passed to the render function and used as the implicit template context\n\nStandard usage:\n\n```html\n\n {{ rendered }}\n\n```\n\nYou can pass a custom props object to override the default context shape:\n\n```html\n\n {{ rendered }}\n\n```\n\nInside rendered components, the full props object is available via [`injectFlexRenderContext()`](#injectflexrendercontext).\n\n## Component rendering\n\nYou can render Angular components from column definitions in two ways:\n\n### Using `flexRenderComponent`\n\n[`flexRenderComponent(component, options?)`](../reference/functions/flexRenderComponent) wraps a component type with explicit options for `inputs`, `outputs`, `injector`, `bindings`, and `directives`.\n\nUse this when you need to:\n\n- pass custom inputs not derived from the render context\n- subscribe to component outputs\n- provide a custom `Injector`\n- use creation-time `bindings` (Angular v20+)\n- apply host directives and binding values at runtime\n\n```ts\nimport { flexRenderComponent, type ColumnDef } from '@tanstack/angular-table'\n\nconst columns: ColumnDef[] = [\n {\n id: 'custom-cell',\n cell: ctx =>\n flexRenderComponent(CustomCellComponent, {\n inputs: {\n content: ctx.row.original.firstName,\n },\n outputs: {\n clicked: value => {\n console.log(value)\n },\n },\n }),\n },\n]\n```\n\n#### How inputs and outputs work\n\n**Inputs** are applied through [`ComponentRef.setInput(key, value)`](https://angular.dev/api/core/ComponentRef#setInput). This works with both `input()` signals and `@Input()` decorators. Inputs are diffed on every change detection cycle using `KeyValueDiffers` — only changed values trigger `setInput`.\n\nFor object-like inputs, updates are reference-based: if the object reference is stable, Angular's default input equality semantics prevent unnecessary updates.\n\n**Outputs** work through `OutputEmitterRef` subscriptions. The factory reads the component instance property by name, checks that it is an `OutputEmitterRef`, and subscribes to it. When the output emits, the corresponding callback from `outputs` is invoked. Subscriptions are cleaned up automatically when the component is destroyed.\n\n#### `bindings` API (Angular v20+)\n\n`flexRenderComponent` also accepts `bindings` and `directives`, forwarded directly to [`ViewContainerRef.createComponent`](https://angular.dev/api/core/ViewContainerRef#createComponent) at creation time.\n\nThis supports Angular programmatic rendering APIs for passing host directives and binding values at runtime.\n\nUnlike `inputs`/`outputs` (which are applied imperatively after creation), `bindings` are applied **at creation time** — they participate in the component's initial change detection cycle.\n\n```ts\nimport {\n inputBinding,\n outputBinding,\n twoWayBinding,\n signal,\n} from '@angular/core'\nimport { flexRenderComponent } from '@tanstack/angular-table'\n\nreadonly name = signal('Ada')\n\ncell: () =>\n flexRenderComponent(EditableNameCellComponent, {\n bindings: [\n inputBinding('value', this.name),\n outputBinding('valueChange', value => {\n console.log('changed', value)\n }),\n twoWayBinding('value', this.name),\n ],\n })\n```\n\n> Avoid mixing `bindings` with `inputs`/`outputs` on the same property. `bindings` are applied at creation, while `inputs`/`outputs` are applied post-creation — mixing them can lead to double initialization or conflicting values.\n\nSee the Angular docs for details:\n\n- [Programmatic rendering — Binding inputs/outputs/directives](https://angular.dev/guide/components/programmatic-rendering#binding-inputs-outputs-and-setting-host-directives-at-creation)\n- [`inputBinding`](https://angular.dev/api/core/inputBinding), [`outputBinding`](https://angular.dev/api/core/outputBinding), [`twoWayBinding`](https://angular.dev/api/core/twoWayBinding)\n\n### Returning a component class\n\nReturn a component class from `header`, `cell`, or `footer`. \n\nThe render context properties (`table`, `column`, `header`, `cell`, `row`, `getValue`, etc.) are automatically set as component inputs via `ComponentRef.setInput(...)`.\n\nDefine input signals matching the context property names you need:\n\n```ts\nimport { Component, input } from '@angular/core'\nimport type { ColumnDef, Table, CellContext } from '@tanstack/angular-table'\n\nconst columns: ColumnDef[] = [\n {\n id: 'select',\n header: () => TableHeadSelectionComponent,\n cell: () => TableRowSelectionComponent,\n },\n]\n\n@Component({\n template: `\n \n `,\n})\nexport class TableHeadSelectionComponent {\n readonly table = input.required>();\n // column = input.required>()\n // header = input.required>()\n}\n```\n\nOnly properties declared with `input()` / `input.required()` are set — other context properties are silently ignored. You can also access the full context via [`injectFlexRenderContext()`](#injectflexrendercontext).\n\n## TemplateRef rendering\n\nYou can return a `TemplateRef` from column definitions. The render context is passed as the template's `$implicit` context.\n\nUse `viewChild(...)` to capture template references:\n\n```ts\nimport { Component, TemplateRef, viewChild } from '@angular/core'\nimport type {\n CellContext,\n ColumnDef,\n HeaderContext,\n} from '@tanstack/angular-table'\n\n@Component({\n template: `\n \n {{ context.column.id }}\n \n\n \n {{ context.getValue() }}\n \n `,\n})\nexport class AppComponent {\n readonly customHeader =\n viewChild.required }>>(\n 'customHeader',\n )\n readonly customCell =\n viewChild.required }>>(\n 'customCell',\n )\n\n readonly columns: ColumnDef[] = [\n {\n id: 'templated',\n header: () => this.customHeader(),\n cell: () => this.customCell(),\n },\n ]\n}\n```\n\n`TemplateRef` rendering uses `createEmbeddedView` with an injector that includes the [DI context tokens](#dependency-injection). For reusable render blocks shared across multiple screens, prefer standalone components over `TemplateRef`.\n\n## Dependency injection\n\n`FlexRender` automatically provides DI tokens when rendering components and templates. These tokens are created in the `#getInjector` method of the renderer, which builds a child `Injector` with the render context properties.\n\n### `injectFlexRenderContext`\n\n[`injectFlexRenderContext()`](../reference/functions/injectFlexRenderContext) returns the full props object passed to `*flexRender`. The return type depends on the column definition slot:\n\n- In a `cell` definition: `CellContext`\n- In a `header`/`footer` definition: `HeaderContext`\n\n```ts\nimport { Component } from '@angular/core'\nimport {\n injectFlexRenderContext,\n type CellContext,\n} from '@tanstack/angular-table'\n\n@Component({\n template: `\n {{ context.getValue() }}\n \n `,\n})\nexport class InteractiveCellComponent {\n readonly context = injectFlexRenderContext>()\n}\n```\n\nInternally, the renderer wraps the context in a `Proxy` so that property access always reflects the latest values, even after re-renders.\n\n### Context directives\n\nThree optional directives let you expose table, header, and cell context to **any descendant** in the template — not just components rendered by `*flexRender`.\n\nThis eliminates prop drilling: instead of passing data through multiple `input()` layers, any nested component or directive can inject the context directly.\n\n| Directive | Selector | Token | Inject helper |\n|---|---|---|---|\n| [`TanStackTable`](../reference/functions/injectTableContext) | `[tanStackTable]` | `TanStackTableToken` | `injectTableContext()` |\n| [`TanStackTableHeader`](../reference/functions/injectTableHeaderContext) | `[tanStackTableHeader]` | `TanStackTableHeaderToken` | `injectTableHeaderContext()` |\n| [`TanStackTableCell`](../reference/functions/injectTableCellContext) | `[tanStackTableCell]` | `TanStackTableCellToken` | `injectTableCellContext()` |\n\nImport them alongside `FlexRender`:\n\n```ts\nimport {\n FlexRender,\n TanStackTable,\n TanStackTableHeader,\n TanStackTableCell,\n} from '@tanstack/angular-table'\n\n@Component({\n imports: [FlexRender, TanStackTable, TanStackTableHeader, TanStackTableCell],\n templateUrl: './app.html',\n})\nexport class AppComponent {}\n```\n\nApply them in the template to establish injection scopes:\n\n```html\n
\n \n\n @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n
\n @for (header of headerGroup.headers; track header.id) {\n
\n \n
\n }\n
\n }\n\n @for (row of table.getRowModel().rows; track row.id) {\n
\n @for (cell of row.getVisibleCells(); track cell.id) {\n
\n \n
\n }\n
\n }\n
\n```\n\nAny component nested inside a `[tanStackTableCell]` host can inject the cell context:\n\n```ts\nimport { Component } from '@angular/core'\nimport { injectTableCellContext } from '@tanstack/angular-table'\n\n@Component({\n template: `\n \n `,\n})\nexport class CellActionsComponent {\n readonly cell = injectTableCellContext()\n\n onAction() {\n console.log('Cell:', this.cell())\n }\n}\n```\n\n```html\n\n
\n \n
\n```\n\nEach directive uses Angular's `providers` array to register a factory that reads its own input signal.\n\nThis means the token is scoped to the directive's host element and its descendants. Multiple `[tanStackTableCell]` directives on different elements provide independent contexts.\n\n### Automatic token injection in FlexRender\n\nWhen `FlexRender` renders a component or template, it also provides DI tokens automatically based on the render context shape. In the renderer's `#getInjector` method, if the context object contains `table`, `cell`, or `header` properties, the corresponding `TanStackTableToken`, `TanStackTableCellToken`, or `TanStackTableHeaderToken` tokens are provided in the child injector.\n\nThis means that even **without** the context directives, components rendered via `*flexRender` can use `injectTableContext()`, `injectTableCellContext()`, and `injectTableHeaderContext()`. The context directives are only needed for components that live **outside** the `*flexRender` rendering tree (e.g. sibling components in the same `
`).\n"
},
{
"path": "docs/framework/angular/guide/table-composition.md",
"content": "---\ntitle: Table Composition (createTableHook)\n---\n\n`createTableHook` is a convenience API for creating reusable, type-safe table configurations with pre-bound components. It is inspired by [TanStack Form's `createFormHook`](https://tanstack.com/form/latest/docs/framework/react/guides/form-composition) — a pattern where you define shared infrastructure once and consume it across your application with minimal boilerplate.\n\n> **When to use it:** Use `createTableHook` when you have multiple tables that share the same configuration (features, row models, and reusable components). For a single table, `injectTable` is sufficient.\n\n## Examples\n\n- [Composable Tables](../examples/composable-tables) — Two tables (Users and Products) sharing the same `createTableHook` configuration, with table/cell/header components, sorting, filtering, and pagination.\n- [Basic App Table](../examples/basic-app-table) — Minimal example using `createTableHook` with no pre-bound components.\n\n### createTableHook\n\n`createTableHook` centralizes your table configuration into a single factory call. It returns a set of typed functions — `injectAppTable`, `createAppColumnHelper`, and pre-typed injection helpers — that you use instead of the base APIs.\n\n## Setup\n\nCall `createTableHook` with your shared configuration and destructure the returned utilities:\n\n```ts\n// table.ts — shared table infrastructure\n\nimport {\n createTableHook,\n tableFeatures,\n columnFilteringFeature,\n createFilteredRowModel,\n createPaginatedRowModel,\n createSortedRowModel,\n filterFns,\n rowPaginationFeature,\n rowSortingFeature,\n sortFns,\n} from '@tanstack/angular-table'\n\nimport { PaginationControls, RowCount, TableToolbar } from './components/table-components'\nimport { TextCell, NumberCell, StatusCell, ProgressCell } from './components/cell-components'\nimport { SortIndicator, ColumnFilter } from './components/header-components'\n\nexport const {\n createAppColumnHelper,\n injectAppTable,\n injectTableContext,\n injectTableCellContext,\n injectTableHeaderContext,\n} = createTableHook({\n // Features and row models are shared across all tables\n _features: tableFeatures({\n columnFilteringFeature,\n rowPaginationFeature,\n rowSortingFeature,\n }),\n _rowModels: {\n sortedRowModel: createSortedRowModel(sortFns),\n filteredRowModel: createFilteredRowModel(filterFns),\n paginatedRowModel: createPaginatedRowModel(),\n },\n // Default table options applied to every table\n getRowId: (row) => row.id,\n\n // Pre-bound component registries\n tableComponents: {\n PaginationControls,\n RowCount,\n TableToolbar,\n },\n cellComponents: {\n TextCell,\n NumberCell,\n StatusCell,\n ProgressCell,\n },\n headerComponents: {\n SortIndicator,\n ColumnFilter,\n },\n})\n```\n\nThis single file becomes the source of truth for your application's table infrastructure.\n\n## What `createTableHook` returns\n\n| Export | Description |\n|---|---|\n| `injectAppTable` | A wrapper around `injectTable` that merges default options and attaches component registries. Returns an `AppAngularTable` with table/cell/header components available directly on the instance. |\n| `createAppColumnHelper` | A typed column helper where `cell`, `header`, and `footer` definitions receive enhanced context types with the registered components. |\n| `injectTableContext` | Pre-typed `injectTableContext()` bound to your feature set. |\n| `injectTableCellContext` | Pre-typed `injectTableCellContext()` bound to your feature set. |\n| `injectTableHeaderContext` | Pre-typed `injectTableHeaderContext()` bound to your feature set. |\n| `injectFlexRenderCellContext` | Pre-typed `injectFlexRenderContext()` for cell context. |\n| `injectFlexRenderHeaderContext` | Pre-typed `injectFlexRenderContext()` for header context. |\n\n## Component registries\n\n`createTableHook` accepts three component registries that map string keys to Angular components or render functions:\n\n### `tableComponents`\n\nComponents that need access to the **table instance**. These are attached directly to the `AppAngularTable` object returned by `injectAppTable`, so you can reference them in templates as `table.PaginationControls`, `table.RowCount`, etc.\n\nUse `injectTableContext()` inside these components to access the table:\n\n```ts\n@Component({\n selector: 'app-pagination-controls',\n template: `\n
\n \n \n
\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PaginationControls {\n readonly table = injectTableContext()\n}\n```\n\nRender table components via Angular `NgComponentOutlet`:\n\n```html\n\n\n\n```\n\n### `cellComponents`\n\nComponents that render **cell content**. These are attached to the `Cell` prototype, so they are available in column definitions through the enhanced `AppCellContext`:\n\n```ts\nconst columnHelper = createAppColumnHelper()\n\nconst columns = columnHelper.columns([\n columnHelper.accessor('firstName', {\n header: 'First Name',\n cell: ({ cell }) => cell.TextCell,\n }),\n columnHelper.accessor('age', {\n header: 'Age',\n cell: ({ cell }) => cell.NumberCell,\n }),\n columnHelper.accessor('status', {\n header: 'Status',\n cell: ({ cell }) => cell.StatusCell,\n }),\n])\n```\n\nUse `injectTableCellContext()` or `injectFlexRenderContext()` inside cell components:\n\n```ts\n@Component({\n selector: 'span',\n template: `{{ cell().getValue() }}`,\n})\nexport class TextCell {\n readonly cell = injectTableCellContext()\n}\n```\n\n### `headerComponents`\n\nComponents or render functions that render **header/footer content**. These are attached to the `Header` prototype and available through the enhanced `AppHeaderContext`:\n\n```ts\n// Render functions work too — they run in injection context\nexport function SortIndicator(): string | null {\n const header = injectTableHeaderContext()\n const sorted = header().column.getIsSorted()\n if (!sorted) return null\n return sorted === 'asc' ? '🔼' : '🔽'\n}\n```\n\nAccess header components in the template via `table.appHeader(header)`:\n\n```html\n@for (_header of headerGroup.headers; track _header.id) {\n @let header = table.appHeader(_header);\n
\n {{ value }}\n \n \n \n
\n}\n```\n\n## Using `injectAppTable`\n\n`injectAppTable` is a wrapper around `injectTable`. It merges the default options from `createTableHook` with the per-table options, and returns an `AppAngularTable` — the standard table instance augmented with:\n\n- **Table components** directly on the table object (`table.PaginationControls`, `table.TableToolbar`, etc.)\n- **`table.appCell(cell)`** — utility type functions for templates that wraps a `Cell` with the registered `cellComponents`\n- **`table.appHeader(header)`** — utility type functions for templates that wraps a `Header` with the registered `headerComponents`\n- **`table.appFooter(footer)`** — utility type functions for templates that wraps a `Header` (footer) with the registered `headerComponents`\n\nYou do not need to pass `_features` or `_rowModels` — they are inherited from the hook configuration:\n\n```ts\n@Component({\n selector: 'users-table',\n templateUrl: './users-table.html',\n imports: [FlexRender, TanStackTable, TanStackTableHeader, TanStackTableCell, NgComponentOutlet],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class UsersTable {\n readonly data = signal(makeData(100))\n\n readonly columns = columnHelper.columns([\n columnHelper.accessor('firstName', {\n header: 'First Name',\n cell: ({ cell }) => cell.TextCell,\n }),\n // ...\n ])\n\n // No need to specify _features, _rowModels, ... — they come from createTableHook\n table = injectAppTable(() => ({\n columns: this.columns,\n data: this.data(),\n }))\n}\n```\n\n## Using `createAppColumnHelper`\n\n`createAppColumnHelper()` returns a column helper identical to `createColumnHelper` at runtime, but with enhanced types: the `cell`, `header`, and `footer` definition callbacks receive `AppCellContext` / `AppHeaderContext` instead of the base context types.\n\nThis means TypeScript knows about your registered components and provides autocompletion:\n\n```ts\nconst columnHelper = createAppColumnHelper()\n\ncolumnHelper.accessor('firstName', {\n cell: ({ cell }) => {\n // ✅ TypeScript knows about TextCell, NumberCell, StatusCell, etc.\n return cell.TextCell\n },\n header: ({ header }) => {\n // ✅ TypeScript knows about SortIndicator, ColumnFilter, etc.\n return flexRenderComponent(header.SortIndicator)\n },\n})\n```\n\nYou can also use `flexRenderComponent(...)` to wrap the component with custom inputs/outputs:\n\n```ts\ncolumnHelper.accessor('firstName', {\n cell: ({ cell }) => flexRenderComponent(cell.TextCell),\n footer: ({ header }) => flexRenderComponent(header.FooterColumnId),\n})\n```\n\n## Multiple table configurations\n\nYou can call `createTableHook` multiple times to create different table configurations for different parts of your application. Each call returns an independent set of utilities with its own feature set and component registries:\n\n```ts\n// admin-table.ts — tables with editing capabilities\nexport const {\n injectAppTable: injectAdminTable,\n createAppColumnHelper: createAdminColumnHelper,\n} = createTableHook({\n _features: tableFeatures({ rowSortingFeature, columnFilteringFeature }),\n _rowModels: { /* ... */ },\n cellComponents: { EditableCell, DeleteButton },\n})\n\n// readonly-table.ts — simpler read-only tables\nexport const {\n injectAppTable: injectReadonlyTable,\n createAppColumnHelper: createReadonlyColumnHelper,\n} = createTableHook({\n _features: tableFeatures({ rowSortingFeature }),\n _rowModels: { /* ... */ },\n cellComponents: { TextCell, NumberCell },\n})\n```\n\n## Examples\n\n- [Composable Tables](../examples/composable-tables) — Full example with two tables sharing the same `createTableHook` configuration.\n- [Basic App Table](../examples/basic-app-table) — Minimal example with no pre-bound components.\n"
},
{
"path": "docs/framework/angular/guide/table-state.md",
"content": "---\ntitle: Table State (Angular) Guide\n---\n\n## Table State (Angular) Guide\n\nTanStack Table has a simple underlying internal state management system to store and manage the state of the table. It also lets you selectively pull out any state that you need to manage in your own state management. This guide will walk you through the different ways in which you can interact with and manage the state of the table.\n\n### Accessing Table State\n\nYou do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.store.state` table instance API.\n\n```ts\ntable = injectTable(() => ({\n columns: this.columns,\n data: this.data(),\n //...\n}))\n\nsomeHandler() {\n console.log(this.table.store.state) //access the entire internal state\n console.log(this.table.store.state.rowSelection) //access just the row selection state\n}\n```\n\n### Custom Initial State\n\nIf all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance.\n\n```jsx\ntable = injectTable(() => ({\n columns: this.columns,\n data: this.data(),\n initialState: {\n columnOrder: ['age', 'firstName', 'lastName'], //customize the initial column order\n columnVisibility: {\n id: false //hide the id column by default\n },\n expanded: true, //expand all rows by default\n sorting: [\n {\n id: 'age',\n desc: true //sort by age in descending order by default\n }\n ]\n },\n //...\n}))\n```\n\n> **Note**: Only specify each particular state in either `initialState` or `state`, but not both. If you pass in a particular state value to both `initialState` and `state`, the initialized state in `state` will take overwrite any corresponding value in `initialState`.\n\n### Controlled State\n\nIf you need easy access to the table state in other areas of your application, TanStack Table makes it easy to control and manage any or all of the table state in your own state management system. You can do this by passing in your own state and state management functions to the `state` and `on[State]Change` table options.\n\n#### Individual Controlled State\n\nYou can control just the state that you need easy access to. You do NOT have to control all of the table state if you do not need to. It is recommended to only control the state that you need on a case-by-case basis.\n\nIn order to control a particular state, you need to both pass in the corresponding `state` value and the `on[State]Change` function to the table instance.\n\nLet's take filtering, sorting, and pagination as an example in a \"manual\" server-side data fetching scenario. You can store the filtering, sorting, and pagination state in your own state management, but leave out any other state like column order, column visibility, etc. if your API does not care about those values.\n\n```ts\nimport {signal} from '@angular/core';\nimport {SortingState, ColumnFiltersState, PaginationState} from '@tanstack/angular-table'\nimport {toObservable} from \"@angular/core/rxjs-interop\";\nimport {combineLatest, switchMap} from 'rxjs';\n\nclass TableComponent {\n readonly columnFilters = signal([]) //no default filters\n readonly sorting = signal([\n {\n id: 'age',\n desc: true, //sort by age in descending order by default\n }\n ])\n readonly pagination = signal({\n pageIndex: 0,\n pageSize: 15\n })\n\n //Use our controlled state values to fetch data\n readonly data$ = combineLatest({\n filters: toObservable(this.columnFilters),\n sorting: toObservable(this.sorting),\n pagination: toObservable(this.pagination)\n }).pipe(\n switchMap(({filters, sorting, pagination}) => fetchData(filters, sorting, pagination))\n )\n readonly data = toSignal(this.data$);\n\n readonly table = injectTable(() => ({\n columns: this.columns,\n data: this.data(),\n //...\n state: {\n columnFilters: this.columnFilters(), //pass controlled state back to the table (overrides internal state)\n sorting: this.sorting(),\n pagination: this.pagination(),\n },\n onColumnFiltersChange: updater => { //hoist columnFilters state into our own state management\n updater instanceof Function\n ? this.columnFilters.update(updater)\n : this.columnFilters.set(updater)\n },\n onSortingChange: updater => {\n updater instanceof Function\n ? this.sorting.update(updater)\n : this.sorting.set(updater)\n },\n onPaginationChange: updater => {\n updater instanceof Function\n ? this.pagination.update(updater)\n : this.pagination.set(updater)\n },\n }))\n}\n\n//...\n```\n\n#### Fully Controlled State\n\nAlternatively, you can control the entire table state with the `onStateChange` table option. It will hoist out the entire table state into your own state management system. Be careful with this approach, as you might find that raising some frequently changing state values up a component tree, like `columnSizingInfo` state`, might cause bad performance issues.\n\nA couple of more tricks may be needed to make this work. If you use the `onStateChange` table option, the initial values of the `state` must be populated with all of the relevant state values for all of the features that you want to use. You can either manually type out all of the initial state values, or use a constructor in a special way as shown below.\n\n```ts\n\n\nclass TableComponent {\n // create an empty table state, we'll override it later\n readonly state = signal({} as TableState);\n\n // create a table instance with default state values\n readonly table = injectTable(() => ({\n columns: this.columns,\n data: this.data(),\n // our fully controlled state overrides the internal state\n state: this.state(),\n onStateChange: updater => {\n // any state changes will be pushed up to our own state management\n this.state.set(\n updater instanceof Function ? updater(this.state()) : updater\n )\n }\n }))\n\n constructor() {\n // set the initial table state\n this.state.set({\n // populate the initial state with all of the default state values\n // from the table instance\n ...this.table.initialState,\n pagination: {\n pageIndex: 0,\n pageSize: 15, // optionally customize the initial pagination state.\n },\n })\n }\n}\n```\n\n### On State Change Callbacks\n\nSo far, we have seen the `on[State]Change` and `onStateChange` table options work to \"hoist\" the table state changes into our own state management. However, there are a few things about these using these options that you should be aware of.\n\n#### 1. **State Change Callbacks MUST have their corresponding state value in the `state` option**.\n\nSpecifying an `on[State]Change` callback tells the table instance that this will be a controlled state. If you do not specify the corresponding `state` value, that state will be \"frozen\" with its initial value.\n\n```ts\nclass TableComponent {\n sorting = signal([])\n\n table = injectTable(() => ({\n columns: this.columns,\n data: this.data(),\n //...\n state: {\n sorting: this.sorting(), // required because we are using `onSortingChange`\n },\n onSortingChange: updater => { // makes the `state.sorting` controlled\n updater instanceof Function\n ? this.sorting.update(updater)\n : this.sorting.set(updater)\n }\n }))\n}\n```\n\n#### 2. **Updaters can either be raw values or callback functions**.\n\nThe `on[State]Change` and `onStateChange` callbacks work exactly like the `setState` functions in React. The updater values can either be a new state value or a callback function that takes the previous state value and returns the new state value.\n\nWhat implications does this have? It means that if you want to add in some extra logic in any of the `on[State]Change` callbacks, you can do so, but you need to check whether or not the new incoming updater value is a function or value.\n\nThis is why you will see the `updater instanceof Function ? this.state.update(updater) : this.state.set(updater)` pattern in the examples above. This pattern checks if the updater is a function, and if it is, it calls the function with the previous state value to get the new state value, or the signal will require `signal.update` to be called with the updater instead of `signal.set`.\n\n### State Types\n\nAll complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.\n\n```ts\nimport {injectTable, type SortingState} from '@tanstack/angular-table'\n\nclass TableComponent {\n readonly sorting = signal([\n {\n id: 'age', // you should get autocomplete for the `id` and `desc` properties\n desc: true,\n }\n ])\n}\n```\n"
},
{
"path": "docs/framework/angular/reference/classes/FlexRenderCell.md",
"content": "---\nid: FlexRenderCell\ntitle: FlexRenderCell\n---\n\n# Class: FlexRenderCell\\\n\nDefined in: [helpers/flexRenderCell.ts:62](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/flexRenderCell.ts#L62)\n\nSimplified directive wrapper of `*flexRender`.\n\nUse this utility component to render headers, cells, or footers with custom markup.\n\nOnly one prop (`cell`, `header`, or `footer`) may be passed based on the used selector.\n\n## Examples\n\n```html\n
{{cell}}
\n
{{header}}
\n
{{footer}}
\n```\n\nThis replaces calling `*flexRender` directly like this:\n```html\n
{{cell}}
\n
{{header}}
\n
{{footer}}
\n```\n\nCan be imported through FlexRenderCell or [FlexRender](../variables/FlexRender.md) import,\nwhich the latter is preferred.\n\n```ts\nimport {FlexRender} from '@tanstack/angular-table\n\n@Component({\n // ...\n imports: [\n FlexRender\n ]\n})\n```\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TData\n\n`TData` *extends* `RowData`\n\n### TValue\n\n`TValue` *extends* `CellData`\n\n## Constructors\n\n### Constructor\n\n```ts\nnew FlexRenderCell(): FlexRenderCell;\n```\n\nDefined in: [helpers/flexRenderCell.ts:118](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/flexRenderCell.ts#L118)\n\n#### Returns\n\n`FlexRenderCell`\\<`TFeatures`, `TData`, `TValue`\\>\n\n## Properties\n\n### cell\n\n```ts\nreadonly cell: InputSignal | undefined>;\n```\n\nDefined in: [helpers/flexRenderCell.ts:67](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/flexRenderCell.ts#L67)\n\n***\n\n### footer\n\n```ts\nreadonly footer: InputSignal | undefined>;\n```\n\nDefined in: [helpers/flexRenderCell.ts:75](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/flexRenderCell.ts#L75)\n\n***\n\n### header\n\n```ts\nreadonly header: InputSignal | undefined>;\n```\n\nDefined in: [helpers/flexRenderCell.ts:71](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/flexRenderCell.ts#L71)\n"
},
{
"path": "docs/framework/angular/reference/classes/FlexRenderComponentInstance.md",
"content": "---\nid: FlexRenderComponentInstance\ntitle: FlexRenderComponentInstance\n---\n\n# Class: FlexRenderComponentInstance\\\n\nDefined in: [flex-render/flexRenderComponent.ts:259](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L259)\n\nWrapper class for a component that will be used as content for [FlexRenderDirective](FlexRenderDirective.md)\n\nPrefer [flexRenderComponent](../functions/flexRenderComponent.md) helper for better type-safety\n\n## Type Parameters\n\n### TComponent\n\n`TComponent` = `any`\n\n## Implements\n\n- [`FlexRenderComponent`](../interfaces/FlexRenderComponent.md)\\<`TComponent`\\>\n\n## Constructors\n\n### Constructor\n\n```ts\nnew FlexRenderComponentInstance(\n component, \n inputs?, \n injector?, \n outputs?, \n directives?, \nbindings?): FlexRenderComponentInstance;\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:266](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L266)\n\n#### Parameters\n\n##### component\n\n`Type`\\<`TComponent`\\>\n\n##### inputs?\n\n`Inputs`\\<`TComponent`\\>\n\n##### injector?\n\n`Injector`\n\n##### outputs?\n\n`Outputs`\\<`TComponent`\\>\n\n##### directives?\n\n(`Type`\\<`unknown`\\> \\| `DirectiveWithBindings`\\<`unknown`\\>)[]\n\n##### bindings?\n\n`Binding`[]\n\n#### Returns\n\n`FlexRenderComponentInstance`\\<`TComponent`\\>\n\n## Properties\n\n### allowedInputNames\n\n```ts\nreadonly allowedInputNames: string[] = [];\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:263](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L263)\n\nList of allowed input names.\n\n#### Implementation of\n\n[`FlexRenderComponent`](../interfaces/FlexRenderComponent.md).[`allowedInputNames`](../interfaces/FlexRenderComponent.md#allowedinputnames)\n\n***\n\n### allowedOutputNames\n\n```ts\nreadonly allowedOutputNames: string[] = [];\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:264](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L264)\n\nList of allowed output names.\n\n#### Implementation of\n\n[`FlexRenderComponent`](../interfaces/FlexRenderComponent.md).[`allowedOutputNames`](../interfaces/FlexRenderComponent.md#allowedoutputnames)\n\n***\n\n### bindings?\n\n```ts\nreadonly optional bindings: Binding[];\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:272](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L272)\n\nBindings to apply to the root component\n\n#### See\n\nFlexRenderOptions#bindings\n\n#### Implementation of\n\n[`FlexRenderComponent`](../interfaces/FlexRenderComponent.md).[`bindings`](../interfaces/FlexRenderComponent.md#bindings)\n\n***\n\n### component\n\n```ts\nreadonly component: Type;\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:267](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L267)\n\nThe component type\n\n#### Implementation of\n\n[`FlexRenderComponent`](../interfaces/FlexRenderComponent.md).[`component`](../interfaces/FlexRenderComponent.md#component)\n\n***\n\n### directives?\n\n```ts\nreadonly optional directives: (Type | DirectiveWithBindings)[];\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:271](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L271)\n\nDirectives that should be applied to the component.\n\n#### See\n\n#### Implementation of\n\n[`FlexRenderComponent`](../interfaces/FlexRenderComponent.md).[`directives`](../interfaces/FlexRenderComponent.md#directives)\n\n***\n\n### injector?\n\n```ts\nreadonly optional injector: Injector;\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:269](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L269)\n\nOptional Injector that will be used when rendering the component.\n\n#### See\n\nFlexRenderOptions#injector\n\n#### Implementation of\n\n[`FlexRenderComponent`](../interfaces/FlexRenderComponent.md).[`injector`](../interfaces/FlexRenderComponent.md#injector)\n\n***\n\n### inputs?\n\n```ts\nreadonly optional inputs: Inputs;\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:268](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L268)\n\nComponent instance inputs. Set via [componentRef.setInput API](https://angular.dev/api/core/ComponentRef#setInput))\n\n#### See\n\nFlexRenderOptions#inputs\n\n#### Implementation of\n\n[`FlexRenderComponent`](../interfaces/FlexRenderComponent.md).[`inputs`](../interfaces/FlexRenderComponent.md#inputs)\n\n***\n\n### mirror\n\n```ts\nreadonly mirror: ComponentMirror;\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:262](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L262)\n\nReflected metadata about the component.\n\n#### Implementation of\n\n[`FlexRenderComponent`](../interfaces/FlexRenderComponent.md).[`mirror`](../interfaces/FlexRenderComponent.md#mirror)\n\n***\n\n### outputs?\n\n```ts\nreadonly optional outputs: Outputs;\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:270](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L270)\n\nComponent instance outputs. Subscribed via OutputEmitterRef#subscribe\n\n#### See\n\nFlexRenderOptions#outputs\n\n#### Implementation of\n\n[`FlexRenderComponent`](../interfaces/FlexRenderComponent.md).[`outputs`](../interfaces/FlexRenderComponent.md#outputs)\n"
},
{
"path": "docs/framework/angular/reference/classes/FlexRenderDirective.md",
"content": "---\nid: FlexRenderDirective\ntitle: FlexRenderDirective\n---\n\n# Class: FlexRenderDirective\\\n\nDefined in: [flexRender.ts:84](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flexRender.ts#L84)\n\nUse this utility directive to render headers, cells, or footers with custom markup.\n\nNote: If you are rendering cell, header, or footer without custom context or other props,\nyou can use the [FlexRenderCell](FlexRenderCell.md) directive as shorthand instead .\n\n## Example\n\n```ts\nimport {FlexRender} from '@tanstack/angular-table';\n\n@Component({\n imports: [FlexRender],\n template: `\n \n {{cell}}\n
\n\n \n {{header}}\n
\n\n \n {{footer}}\n \n `,\n})\nclass App {\n}\n```\n\nCan be imported through FlexRenderDirective or [FlexRender](../variables/FlexRender.md) import,\nwhich the latter is preferred.\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TRowData\n\n`TRowData` *extends* `RowData`\n\n### TValue\n\n`TValue` *extends* `CellData`\n\n### TProps\n\n`TProps` *extends* \n \\| `NonNullable`\\<`unknown`\\>\n \\| `CellContext`\\<`TFeatures`, `TRowData`, `TValue`\\>\n \\| `HeaderContext`\\<`TFeatures`, `TRowData`, `TValue`\\>\n\n## Constructors\n\n### Constructor\n\n```ts\nnew FlexRenderDirective(): FlexRenderDirective;\n```\n\nDefined in: [flexRender.ts:109](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flexRender.ts#L109)\n\n#### Returns\n\n`FlexRenderDirective`\\<`TFeatures`, `TRowData`, `TValue`, `TProps`\\>\n\n## Properties\n\n### content\n\n```ts\nreadonly content: InputSignal>;\n```\n\nDefined in: [flexRender.ts:93](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flexRender.ts#L93)\n\n***\n\n### injector\n\n```ts\nreadonly injector: InputSignal;\n```\n\nDefined in: [flexRender.ts:102](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flexRender.ts#L102)\n\n***\n\n### props\n\n```ts\nreadonly props: InputSignal;\n```\n\nDefined in: [flexRender.ts:98](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flexRender.ts#L98)\n"
},
{
"path": "docs/framework/angular/reference/classes/TanStackTable.md",
"content": "---\nid: TanStackTable\ntitle: TanStackTable\n---\n\n# Class: TanStackTable\\\n\nDefined in: [helpers/table.ts:59](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/table.ts#L59)\n\nProvides a TanStack Table instance (`AngularTable`) in Angular DI.\n\nThe table can be injected by:\n- any descendant of an element using `[tanStackTable]=\"...\"`\n- any component instantiated by `*flexRender` when the render props contains `table`\n\n## Example\n\n```html\n
\n \n
\n```\n\n```ts\n@Component({\n selector: 'app-pagination',\n template: `\n \n \n `,\n})\nexport class PaginationComponent {\n readonly table = injectTableContext()\n\n prev() {\n this.table().previousPage()\n }\n next() {\n this.table().nextPage()\n }\n}\n```\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TData\n\n`TData` *extends* `RowData`\n\n### TSelected\n\n`TSelected` *extends* `object` = `TableState`\\<`TFeatures`\\>\n\n## Constructors\n\n### Constructor\n\n```ts\nnew TanStackTable(): TanStackTable;\n```\n\n#### Returns\n\n`TanStackTable`\\<`TFeatures`, `TData`, `TSelected`\\>\n\n## Properties\n\n### table\n\n```ts\nreadonly table: InputSignal>;\n```\n\nDefined in: [helpers/table.ts:69](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/table.ts#L69)\n\nThe current TanStack Table instance.\n\nProvided as a required signal input so DI consumers always read the latest value.\n"
},
{
"path": "docs/framework/angular/reference/classes/TanStackTableCell.md",
"content": "---\nid: TanStackTableCell\ntitle: TanStackTableCell\n---\n\n# Class: TanStackTableCell\\\n\nDefined in: [helpers/cell.ts:76](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/cell.ts#L76)\n\nProvides a TanStack Table `Cell` instance in Angular DI.\n\nThe cell can be injected by:\n- any descendant of an element using `[tanStackTableCell]=\"...\"`\n- any component instantiated by `*flexRender` when the render props contains `cell`\n\n## Examples\n\nInject from the nearest `[tanStackTableCell]`:\n```html\n
\n \n
\n```\n\n```ts\n@Component({\n selector: 'app-cell-actions',\n template: `{{ cell().id }}`,\n})\nexport class CellActionsComponent {\n readonly cell = injectTableCellContext()\n}\n```\n\nInject inside a component rendered via `flexRender`:\n```ts\n@Component({\n selector: 'app-price-cell',\n template: `{{ cell().getValue() }}`,\n})\nexport class PriceCellComponent {\n readonly cell = injectTableCellContext()\n}\n```\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TData\n\n`TData` *extends* `RowData`\n\n### TValue\n\n`TValue` *extends* `CellData`\n\n## Implements\n\n- [`TanStackTableCellContext`](../interfaces/TanStackTableCellContext.md)\\<`TFeatures`, `TData`, `TValue`\\>\n\n## Constructors\n\n### Constructor\n\n```ts\nnew TanStackTableCell(): TanStackTableCell;\n```\n\n#### Returns\n\n`TanStackTableCell`\\<`TFeatures`, `TData`, `TValue`\\>\n\n## Properties\n\n### cell\n\n```ts\nreadonly cell: InputSignal>;\n```\n\nDefined in: [helpers/cell.ts:86](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/cell.ts#L86)\n\nThe current TanStack Table cell.\n\nProvided as a required signal input so DI consumers always read the latest value.\n\n#### Implementation of\n\n[`TanStackTableCellContext`](../interfaces/TanStackTableCellContext.md).[`cell`](../interfaces/TanStackTableCellContext.md#cell)\n"
},
{
"path": "docs/framework/angular/reference/classes/TanStackTableHeader.md",
"content": "---\nid: TanStackTableHeader\ntitle: TanStackTableHeader\n---\n\n# Class: TanStackTableHeader\\\n\nDefined in: [helpers/header.ts:71](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/header.ts#L71)\n\nProvides a TanStack Table `Header` instance in Angular DI.\n\nThe header can be injected by:\n- any descendant of an element using `[tanStackTableHeader]=\"...\"`\n- any component instantiated by `*flexRender` when the render props contains `header`\n\n## Example\n\n```html\n
\n \n
\n```\n\n```ts\n@Component({\n selector: 'app-sort-indicator',\n template: `\n \n `,\n})\nexport class SortIndicatorComponent {\n readonly header = injectTableHeaderContext()\n\n toggle() {\n this.header().column.toggleSorting()\n }\n}\n```\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TData\n\n`TData` *extends* `RowData`\n\n### TValue\n\n`TValue` *extends* `CellData`\n\n## Implements\n\n- [`TanStackTableHeaderContext`](../interfaces/TanStackTableHeaderContext.md)\\<`TFeatures`, `TData`, `TValue`\\>\n\n## Constructors\n\n### Constructor\n\n```ts\nnew TanStackTableHeader(): TanStackTableHeader;\n```\n\n#### Returns\n\n`TanStackTableHeader`\\<`TFeatures`, `TData`, `TValue`\\>\n\n## Properties\n\n### header\n\n```ts\nreadonly header: InputSignal>;\n```\n\nDefined in: [helpers/header.ts:81](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/header.ts#L81)\n\nThe current TanStack Table header.\n\nProvided as a required signal input so DI consumers always read the latest value.\n\n#### Implementation of\n\n[`TanStackTableHeaderContext`](../interfaces/TanStackTableHeaderContext.md).[`header`](../interfaces/TanStackTableHeaderContext.md#header)\n"
},
{
"path": "docs/framework/angular/reference/functions/createTableHook.md",
"content": "---\nid: createTableHook\ntitle: createTableHook\n---\n\n# Function: createTableHook()\n\n```ts\nfunction createTableHook(__namedParameters): CreateTableHookResult;\n```\n\nDefined in: [helpers/createTableHook.ts:352](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L352)\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TTableComponents\n\n`TTableComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n\n### TCellComponents\n\n`TCellComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n\n### THeaderComponents\n\n`THeaderComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n\n## Parameters\n\n### \\_\\_namedParameters\n\n[`CreateTableContextOptions`](../type-aliases/CreateTableContextOptions.md)\\<`TFeatures`, `TTableComponents`, `TCellComponents`, `THeaderComponents`\\>\n\n## Returns\n\n[`CreateTableHookResult`](../type-aliases/CreateTableHookResult.md)\\<`TFeatures`, `TTableComponents`, `TCellComponents`, `THeaderComponents`\\>\n"
},
{
"path": "docs/framework/angular/reference/functions/flexRenderComponent.md",
"content": "---\nid: flexRenderComponent\ntitle: flexRenderComponent\n---\n\n# Function: flexRenderComponent()\n\n```ts\nfunction flexRenderComponent(component, options?): FlexRenderComponent;\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:150](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L150)\n\nHelper function to create a [FlexRenderComponent](../interfaces/FlexRenderComponent.md) instance, with better type-safety.\n\n## Type Parameters\n\n### TComponent\n\n`TComponent` = `any`\n\n## Parameters\n\n### component\n\n`Type`\\<`TComponent`\\>\n\n### options?\n\n`FlexRenderOptions`\\<`Inputs`\\<`TComponent`\\>, `Outputs`\\<`TComponent`\\>\\>\n\n## Returns\n\n[`FlexRenderComponent`](../interfaces/FlexRenderComponent.md)\\<`TComponent`\\>\n\n## Example\n\n```ts\nimport {flexRenderComponent} from '@tanstack/angular-table'\nimport {inputBinding, outputBinding} from '@angular/core';\n\nconst columns = [\n {\n cell: ({ row }) => {\n return flexRenderComponent(MyComponent, {\n inputs: { value: mySignalValue() },\n outputs: { valueChange: (val) => {} }\n // or using angular native createComponent#binding api\n bindings: [\n inputBinding('value', mySignalValue),\n outputBinding('valueChange', value => {\n console.log(\"my value changed to\", value)\n })\n ]\n })\n },\n },\n]\n```\n"
},
{
"path": "docs/framework/angular/reference/functions/injectFlexRenderContext.md",
"content": "---\nid: injectFlexRenderContext\ntitle: injectFlexRenderContext\n---\n\n# Function: injectFlexRenderContext()\n\n```ts\nfunction injectFlexRenderContext(): T;\n```\n\nDefined in: [flex-render/context.ts:12](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/context.ts#L12)\n\nInject the flex render context props.\n\nCan be used in components rendered via FlexRender directives.\n\n## Type Parameters\n\n### T\n\n`T` *extends* `object`\n\n## Returns\n\n`T`\n"
},
{
"path": "docs/framework/angular/reference/functions/injectTable.md",
"content": "---\nid: injectTable\ntitle: injectTable\n---\n\n# Function: injectTable()\n\n```ts\nfunction injectTable(options, selector): AngularTable;\n```\n\nDefined in: [injectTable.ts:95](https://github.com/TanStack/table/blob/main/packages/angular-table/src/injectTable.ts#L95)\n\nCreates and returns an Angular-reactive table instance.\n\nThe initializer is intentionally re-evaluated whenever any signal read inside it changes.\nThis is how the adapter keeps the table in sync with Angular's reactivity model.\n\nBecause of that behavior, keep expensive/static values (for example `columns`, feature setup, row models)\nas stable references outside the initializer, and only read reactive state (`data()`, pagination/filter/sorting signals, etc.)\ninside it.\n\nThe returned table is also signal-reactive: table state and table APIs are wired for Angular signals, so you can safely consume table methods inside `computed(...)` and `effect(...)`.\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TData\n\n`TData` *extends* `RowData`\n\n### TSelected\n\n`TSelected` = `TableState`\\<`TFeatures`\\>\n\n## Parameters\n\n### options\n\n() => `TableOptions`\\<`TFeatures`, `TData`\\>\n\n### selector\n\n(`state`) => `TSelected`\n\n## Returns\n\n[`AngularTable`](../type-aliases/AngularTable.md)\\<`TFeatures`, `TData`, `TSelected`\\>\n\nAn Angular-reactive TanStack Table instance.\n\n## Example\n\n1. Register the table features you need\n```ts\n// Register only the features you need\nimport {tableFeatures, rowPaginationFeature} from '@tanstack/angular-table';\nconst _features = tableFeatures({\n rowPaginationFeature,\n // ...all other features you need\n})\n\n// Use all table core features\nimport {stockFeatures} from '@tanstack/angular-table';\nconst _features = tableFeatures(stockFeatures);\n```\n2. Prepare the table columns\n```ts\nimport {ColumnDef} from '@tanstack/angular-table';\n\ntype MyData = {}\n\nconst columns: ColumnDef[] = [\n // ...column definitions\n]\n\n// or using createColumnHelper\nimport {createColumnHelper} from '@tanstack/angular-table';\nconst columnHelper = createColumnHelper();\nconst columns = columnHelper.columns([\n columnHelper.accessor(...),\n // ...other columns\n])\n```\n3. Create the table instance with `injectTable`\n```ts\nconst table = injectTable(() => {\n // ...table options,\n _features,\n columns: columns,\n data: myDataSignal(),\n})\n```\n"
},
{
"path": "docs/framework/angular/reference/functions/injectTableCellContext.md",
"content": "---\nid: injectTableCellContext\ntitle: injectTableCellContext\n---\n\n# Function: injectTableCellContext()\n\n```ts\nfunction injectTableCellContext(): Signal>;\n```\n\nDefined in: [helpers/cell.ts:98](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/cell.ts#L98)\n\nInjects the current TanStack Table cell signal.\n\nAvailable when:\n- there is a nearest `[tanStackTableCell]` directive in the DI tree, or\n- the caller is rendered via `*flexRender` with render props containing `cell`\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TData\n\n`TData` *extends* `RowData`\n\n### TValue\n\n`TValue` *extends* `unknown`\n\n## Returns\n\n`Signal`\\<`Cell`\\<`TFeatures`, `TData`, `TValue`\\>\\>\n"
},
{
"path": "docs/framework/angular/reference/functions/injectTableContext.md",
"content": "---\nid: injectTableContext\ntitle: injectTableContext\n---\n\n# Function: injectTableContext()\n\n```ts\nfunction injectTableContext(): Signal>;\n```\n\nDefined in: [helpers/table.ts:81](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/table.ts#L81)\n\nInjects the current TanStack Table instance signal.\n\nAvailable when:\n- there is a nearest `[tanStackTable]` directive in the DI tree, or\n- the caller is rendered via `*flexRender` with render props containing `table`\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TData\n\n`TData` *extends* `RowData`\n\n### TSelected\n\n`TSelected` *extends* `object` = `TableState`\\<`TFeatures`\\>\n\n## Returns\n\n`Signal`\\<[`AngularTable`](../type-aliases/AngularTable.md)\\<`TFeatures`, `TData`, `TSelected`\\>\\>\n"
},
{
"path": "docs/framework/angular/reference/functions/injectTableHeaderContext.md",
"content": "---\nid: injectTableHeaderContext\ntitle: injectTableHeaderContext\n---\n\n# Function: injectTableHeaderContext()\n\n```ts\nfunction injectTableHeaderContext(): Signal>;\n```\n\nDefined in: [helpers/header.ts:93](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/header.ts#L93)\n\nInjects the current TanStack Table header signal.\n\nAvailable when:\n- there is a nearest `[tanStackTableHeader]` directive in the DI tree, or\n- the caller is rendered via `*flexRender` with render props containing `header`\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TData\n\n`TData` *extends* `RowData`\n\n### TValue\n\n`TValue` *extends* `unknown`\n\n## Returns\n\n`Signal`\\<`Header`\\<`TFeatures`, `TData`, `TValue`\\>\\>\n"
},
{
"path": "docs/framework/angular/reference/index.md",
"content": "---\nid: \"@tanstack/angular-table\"\ntitle: \"@tanstack/angular-table\"\n---\n\n# @tanstack/angular-table\n\n## Classes\n\n- [FlexRenderCell](classes/FlexRenderCell.md)\n- [FlexRenderComponentInstance](classes/FlexRenderComponentInstance.md)\n- [FlexRenderDirective](classes/FlexRenderDirective.md)\n- [TanStackTable](classes/TanStackTable.md)\n- [TanStackTableCell](classes/TanStackTableCell.md)\n- [TanStackTableHeader](classes/TanStackTableHeader.md)\n\n## Interfaces\n\n- [AngularReactivityFlags](interfaces/AngularReactivityFlags.md)\n- [FlexRenderComponent](interfaces/FlexRenderComponent.md)\n- [TanStackTableCellContext](interfaces/TanStackTableCellContext.md)\n- [TanStackTableHeaderContext](interfaces/TanStackTableHeaderContext.md)\n\n## Type Aliases\n\n- [AngularTable](type-aliases/AngularTable.md)\n- [AppAngularTable](type-aliases/AppAngularTable.md)\n- [AppCellContext](type-aliases/AppCellContext.md)\n- [AppColumnHelper](type-aliases/AppColumnHelper.md)\n- [AppHeaderContext](type-aliases/AppHeaderContext.md)\n- [CreateTableContextOptions](type-aliases/CreateTableContextOptions.md)\n- [CreateTableHookResult](type-aliases/CreateTableHookResult.md)\n- [FlexRenderComponentProps](type-aliases/FlexRenderComponentProps.md)\n- [FlexRenderContent](type-aliases/FlexRenderContent.md)\n- [FlexRenderInputContent](type-aliases/FlexRenderInputContent.md)\n\n## Variables\n\n- [FlexRender](variables/FlexRender.md)\n- [TanStackTableCellToken](variables/TanStackTableCellToken.md)\n- [TanStackTableHeaderToken](variables/TanStackTableHeaderToken.md)\n- [TanStackTableToken](variables/TanStackTableToken.md)\n\n## Functions\n\n- [createTableHook](functions/createTableHook.md)\n- [flexRenderComponent](functions/flexRenderComponent.md)\n- [injectFlexRenderContext](functions/injectFlexRenderContext.md)\n- [injectTable](functions/injectTable.md)\n- [injectTableCellContext](functions/injectTableCellContext.md)\n- [injectTableContext](functions/injectTableContext.md)\n- [injectTableHeaderContext](functions/injectTableHeaderContext.md)\n"
},
{
"path": "docs/framework/angular/reference/interfaces/AngularReactivityFlags.md",
"content": "---\nid: AngularReactivityFlags\ntitle: AngularReactivityFlags\n---\n\n# Interface: AngularReactivityFlags\n\nDefined in: [angularReactivityFeature.ts:55](https://github.com/TanStack/table/blob/main/packages/angular-table/src/angularReactivityFeature.ts#L55)\n\nFine-grained configuration for Angular reactivity.\n\nEach key controls whether prototype methods/getters on the corresponding TanStack Table\nobjects are wrapped with signal-aware access.\n\n- `true` enables wrapping using the default skip rules.\n- `false` disables wrapping entirely for that object type.\n- a function allows customizing the skip rules (see SkipPropertyFn).\n\n## Example\n\n```ts\nconst table = injectTable(() => {\n // ...table options,\n reactivity: {\n // fine-grained control over which table objects have reactive properties,\n // and which properties are wrapped\n header: true,\n column: true,\n row: true,\n cell: true,\n }\n})\n```\n\n## Properties\n\n### cell\n\n```ts\ncell: boolean | SkipPropertyFn;\n```\n\nDefined in: [angularReactivityFeature.ts:63](https://github.com/TanStack/table/blob/main/packages/angular-table/src/angularReactivityFeature.ts#L63)\n\nControls reactive wrapping for `Cell` instances.\n\n***\n\n### column\n\n```ts\ncolumn: boolean | SkipPropertyFn;\n```\n\nDefined in: [angularReactivityFeature.ts:59](https://github.com/TanStack/table/blob/main/packages/angular-table/src/angularReactivityFeature.ts#L59)\n\nControls reactive wrapping for `Column` instances.\n\n***\n\n### header\n\n```ts\nheader: boolean | SkipPropertyFn;\n```\n\nDefined in: [angularReactivityFeature.ts:57](https://github.com/TanStack/table/blob/main/packages/angular-table/src/angularReactivityFeature.ts#L57)\n\nControls reactive wrapping for `Header` instances.\n\n***\n\n### row\n\n```ts\nrow: boolean | SkipPropertyFn;\n```\n\nDefined in: [angularReactivityFeature.ts:61](https://github.com/TanStack/table/blob/main/packages/angular-table/src/angularReactivityFeature.ts#L61)\n\nControls reactive wrapping for `Row` instances.\n"
},
{
"path": "docs/framework/angular/reference/interfaces/FlexRenderComponent.md",
"content": "---\nid: FlexRenderComponent\ntitle: FlexRenderComponent\n---\n\n# Interface: FlexRenderComponent\\\n\nDefined in: [flex-render/flexRenderComponent.ts:205](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L205)\n\nWrapper interface for a component that will be used as content for [FlexRenderDirective](../classes/FlexRenderDirective.md).\nCan be created using [flexRenderComponent](../functions/flexRenderComponent.md) helper.\n\n## Example\n\n```ts\nimport {flexRenderComponent} from '@tanstack/angular-table'\n\n// Usage in cell/header/footer definition\nconst columns = [\n {\n cell: ({ row }) => {\n return flexRenderComponent(MyComponent, {\n inputs: { value: mySignalValue() },\n outputs: { valueChange: (val) => {} }\n // or using angular createComponent#bindings api\n bindings: [\n inputBinding('value', mySignalValue),\n outputBinding('valueChange', value => {\n console.log(\"my value changed to\", value)\n })\n ]\n })\n },\n },\n]\n\nimport {input, output} from '@angular/core';\n\n@Component({\n selector: 'my-component',\n})\nclass MyComponent {\n readonly value = input(0);\n readonly valueChange = output();\n}\n\n```\n\n## Type Parameters\n\n### TComponent\n\n`TComponent` = `any`\n\n## Properties\n\n### allowedInputNames\n\n```ts\nreadonly allowedInputNames: string[];\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:217](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L217)\n\nList of allowed input names.\n\n***\n\n### allowedOutputNames\n\n```ts\nreadonly allowedOutputNames: string[];\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:221](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L221)\n\nList of allowed output names.\n\n***\n\n### bindings?\n\n```ts\noptional bindings: Binding[];\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:245](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L245)\n\nBindings to apply to the root component\n\n#### See\n\nFlexRenderOptions#bindings\n\n***\n\n### component\n\n```ts\nreadonly component: Type;\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:209](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L209)\n\nThe component type\n\n***\n\n### directives?\n\n```ts\noptional directives: (Type | DirectiveWithBindings)[];\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:251](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L251)\n\nDirectives that should be applied to the component.\n\n#### See\n\n***\n\n### injector?\n\n```ts\nreadonly optional injector: Injector;\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:239](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L239)\n\nOptional Injector that will be used when rendering the component.\n\n#### See\n\nFlexRenderOptions#injector\n\n***\n\n### inputs?\n\n```ts\nreadonly optional inputs: Inputs;\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:233](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L233)\n\nComponent instance inputs. Set via [componentRef.setInput API](https://angular.dev/api/core/ComponentRef#setInput))\n\n#### See\n\nFlexRenderOptions#inputs\n\n***\n\n### mirror\n\n```ts\nreadonly mirror: ComponentMirror;\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:213](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L213)\n\nReflected metadata about the component.\n\n***\n\n### outputs?\n\n```ts\nreadonly optional outputs: Outputs;\n```\n\nDefined in: [flex-render/flexRenderComponent.ts:227](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/flexRenderComponent.ts#L227)\n\nComponent instance outputs. Subscribed via OutputEmitterRef#subscribe\n\n#### See\n\nFlexRenderOptions#outputs\n"
},
{
"path": "docs/framework/angular/reference/interfaces/TanStackTableCellContext.md",
"content": "---\nid: TanStackTableCellContext\ntitle: TanStackTableCellContext\n---\n\n# Interface: TanStackTableCellContext\\\n\nDefined in: [helpers/cell.ts:11](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/cell.ts#L11)\n\nDI context shape for a TanStack Table cell.\n\nThis exists to make the current `Cell` injectable by any nested component/directive\nwithout having to pass it through inputs/props manually.\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TData\n\n`TData` *extends* `RowData`\n\n### TValue\n\n`TValue` *extends* `CellData`\n\n## Properties\n\n### cell\n\n```ts\ncell: Signal>;\n```\n\nDefined in: [helpers/cell.ts:17](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/cell.ts#L17)\n\nSignal that returns the current cell instance.\n"
},
{
"path": "docs/framework/angular/reference/interfaces/TanStackTableHeaderContext.md",
"content": "---\nid: TanStackTableHeaderContext\ntitle: TanStackTableHeaderContext\n---\n\n# Interface: TanStackTableHeaderContext\\\n\nDefined in: [helpers/header.ts:11](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/header.ts#L11)\n\nDI context shape for a TanStack Table header.\n\nThis exists to make the current `Header` injectable by any nested component/directive\nwithout passing it through inputs/props.\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TData\n\n`TData` *extends* `RowData`\n\n### TValue\n\n`TValue` *extends* `CellData`\n\n## Properties\n\n### header\n\n```ts\nheader: Signal>;\n```\n\nDefined in: [helpers/header.ts:17](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/header.ts#L17)\n\nSignal that returns the current header instance.\n"
},
{
"path": "docs/framework/angular/reference/type-aliases/AngularTable.md",
"content": "---\nid: AngularTable\ntitle: AngularTable\n---\n\n# Type Alias: AngularTable\\\n\n```ts\ntype AngularTable = Table & object;\n```\n\nDefined in: [injectTable.ts:21](https://github.com/TanStack/table/blob/main/packages/angular-table/src/injectTable.ts#L21)\n\n## Type Declaration\n\n### state\n\n```ts\nreadonly state: Signal>;\n```\n\nThe selected state from the table store, based on the selector provided.\n\n### Subscribe()\n\n```ts\nSubscribe: (props) => Signal>;\n```\n\nSubscribe to changes in the table store with a custom selector.\n\n#### Type Parameters\n\n##### TSubSelected\n\n`TSubSelected` = \\{\n\\}\n\n#### Parameters\n\n##### props\n\n###### equal?\n\n`ValueEqualityFn`\\<`TSubSelected`\\>\n\n###### selector\n\n(`state`) => `TSubSelected`\n\n#### Returns\n\n`Signal`\\<`Readonly`\\<`TSubSelected`\\>\\>\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TData\n\n`TData` *extends* `RowData`\n\n### TSelected\n\n`TSelected` = `TableState`\\<`TFeatures`\\>\n"
},
{
"path": "docs/framework/angular/reference/type-aliases/AppAngularTable.md",
"content": "---\nid: AppAngularTable\ntitle: AppAngularTable\n---\n\n# Type Alias: AppAngularTable\\\n\n```ts\ntype AppAngularTable = AngularTable & NoInfer & object;\n```\n\nDefined in: [helpers/createTableHook.ts:243](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L243)\n\nExtended table API returned by useAppTable with all App wrapper components\n\n## Type Declaration\n\n### appCell()\n\n```ts\nappCell: (cell) => Cell & NoInfer;\n```\n\n#### Type Parameters\n\n##### TValue\n\n`TValue`\n\n#### Parameters\n\n##### cell\n\n`Cell`\\<`TFeatures`, `TData`, `TValue`\\>\n\n#### Returns\n\n`Cell`\\<`TFeatures`, `TData`, `TValue`\\> & `NoInfer`\\<`TCellComponents`\\>\n\n### appFooter()\n\n```ts\nappFooter: (footer) => Header & NoInfer;\n```\n\n#### Type Parameters\n\n##### TValue\n\n`TValue`\n\n#### Parameters\n\n##### footer\n\n`Header`\\<`TFeatures`, `TData`, `TValue`\\>\n\n#### Returns\n\n`Header`\\<`TFeatures`, `TData`, `TValue`\\> & `NoInfer`\\<`THeaderComponents`\\>\n\n### appHeader()\n\n```ts\nappHeader: (header) => Header & NoInfer;\n```\n\n#### Type Parameters\n\n##### TValue\n\n`TValue`\n\n#### Parameters\n\n##### header\n\n`Header`\\<`TFeatures`, `TData`, `TValue`\\>\n\n#### Returns\n\n`Header`\\<`TFeatures`, `TData`, `TValue`\\> & `NoInfer`\\<`THeaderComponents`\\>\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TData\n\n`TData` *extends* `RowData`\n\n### TSelected\n\n`TSelected`\n\n### TTableComponents\n\n`TTableComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n\n### TCellComponents\n\n`TCellComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n\n### THeaderComponents\n\n`THeaderComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n"
},
{
"path": "docs/framework/angular/reference/type-aliases/AppCellContext.md",
"content": "---\nid: AppCellContext\ntitle: AppCellContext\n---\n\n# Type Alias: AppCellContext\\\n\n```ts\ntype AppCellContext = object;\n```\n\nDefined in: [helpers/createTableHook.ts:47](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L47)\n\nEnhanced CellContext with pre-bound cell components.\nThe `cell` property includes the registered cellComponents.\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TData\n\n`TData` *extends* `RowData`\n\n### TValue\n\n`TValue` *extends* `CellData`\n\n### TCellComponents\n\n`TCellComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n\n## Properties\n\n### cell\n\n```ts\ncell: Cell & TCellComponents & object;\n```\n\nDefined in: [helpers/createTableHook.ts:53](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L53)\n\n#### Type Declaration\n\n##### FlexRender()\n\n```ts\nFlexRender: () => unknown;\n```\n\n###### Returns\n\n`unknown`\n\n***\n\n### column\n\n```ts\ncolumn: Column;\n```\n\nDefined in: [helpers/createTableHook.ts:55](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L55)\n\n***\n\n### getValue\n\n```ts\ngetValue: CellContext[\"getValue\"];\n```\n\nDefined in: [helpers/createTableHook.ts:56](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L56)\n\n***\n\n### renderValue\n\n```ts\nrenderValue: CellContext[\"renderValue\"];\n```\n\nDefined in: [helpers/createTableHook.ts:57](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L57)\n\n***\n\n### row\n\n```ts\nrow: Row;\n```\n\nDefined in: [helpers/createTableHook.ts:58](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L58)\n\n***\n\n### table\n\n```ts\ntable: Table;\n```\n\nDefined in: [helpers/createTableHook.ts:59](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L59)\n"
},
{
"path": "docs/framework/angular/reference/type-aliases/AppColumnHelper.md",
"content": "---\nid: AppColumnHelper\ntitle: AppColumnHelper\n---\n\n# Type Alias: AppColumnHelper\\\n\n```ts\ntype AppColumnHelper = object;\n```\n\nDefined in: [helpers/createTableHook.ts:168](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L168)\n\nEnhanced column helper with pre-bound components in cell/header/footer contexts.\nThis enables TypeScript to know about the registered components when defining columns.\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TData\n\n`TData` *extends* `RowData`\n\n### TCellComponents\n\n`TCellComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n\n### THeaderComponents\n\n`THeaderComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n\n## Properties\n\n### accessor()\n\n```ts\naccessor: (accessor, column) => TAccessor extends AccessorFn ? AccessorFnColumnDef : AccessorKeyColumnDef;\n```\n\nDefined in: [helpers/createTableHook.ts:178](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L178)\n\nCreates a data column definition with an accessor key or function.\nThe cell, header, and footer contexts include pre-bound components.\n\n#### Type Parameters\n\n##### TAccessor\n\n`TAccessor` *extends* `AccessorFn`\\<`TData`\\> \\| `DeepKeys`\\<`TData`\\>\n\n##### TValue\n\n`TValue` *extends* `TAccessor` *extends* `AccessorFn`\\<`TData`, infer TReturn\\> ? `TReturn` : `TAccessor` *extends* `DeepKeys`\\<`TData`\\> ? `DeepValue`\\<`TData`, `TAccessor`\\> : `never`\n\n#### Parameters\n\n##### accessor\n\n`TAccessor`\n\n##### column\n\n`TAccessor` *extends* `AccessorFn`\\<`TData`\\> ? `AppColumnDefBase`\\<`TFeatures`, `TData`, `TValue`, `TCellComponents`, `THeaderComponents`\\> & `object` : `AppColumnDefBase`\\<`TFeatures`, `TData`, `TValue`, `TCellComponents`, `THeaderComponents`\\>\n\n#### Returns\n\n`TAccessor` *extends* `AccessorFn`\\<`TData`\\> ? `AccessorFnColumnDef`\\<`TFeatures`, `TData`, `TValue`\\> : `AccessorKeyColumnDef`\\<`TFeatures`, `TData`, `TValue`\\>\n\n***\n\n### columns()\n\n```ts\ncolumns: (columns) => ColumnDef[] & [...TColumns];\n```\n\nDefined in: [helpers/createTableHook.ts:209](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L209)\n\nWraps an array of column definitions to preserve each column's individual TValue type.\n\n#### Type Parameters\n\n##### TColumns\n\n`TColumns` *extends* `ReadonlyArray`\\<`ColumnDef`\\<`TFeatures`, `TData`, `any`\\>\\>\n\n#### Parameters\n\n##### columns\n\n\\[`...TColumns`\\]\n\n#### Returns\n\n`ColumnDef`\\<`TFeatures`, `TData`, `any`\\>[] & \\[`...TColumns`\\]\n\n***\n\n### display()\n\n```ts\ndisplay: (column) => DisplayColumnDef;\n```\n\nDefined in: [helpers/createTableHook.ts:217](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L217)\n\nCreates a display column definition for non-data columns.\nThe cell, header, and footer contexts include pre-bound components.\n\n#### Parameters\n\n##### column\n\n`AppDisplayColumnDef`\\<`TFeatures`, `TData`, `TCellComponents`, `THeaderComponents`\\>\n\n#### Returns\n\n`DisplayColumnDef`\\<`TFeatures`, `TData`, `unknown`\\>\n\n***\n\n### group()\n\n```ts\ngroup: (column) => GroupColumnDef;\n```\n\nDefined in: [helpers/createTableHook.ts:230](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L230)\n\nCreates a group column definition with nested child columns.\nThe cell, header, and footer contexts include pre-bound components.\n\n#### Parameters\n\n##### column\n\n`AppGroupColumnDef`\\<`TFeatures`, `TData`, `TCellComponents`, `THeaderComponents`\\>\n\n#### Returns\n\n`GroupColumnDef`\\<`TFeatures`, `TData`, `unknown`\\>\n"
},
{
"path": "docs/framework/angular/reference/type-aliases/AppHeaderContext.md",
"content": "---\nid: AppHeaderContext\ntitle: AppHeaderContext\n---\n\n# Type Alias: AppHeaderContext\\\n\n```ts\ntype AppHeaderContext = object;\n```\n\nDefined in: [helpers/createTableHook.ts:66](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L66)\n\nEnhanced HeaderContext with pre-bound header components.\nThe `header` property includes the registered headerComponents.\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TData\n\n`TData` *extends* `RowData`\n\n### TValue\n\n`TValue` *extends* `CellData`\n\n### THeaderComponents\n\n`THeaderComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n\n## Properties\n\n### column\n\n```ts\ncolumn: Column;\n```\n\nDefined in: [helpers/createTableHook.ts:72](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L72)\n\n***\n\n### header\n\n```ts\nheader: Header & THeaderComponents & object;\n```\n\nDefined in: [helpers/createTableHook.ts:73](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L73)\n\n#### Type Declaration\n\n##### FlexRender()\n\n```ts\nFlexRender: () => unknown;\n```\n\n###### Returns\n\n`unknown`\n\n***\n\n### table\n\n```ts\ntable: Table;\n```\n\nDefined in: [helpers/createTableHook.ts:75](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L75)\n"
},
{
"path": "docs/framework/angular/reference/type-aliases/CreateTableContextOptions.md",
"content": "---\nid: CreateTableContextOptions\ntitle: CreateTableContextOptions\n---\n\n# Type Alias: CreateTableContextOptions\\\n\n```ts\ntype CreateTableContextOptions = Omit, \"columns\" | \"data\" | \"store\" | \"state\" | \"initialState\"> & object;\n```\n\nDefined in: [helpers/createTableHook.ts:273](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L273)\n\nOptions for creating a table hook with pre-bound components and default table options.\nExtends all TableOptions except 'columns' | 'data' | 'store' | 'state' | 'initialState'.\n\n## Type Declaration\n\n### cellComponents?\n\n```ts\noptional cellComponents: TCellComponents;\n```\n\nCell-level components that need access to the cell instance.\nThese are available on the cell object passed to AppCell's children.\nUse `useCellContext()` inside these components.\n\n#### Example\n\n```ts\n{ TextCell, NumberCell, DateCell, CurrencyCell }\n```\n\n### headerComponents?\n\n```ts\noptional headerComponents: THeaderComponents;\n```\n\nHeader-level components that need access to the header instance.\nThese are available on the header object passed to AppHeader/AppFooter's children.\nUse `useHeaderContext()` inside these components.\n\n#### Example\n\n```ts\n{ SortIndicator, ColumnFilter, ResizeHandle }\n```\n\n### tableComponents?\n\n```ts\noptional tableComponents: TTableComponents;\n```\n\nTable-level components that need access to the table instance.\nThese are available directly on the table object returned by useAppTable.\nUse `useTableContext()` inside these components.\n\n#### Example\n\n```ts\n{ PaginationControls, GlobalFilter, RowCount }\n```\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TTableComponents\n\n`TTableComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n\n### TCellComponents\n\n`TCellComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n\n### THeaderComponents\n\n`THeaderComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n"
},
{
"path": "docs/framework/angular/reference/type-aliases/CreateTableHookResult.md",
"content": "---\nid: CreateTableHookResult\ntitle: CreateTableHookResult\n---\n\n# Type Alias: CreateTableHookResult\\\n\n```ts\ntype CreateTableHookResult = object;\n```\n\nDefined in: [helpers/createTableHook.ts:305](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L305)\n\n## Type Parameters\n\n### TFeatures\n\n`TFeatures` *extends* `TableFeatures`\n\n### TTableComponents\n\n`TTableComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n\n### TCellComponents\n\n`TCellComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n\n### THeaderComponents\n\n`THeaderComponents` *extends* `Record`\\<`string`, `RenderableComponent`\\>\n\n## Properties\n\n### createAppColumnHelper()\n\n```ts\ncreateAppColumnHelper: () => AppColumnHelper;\n```\n\nDefined in: [helpers/createTableHook.ts:311](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L311)\n\n#### Type Parameters\n\n##### TData\n\n`TData` *extends* `RowData`\n\n#### Returns\n\n[`AppColumnHelper`](AppColumnHelper.md)\\<`TFeatures`, `TData`, `TCellComponents`, `THeaderComponents`\\>\n\n***\n\n### injectAppTable()\n\n```ts\ninjectAppTable: (tableOptions, selector?) => AppAngularTable;\n```\n\nDefined in: [helpers/createTableHook.ts:336](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L336)\n\n#### Type Parameters\n\n##### TData\n\n`TData` *extends* `RowData`\n\n##### TSelected\n\n`TSelected` = `TableState`\\<`TFeatures`\\>\n\n#### Parameters\n\n##### tableOptions\n\n() => `Omit`\\<`TableOptions`\\<`TFeatures`, `TData`\\>, `\"_features\"` \\| `\"_rowModels\"`\\>\n\n##### selector?\n\n(`state`) => `TSelected`\n\n#### Returns\n\n[`AppAngularTable`](AppAngularTable.md)\\<`TFeatures`, `TData`, `TSelected`, `TTableComponents`, `TCellComponents`, `THeaderComponents`\\>\n\n***\n\n### injectFlexRenderCellContext()\n\n```ts\ninjectFlexRenderCellContext: () => CellContext;\n```\n\nDefined in: [helpers/createTableHook.ts:332](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L332)\n\n#### Type Parameters\n\n##### TData\n\n`TData` *extends* `RowData`\n\n##### TValue\n\n`TValue` *extends* `CellData`\n\n#### Returns\n\n`CellContext`\\<`TFeatures`, `TData`, `TValue`\\>\n\n***\n\n### injectFlexRenderHeaderContext()\n\n```ts\ninjectFlexRenderHeaderContext: () => HeaderContext;\n```\n\nDefined in: [helpers/createTableHook.ts:328](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L328)\n\n#### Type Parameters\n\n##### TData\n\n`TData` *extends* `RowData`\n\n##### TValue\n\n`TValue` *extends* `CellData`\n\n#### Returns\n\n`HeaderContext`\\<`TFeatures`, `TData`, `TValue`\\>\n\n***\n\n### injectTableCellContext()\n\n```ts\ninjectTableCellContext: () => Signal>;\n```\n\nDefined in: [helpers/createTableHook.ts:324](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L324)\n\n#### Type Parameters\n\n##### TValue\n\n`TValue` *extends* `CellData` = `CellData`\n\n##### TRowData\n\n`TRowData` *extends* `RowData` = `RowData`\n\n#### Returns\n\n`Signal`\\<`Cell`\\<`TFeatures`, `TRowData`, `TValue`\\>\\>\n\n***\n\n### injectTableContext()\n\n```ts\ninjectTableContext: () => Signal>;\n```\n\nDefined in: [helpers/createTableHook.ts:317](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L317)\n\n#### Type Parameters\n\n##### TData\n\n`TData` *extends* `RowData` = `RowData`\n\n#### Returns\n\n`Signal`\\<[`AngularTable`](AngularTable.md)\\<`TFeatures`, `TData`\\>\\>\n\n***\n\n### injectTableHeaderContext()\n\n```ts\ninjectTableHeaderContext: () => Signal>;\n```\n\nDefined in: [helpers/createTableHook.ts:320](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L320)\n\n#### Type Parameters\n\n##### TValue\n\n`TValue` *extends* `CellData` = `CellData`\n\n##### TRowData\n\n`TRowData` *extends* `RowData` = `RowData`\n\n#### Returns\n\n`Signal`\\<`Header`\\<`TFeatures`, `TRowData`, `TValue`\\>\\>\n"
},
{
"path": "docs/framework/angular/reference/type-aliases/FlexRenderComponentProps.md",
"content": "---\nid: FlexRenderComponentProps\ntitle: FlexRenderComponentProps\n---\n\n# Type Alias: FlexRenderComponentProps\n\n```ts\ntype FlexRenderComponentProps = InjectionToken<{\n}>;\n```\n\nDefined in: [flex-render/context.ts:3](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/context.ts#L3)\n"
},
{
"path": "docs/framework/angular/reference/type-aliases/FlexRenderContent.md",
"content": "---\nid: FlexRenderContent\ntitle: FlexRenderContent\n---\n\n# Type Alias: FlexRenderContent\\\n\n```ts\ntype FlexRenderContent = \n | string\n | number\n | Type\n | FlexRenderComponent\n | TemplateRef<{\n $implicit: TProps;\n}>\n | null\n | Record\n | undefined;\n```\n\nDefined in: [flex-render/renderer.ts:40](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/renderer.ts#L40)\n\nContent supported by the `flexRender` directive when declaring\na table column header/cell.\n\n## Type Parameters\n\n### TProps\n\n`TProps` *extends* `NonNullable`\\<`unknown`\\>\n"
},
{
"path": "docs/framework/angular/reference/type-aliases/FlexRenderInputContent.md",
"content": "---\nid: FlexRenderInputContent\ntitle: FlexRenderInputContent\n---\n\n# Type Alias: FlexRenderInputContent\\\n\n```ts\ntype FlexRenderInputContent = \n | number\n | string\n | (props) => FlexRenderContent\n | null\n | undefined;\n```\n\nDefined in: [flex-render/renderer.ts:53](https://github.com/TanStack/table/blob/main/packages/angular-table/src/flex-render/renderer.ts#L53)\n\nInput content supported by the `flexRender` directives.\n\n## Type Parameters\n\n### TProps\n\n`TProps` *extends* `NonNullable`\\<`unknown`\\>\n"
},
{
"path": "docs/framework/angular/reference/variables/FlexRender.md",
"content": "---\nid: FlexRender\ntitle: FlexRender\n---\n\n# Variable: FlexRender\n\n```ts\nconst FlexRender: readonly [typeof FlexRenderDirective, typeof FlexRenderCell];\n```\n\nDefined in: [index.ts:25](https://github.com/TanStack/table/blob/main/packages/angular-table/src/index.ts#L25)\n\nConstant helper to import FlexRender directives.\n\nYou should prefer to use this constant over importing the directives separately,\nas it ensures you always have the correct set of directives over library updates.\n\n## See\n\n[FlexRenderDirective](../classes/FlexRenderDirective.md) and [FlexRenderCell](../classes/FlexRenderCell.md) for more details on the directives included in this export.\n"
},
{
"path": "docs/framework/angular/reference/variables/TanStackTableCellToken.md",
"content": "---\nid: TanStackTableCellToken\ntitle: TanStackTableCellToken\n---\n\n# Variable: TanStackTableCellToken\n\n```ts\nconst TanStackTableCellToken: InjectionToken>;\n```\n\nDefined in: [helpers/cell.ts:25](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/cell.ts#L25)\n\nInjection token that provides access to the current cell.\n\nThis token is provided by the [TanStackTableCell](../classes/TanStackTableCell.md) directive.\n"
},
{
"path": "docs/framework/angular/reference/variables/TanStackTableHeaderToken.md",
"content": "---\nid: TanStackTableHeaderToken\ntitle: TanStackTableHeaderToken\n---\n\n# Variable: TanStackTableHeaderToken\n\n```ts\nconst TanStackTableHeaderToken: InjectionToken>;\n```\n\nDefined in: [helpers/header.ts:25](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/header.ts#L25)\n\nInjection token that provides access to the current header.\n\nThis token is provided by the [TanStackTableHeader](../classes/TanStackTableHeader.md) directive.\n"
},
{
"path": "docs/framework/angular/reference/variables/TanStackTableToken.md",
"content": "---\nid: TanStackTableToken\ntitle: TanStackTableToken\n---\n\n# Variable: TanStackTableToken\n\n```ts\nconst TanStackTableToken: InjectionToken>;\n```\n\nDefined in: [helpers/table.ts:11](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/table.ts#L11)\n\nInjection token that provides access to the current [AngularTable](../type-aliases/AngularTable.md) instance.\n\nThis token is provided by the [TanStackTable](../classes/TanStackTable.md) directive.\n"
},
{
"path": "docs/framework/lit/guide/table-state.md",
"content": "---\ntitle: Table State (Lit) Guide\n---\n\n## Table State (Lit) Guide\n\nTanStack Table has a simple underlying internal state management system to store and manage the state of the table. It also lets you selectively pull out any state that you need to manage in your own state management. This guide will walk you through the different ways in which you can interact with and manage the state of the table.\n\n### Accessing Table State\n\nYou do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.store.state` table instance API.\n\n```ts\nprivate tableController = new TableController(this);\n\nrender() {\n const table = this.tableController.table({\n columns,\n data,\n ...\n })\n\n console.log(table.store.state) //access the entire internal state\n console.log(table.store.state.rowSelection) //access just the row selection state\n // ...\n}\n```\n\n### Custom Initial State\n\nIf all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance.\n\n```ts\nrender() {\n const table = this.tableController.table({\n columns,\n data,\n initialState: {\n columnOrder: ['age', 'firstName', 'lastName'], //customize the initial column order\n columnVisibility: {\n id: false //hide the id column by default\n },\n expanded: true, //expand all rows by default\n sorting: [\n {\n id: 'age',\n desc: true //sort by age in descending order by default\n }\n ]\n },\n })\n\n return html`...`;\n}\n```\n\n> **Note**: Only specify each particular state in either `initialState` or `state`, but not both. If you pass in a particular state value to both `initialState` and `state`, the initialized state in `state` will take overwrite any corresponding value in `initialState`.\n\n### Controlled State\n\nIf you need easy access to the table state in other areas of your application, TanStack Table makes it easy to control and manage any or all of the table state in your own state management system. You can do this by passing in your own state and state management functions to the `state` and `on[State]Change` table options.\n\n#### Individual Controlled State\n\nYou can control just the state that you need easy access to. You do NOT have to control all of the table state if you do not need to. It is recommended to only control the state that you need on a case-by-case basis.\n\nIn order to control a particular state, you need to both pass in the corresponding `state` value and the `on[State]Change` function to the table instance.\n\nLet's take filtering, sorting, and pagination as an example in a \"manual\" server-side data fetching scenario. You can store the filtering, sorting, and pagination state in your own state management, but leave out any other state like column order, column visibility, etc. if your API does not care about those values.\n\n```jsx\nimport {html} from \"lit\";\n\n@customElement('my-component')\nclass MyComponent extends LitElement {\n @state()\n private _sorting: SortingState = []\n\n render() {\n const table = this.tableController.table({\n columns,\n data,\n state: {\n sorting: this._sorting,\n },\n onSortingChange: updaterOrValue => {\n if (typeof updaterOrValue === 'function') {\n this._sorting = updaterOrValue(this._sorting)\n } else {\n this._sorting = updaterOrValue\n }\n },\n getSortedRowModel: createSortedRowModel(sortFns),\n getCoreRowModel: createCoreRowModel(),\n })\n\n return html`...`\n }\n}\n//...\n```\n\n#### Fully Controlled State\n\nAlternatively, you can control the entire table state with the `onStateChange` table option. It will hoist out the entire table state into your own state management system. Be careful with this approach, as you might find that raising some frequently changing state values up a component tree, like `columnSizingInfo` state`, might cause bad performance issues.\n\nA couple of more tricks may be needed to make this work. If you use the `onStateChange` table option, the initial values of the `state` must be populated with all of the relevant state values for all of the features that you want to use. You can either manually type out all of the initial state values, or use the `table.setOptions` API in a special way as shown below.\n\n```ts\n\nprivate tableController = new TableController(this);\n\n@state()\nprivate _tableState;\n\nrender() {\n const table = this.tableController.table({\n columns,\n data,\n getCoreRowModel: createCoreRowModel(),\n getSortedRowModel: createSortedRowModel(sortFns)\n })\n const state = { ...table.initialState, ...this.tableState };\n table.setOptions(prev => ({\n ...prev,\n state,\n onStateChange: updater => {\n this.tableState =\n updater instanceof Function ? updater(state) : updater //any state changes will be pushed up to our own state management\n },\n }))\n\n return html`...`;\n}\n```\n\n### On State Change Callbacks\n\nSo far, we have seen the `on[State]Change` and `onStateChange` table options work to \"hoist\" the table state changes into our own state management. However, there are a few things about these using these options that you should be aware of.\n\n#### 1. **State Change Callbacks MUST have their corresponding state value in the `state` option**.\n\nSpecifying an `on[State]Change` callback tells the table instance that this will be a controlled state. If you do not specify the corresponding `state` value, that state will be \"frozen\" with its initial value.\n\n```jsx\n@state()\nprivate _sorting = [];\n//...\nrender() {\n const table = this.tableController.table({\n columns,\n data,\n state: {\n sorting: this._sorting,\n },\n onSortingChange: updaterOrValue => {\n if (typeof updaterOrValue === 'function') {\n this._sorting = updaterOrValue(this._sorting)\n } else {\n this._sorting = updaterOrValue\n }\n },\n getSortedRowModel: createSortedRowModel(sortFns),\n getCoreRowModel: createCoreRowModel(),\n })\n\n return html`...`;\n}\n```\n\n#### 2. **Updaters can either be raw values or callback functions**.\n\nThe `on[State]Change` and `onStateChange` callbacks work exactly like the `setState` functions in React. The updater values can either be a new state value or a callback function that takes the previous state value and returns the new state value.\n\nWhat implications does this have? It means that if you want to add in some extra logic in any of the `on[State]Change` callbacks, you can do so, but you need to check whether or not the new incoming updater value is a function or value.\n\nThis is why you will see the `updater instanceof Function ? updater(state.value) : updater` pattern in the examples above. This pattern checks if the updater is a function, and if it is, it calls the function with the previous state value to get the new state value.\n\n### State Types\n\nAll complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.\n\n```tsx\nimport { TableController, type SortingState } from '@tanstack/lit-table'\n//...\n@state()\nprivate _sorting: SortingState = [\n {\n id: 'age', //you should get autocomplete for the `id` and `desc` properties\n desc: true,\n }\n]\n```\n"
},
{
"path": "docs/framework/lit/lit-table.md",
"content": "---\ntitle: Lit Table\n---\n\nThe `@tanstack/lit-table` adapter is a wrapper around the core table logic. Most of it's job is related to managing state the \"lit\" way, providing types and the rendering implementation of cell/header/footer templates.\n\n## Exports\n\n`@tanstack/lit-table` re-exports all of `@tanstack/table-core`'s APIs and the following:\n\n### `TableController`\n\nIs a reactive controller that provides a `table` API that takes an `options` object and returns a table instance.\n\n```ts\nimport { TableController } from '@tanstack/lit-table'\n\n@customElement('my-table-element')\nclass MyTableElement extends LitElement {\n private tableController = new TableController(this)\n\n protected render() {\n const table = this.tableController.table(options)\n // ...render your table\n }\n}\n```\n\n### `flexRender`\n\nA utility function for rendering cell/header/footer templates with dynamic values.\n\nExample:\n\n```jsx\nimport { flexRender } from '@tanstack/lit-table'\n//...\nreturn html`\n\n ${table\n .getRowModel()\n .rows.slice(0, 10)\n .map(\n row => html`\n
![\"TanStack](\"./media/header_table.png\")
\n![\"CodeRabbit\"](\"https://tanstack.com/assets/coderabbit-dark-CMcuvjEy.svg\")
\n\t\t\t![\"Cloudflare\"](\"https://tanstack.com/assets/cloudflare-white-DQDB7UaL.svg\")
\n\t\t![\"AG](\"./media/ag-grid-dark.svg\")
\n ![\"Table](\"./media/partner_logo.svg\"){kind=logo}
\n![](\"https://blog.ag-grid.com/content/images/2021/02/new-logo-1.png\"){kind=logo}
\n \n![\"npm](\"https://img.shields.io/npm/dm/@tanstack/react-table.svg\")
\n![\"github](\"https://img.shields.io/github/stars/tanstack/react-table.svg?style=social&label=Star\")
\n![\"semantic-release\"](\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\"){kind=icon}
\n![\"Best](\"https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%2Ftable%26since=daily\")
![\"Follow](\"https://img.shields.io/twitter/follow/tan_stack.svg?style=social\")