// Generated by scripts/generate-manifest.mjs. Do not edit by hand.
import type { AddOnCompiled } from '../../../../../types.js'

type TemplateRecord = Record<string, any>
type TemplateAddOn = TemplateRecord & {
  integrations?: Array<TemplateRecord>
  routes?: Array<TemplateRecord>
}

type TemplateRenderContext = {
  [key: string]: any
  packageManager: any
  projectName: any
  typescript: any
  tailwind: any
  blank: any
  js: any
  jsx: any
  fileRouter: any
  codeRouter: any
  routerOnly: any
  includeExamples: any
  addOnEnabled: Record<string, any>
  addOnOption: Record<string, any>
  addOns: Array<TemplateAddOn>
  integrations: Array<TemplateRecord>
  routes: Array<TemplateRecord>
  getPackageManagerAddScript: (...args: Array<any>) => string
  getPackageManagerRunScript: (...args: Array<any>) => string
  getPackageManagerExecuteScript: (...args: Array<any>) => string
  relativePath: (...args: Array<any>) => string
  integrationImportContent: (...args: Array<any>) => string
  integrationImportCode: (...args: Array<any>) => string | undefined
  renderTemplate: (content: string) => string
  ignoreFile: () => never
}

type TemplateRenderer = (context: TemplateRenderContext) => string | undefined

function __escapeXML(value: unknown) {
  if (value === undefined || value === null) {
    return ''
  }
  return String(value).replace(/[&<>'"]/g, (character) => {
    switch (character) {
      case '&':
        return '&amp;'
      case '<':
        return '&lt;'
      case '>':
        return '&gt;'
      case '"':
        return '&#34;'
      case "'":
        return '&#39;'
      default:
        return character
    }
  })
}

export function getManifestTemplateKey(template: string) {
  let hash = 0x811c9dc5
  for (let i = 0; i < template.length; i++) {
    hash ^= template.charCodeAt(i)
    hash = Math.imul(hash, 0x01000193) >>> 0
  }

  return `${hash.toString(16).padStart(8, '0')}:${template.length}`
}

function __render_cfd368cd_11500(context: TemplateRenderContext) {
  const {
    packageManager,
    projectName,
    typescript,
    tailwind,
    blank,
    js,
    jsx,
    fileRouter,
    codeRouter,
    routerOnly,
    includeExamples,
    addOnEnabled,
    addOnOption,
    addOns,
    integrations,
    routes,
    getPackageManagerAddScript,
    getPackageManagerRunScript,
    getPackageManagerExecuteScript,
    relativePath,
    integrationImportContent,
    integrationImportCode,
    renderTemplate,
    ignoreFile,
  } = context
  let __output = ''
  const __append = (value: unknown) => {
    if (value !== undefined && value !== null) {
      __output += String(value)
    }
  }
  __append("import React from 'react'\nimport { ")
 if (fileRouter) { 
  __append("createFileRoute")
 } else { 
  __append("createRoute")
 } 
  __append(" } from '@tanstack/react-router'\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  sortingFns,\n  useReactTable,\n} from '@tanstack/react-table'\nimport { compareItems, rankItem } from '@tanstack/match-sorter-utils'\n\nimport { makeData } from '#/data/demo-table-data'\n\nimport type {\n  Column,\n  ColumnDef,\n  ColumnFiltersState,\n  FilterFn,\n  SortingFn,\n} from '@tanstack/react-table'\nimport type { RankingInfo } from '@tanstack/match-sorter-utils'\n")
 if (codeRouter) { 
  __append("\nimport type { RootRoute } from '@tanstack/react-router'\n")
 } 
  __append("\nimport type { Person } from '#/data/demo-table-data'\n")
 if (fileRouter) { 
  __append("\nexport const Route = createFileRoute('/demo/table')({\n  component: TableDemo,\n})\n")
 } 
  __append("\n\ndeclare module '@tanstack/react-table' {\n  interface FilterFns {\n    fuzzy: FilterFn<unknown>\n  }\n  interface FilterMeta {\n    itemRank: RankingInfo\n  }\n}\n\n// Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils)\nconst fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {\n  // Rank the item\n  const itemRank = rankItem(row.getValue(columnId), value)\n\n  // Store the itemRank info\n  addMeta({\n    itemRank,\n  })\n\n  // Return if the item should be filtered in/out\n  return itemRank.passed\n}\n\n// Define a custom fuzzy sort function that will sort by rank if the row has ranking information\nconst fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {\n  let dir = 0\n\n  // Only sort by rank if the column has ranking information\n  if (rowA.columnFiltersMeta[columnId]) {\n    dir = compareItems(\n      rowA.columnFiltersMeta[columnId]?.itemRank!,\n      rowB.columnFiltersMeta[columnId]?.itemRank!,\n    )\n  }\n\n  // Provide an alphanumeric fallback for when the item ranks are equal\n  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir\n}\n\nfunction TableDemo() {\n  const rerender = React.useReducer(() => ({}), {})[1]\n\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    [],\n  )\n  const [globalFilter, setGlobalFilter] = React.useState('')\n\n  const columns = React.useMemo<ColumnDef<Person, any>[]>(\n    () => [\n      {\n        accessorKey: 'id',\n        filterFn: 'equalsString', //note: normal non-fuzzy filter column - exact match required\n      },\n      {\n        accessorKey: 'firstName',\n        cell: (info) => info.getValue(),\n        filterFn: 'includesStringSensitive', //note: normal non-fuzzy filter column - case sensitive\n      },\n      {\n        accessorFn: (row) => row.lastName,\n        id: 'lastName',\n        cell: (info) => info.getValue(),\n        header: () => <span>Last Name</span>,\n        filterFn: 'includesString', //note: normal non-fuzzy filter column - case insensitive\n      },\n      {\n        accessorFn: (row) => `${row.firstName} ${row.lastName}`,\n        id: 'fullName',\n        header: 'Full Name',\n        cell: (info) => info.getValue(),\n        filterFn: 'fuzzy', //using our custom fuzzy filter function\n        // filterFn: fuzzyFilter, //or just define with the function\n        sortingFn: fuzzySort, //sort by fuzzy rank (falls back to alphanumeric)\n      },\n    ],\n    [],\n  )\n\n  const [data, setData] = React.useState<Person[]>(() => makeData(5_000))\n  const refreshData = () => setData((_old) => makeData(50_000)) //stress test\n\n  const table = useReactTable({\n    data,\n    columns,\n    filterFns: {\n      fuzzy: fuzzyFilter, //define as a filter function that can be used in column definitions\n    },\n    state: {\n      columnFilters,\n      globalFilter,\n    },\n    onColumnFiltersChange: setColumnFilters,\n    onGlobalFilterChange: setGlobalFilter,\n    globalFilterFn: 'fuzzy', //apply fuzzy filter to the global filter (most common use case for fuzzy filter)\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(), //client side filtering\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    debugTable: true,\n    debugHeaders: true,\n    debugColumns: false,\n  })\n\n  //apply the fuzzy sort if the fullName column is being filtered\n  React.useEffect(() => {\n    if (table.getState().columnFilters[0]?.id === 'fullName') {\n      if (table.getState().sorting[0]?.id !== 'fullName') {\n        table.setSorting([{ id: 'fullName', desc: false }])\n      }\n    }\n  }, [table.getState().columnFilters[0]?.id])\n\n  return (\n    <main className=\"demo-page demo-page-wide\">\n      <div>\n        <p className=\"island-kicker mb-2\">TanStack Table</p>\n        <h1 className=\"demo-title mb-6\">Table Demo</h1>\n        <DebouncedInput\n          value={globalFilter ?? ''}\n          onChange={(value) => setGlobalFilter(String(value))}\n          className=\"demo-input\"\n          placeholder=\"Search all columns...\"\n        />\n      </div>\n      <div className=\"h-4\" />\n      <div className=\"demo-table-shell\">\n        <table className=\"demo-table text-sm\">\n          <thead>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <tr key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <th\n                      key={header.id}\n                      colSpan={header.colSpan}\n                      className=\"px-4 py-3 text-left\"\n                    >\n                      {header.isPlaceholder ? null : (\n                        <>\n                          <div\n                            {...{\n                              className: header.column.getCanSort()\n                                ? 'cursor-pointer select-none transition-colors hover:text-[var(--lagoon-deep)]'\n                                : '',\n                              onClick: header.column.getToggleSortingHandler(),\n                            }}\n                          >\n                            {flexRender(\n                              header.column.columnDef.header,\n                              header.getContext(),\n                            )}\n                            {{\n                              asc: ' 🔼',\n                              desc: ' 🔽',\n                            }[header.column.getIsSorted() as string] ?? null}\n                          </div>\n                          {header.column.getCanFilter() ? (\n                            <div className=\"mt-2\">\n                              <Filter column={header.column} />\n                            </div>\n                          ) : null}\n                        </>\n                      )}\n                    </th>\n                  )\n                })}\n              </tr>\n            ))}\n          </thead>\n          <tbody>\n            {table.getRowModel().rows.map((row) => {\n              return (\n                <tr\n                  key={row.id}\n                  className=\"transition-colors\"\n                >\n                  {row.getVisibleCells().map((cell) => {\n                    return (\n                      <td key={cell.id} className=\"px-4 py-3\">\n                        {flexRender(\n                          cell.column.columnDef.cell,\n                          cell.getContext(),\n                        )}\n                      </td>\n                    )\n                  })}\n                </tr>\n              )\n            })}\n          </tbody>\n        </table>\n      </div>\n      <div className=\"h-4\" />\n      <div className=\"demo-muted flex flex-wrap items-center gap-2\">\n        <button\n          className=\"demo-button demo-button-secondary\"\n          onClick={() => table.setPageIndex(0)}\n          disabled={!table.getCanPreviousPage()}\n        >\n          {'<<'}\n        </button>\n        <button\n          className=\"demo-button demo-button-secondary\"\n          onClick={() => table.previousPage()}\n          disabled={!table.getCanPreviousPage()}\n        >\n          {'<'}\n        </button>\n        <button\n          className=\"demo-button demo-button-secondary\"\n          onClick={() => table.nextPage()}\n          disabled={!table.getCanNextPage()}\n        >\n          {'>'}\n        </button>\n        <button\n          className=\"demo-button demo-button-secondary\"\n          onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n          disabled={!table.getCanNextPage()}\n        >\n          {'>>'}\n        </button>\n        <span className=\"flex items-center gap-1\">\n          <div>Page</div>\n          <strong>\n            {table.getState().pagination.pageIndex + 1} of{' '}\n            {table.getPageCount()}\n          </strong>\n        </span>\n        <span className=\"flex items-center gap-1\">\n          | Go to page:\n          <input\n            type=\"number\"\n            defaultValue={table.getState().pagination.pageIndex + 1}\n            onChange={(e) => {\n              const page = e.target.value ? Number(e.target.value) - 1 : 0\n              table.setPageIndex(page)\n            }}\n            className=\"demo-input demo-input-fit py-1\"\n          />\n        </span>\n        <select\n          value={table.getState().pagination.pageSize}\n          onChange={(e) => {\n            table.setPageSize(Number(e.target.value))\n          }}\n          className=\"demo-select demo-input-fit py-1\"\n        >\n          {[10, 20, 30, 40, 50].map((pageSize) => (\n            <option key={pageSize} value={pageSize}>\n              Show {pageSize}\n            </option>\n          ))}\n        </select>\n      </div>\n      <div className=\"demo-muted mt-4\">\n        {table.getPrePaginationRowModel().rows.length} Rows\n      </div>\n      <div className=\"mt-4 flex gap-2\">\n        <button\n          onClick={() => rerender()}\n          className=\"demo-button\"\n        >\n          Force Rerender\n        </button>\n        <button\n          onClick={() => refreshData()}\n          className=\"demo-button\"\n        >\n          Refresh Data\n        </button>\n      </div>\n      <pre className=\"demo-code-block mt-4 overflow-auto\">\n        {JSON.stringify(\n          {\n            columnFilters: table.getState().columnFilters,\n            globalFilter: table.getState().globalFilter,\n          },\n          null,\n          2,\n        )}\n      </pre>\n    </main>\n  )\n}\n\nfunction Filter({ column }: { column: Column<any, unknown> }) {\n  const columnFilterValue = column.getFilterValue()\n\n  return (\n    <DebouncedInput\n      type=\"text\"\n      value={(columnFilterValue ?? '') as string}\n      onChange={(value) => column.setFilterValue(value)}\n      placeholder={`Search...`}\n      className=\"demo-input py-1\"\n    />\n  )\n}\n\n// A typical debounced input react component\nfunction DebouncedInput({\n  value: initialValue,\n  onChange,\n  debounce = 500,\n  ...props\n}: {\n  value: string | number\n  onChange: (value: string | number) => void\n  debounce?: number\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>) {\n  const [value, setValue] = React.useState(initialValue)\n\n  React.useEffect(() => {\n    setValue(initialValue)\n  }, [initialValue])\n\n  React.useEffect(() => {\n    const timeout = setTimeout(() => {\n      onChange(value)\n    }, debounce)\n\n    return () => clearTimeout(timeout)\n  }, [value])\n\n  return (\n    <input\n      {...props}\n      value={value}\n      onChange={(e) => setValue(e.target.value)}\n    />\n  )\n}\n\n")
 if (codeRouter) { 
  __append("\nexport default (parentRoute: RootRoute) => createRoute({\n  path: '/demo/table',\n  component: TableDemo,\n  getParentRoute: () => parentRoute,\n})\n")
 } 
  __append("\n")
  return __output
}

const templateRenderers: Record<string, TemplateRenderer> = {
  "cfd368cd:11500": __render_cfd368cd_11500,
}

export function hasManifestTemplate(template: string) {
  return getManifestTemplateKey(template) in templateRenderers
}

export function renderManifestTemplate(
  template: string,
  context: TemplateRenderContext,
) {
  const key = getManifestTemplateKey(template)
  const renderer = templateRenderers[key]
  if (!renderer) {
    throw new Error(`Template ${key} was not precompiled into the manifest`)
  }
  return renderer(context) ?? ''
}


export const addOn = {
  "name": "Table",
  "description": "Integrate TanStack Table into your application.",
  "phase": "add-on",
  "modes": [
    "file-router",
    "code-router"
  ],
  "link": "https://tanstack.com/table/latest",
  "type": "add-on",
  "category": "tanstack",
  "color": "#06B6D4",
  "priority": 28,
  "routes": [
    {
      "icon": "Table",
      "url": "/demo/table",
      "name": "TanStack Table",
      "path": "src/routes/demo.table.tsx",
      "jsName": "TableDemo"
    }
  ],
  "id": "table",
  "version": "0.0.0",
  "packageAdditions": {
    "dependencies": {
      "@faker-js/faker": "^10.3.0",
      "@tanstack/match-sorter-utils": "latest",
      "@tanstack/react-table": "latest"
    }
  },
  "readmeIsEjs": false,
  "files": {
    "src/data/demo-table-data.ts": "import { faker } from '@faker-js/faker'\n\nexport type Person = {\n  id: number\n  firstName: string\n  lastName: string\n  age: number\n  visits: number\n  progress: number\n  status: 'relationship' | 'complicated' | 'single'\n  subRows?: Person[]\n}\n\nconst range = (len: number) => {\n  const arr: number[] = []\n  for (let i = 0; i < len; i++) {\n    arr.push(i)\n  }\n  return arr\n}\n\nconst newPerson = (num: number): Person => {\n  return {\n    id: num,\n    firstName: faker.person.firstName(),\n    lastName: faker.person.lastName(),\n    age: faker.number.int(40),\n    visits: faker.number.int(1000),\n    progress: faker.number.int(100),\n    status: faker.helpers.shuffle<Person['status']>([\n      'relationship',\n      'complicated',\n      'single',\n    ])[0]!,\n  }\n}\n\nexport function makeData(...lens: number[]) {\n  const makeDataLevel = (depth = 0): Person[] => {\n    const len = lens[depth]!\n    return range(len).map((index): Person => {\n      return {\n        ...newPerson(index),\n        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,\n      }\n    })\n  }\n\n  return makeDataLevel()\n}\n",
    "src/routes/demo/table.tsx.ejs": "import React from 'react'\nimport { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  sortingFns,\n  useReactTable,\n} from '@tanstack/react-table'\nimport { compareItems, rankItem } from '@tanstack/match-sorter-utils'\n\nimport { makeData } from '#/data/demo-table-data'\n\nimport type {\n  Column,\n  ColumnDef,\n  ColumnFiltersState,\n  FilterFn,\n  SortingFn,\n} from '@tanstack/react-table'\nimport type { RankingInfo } from '@tanstack/match-sorter-utils'\n<% if (codeRouter) { %>\nimport type { RootRoute } from '@tanstack/react-router'\n<% } %>\nimport type { Person } from '#/data/demo-table-data'\n<% if (fileRouter) { %>\nexport const Route = createFileRoute('/demo/table')({\n  component: TableDemo,\n})\n<% } %>\n\ndeclare module '@tanstack/react-table' {\n  interface FilterFns {\n    fuzzy: FilterFn<unknown>\n  }\n  interface FilterMeta {\n    itemRank: RankingInfo\n  }\n}\n\n// Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils)\nconst fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {\n  // Rank the item\n  const itemRank = rankItem(row.getValue(columnId), value)\n\n  // Store the itemRank info\n  addMeta({\n    itemRank,\n  })\n\n  // Return if the item should be filtered in/out\n  return itemRank.passed\n}\n\n// Define a custom fuzzy sort function that will sort by rank if the row has ranking information\nconst fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {\n  let dir = 0\n\n  // Only sort by rank if the column has ranking information\n  if (rowA.columnFiltersMeta[columnId]) {\n    dir = compareItems(\n      rowA.columnFiltersMeta[columnId]?.itemRank!,\n      rowB.columnFiltersMeta[columnId]?.itemRank!,\n    )\n  }\n\n  // Provide an alphanumeric fallback for when the item ranks are equal\n  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir\n}\n\nfunction TableDemo() {\n  const rerender = React.useReducer(() => ({}), {})[1]\n\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    [],\n  )\n  const [globalFilter, setGlobalFilter] = React.useState('')\n\n  const columns = React.useMemo<ColumnDef<Person, any>[]>(\n    () => [\n      {\n        accessorKey: 'id',\n        filterFn: 'equalsString', //note: normal non-fuzzy filter column - exact match required\n      },\n      {\n        accessorKey: 'firstName',\n        cell: (info) => info.getValue(),\n        filterFn: 'includesStringSensitive', //note: normal non-fuzzy filter column - case sensitive\n      },\n      {\n        accessorFn: (row) => row.lastName,\n        id: 'lastName',\n        cell: (info) => info.getValue(),\n        header: () => <span>Last Name</span>,\n        filterFn: 'includesString', //note: normal non-fuzzy filter column - case insensitive\n      },\n      {\n        accessorFn: (row) => `${row.firstName} ${row.lastName}`,\n        id: 'fullName',\n        header: 'Full Name',\n        cell: (info) => info.getValue(),\n        filterFn: 'fuzzy', //using our custom fuzzy filter function\n        // filterFn: fuzzyFilter, //or just define with the function\n        sortingFn: fuzzySort, //sort by fuzzy rank (falls back to alphanumeric)\n      },\n    ],\n    [],\n  )\n\n  const [data, setData] = React.useState<Person[]>(() => makeData(5_000))\n  const refreshData = () => setData((_old) => makeData(50_000)) //stress test\n\n  const table = useReactTable({\n    data,\n    columns,\n    filterFns: {\n      fuzzy: fuzzyFilter, //define as a filter function that can be used in column definitions\n    },\n    state: {\n      columnFilters,\n      globalFilter,\n    },\n    onColumnFiltersChange: setColumnFilters,\n    onGlobalFilterChange: setGlobalFilter,\n    globalFilterFn: 'fuzzy', //apply fuzzy filter to the global filter (most common use case for fuzzy filter)\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(), //client side filtering\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    debugTable: true,\n    debugHeaders: true,\n    debugColumns: false,\n  })\n\n  //apply the fuzzy sort if the fullName column is being filtered\n  React.useEffect(() => {\n    if (table.getState().columnFilters[0]?.id === 'fullName') {\n      if (table.getState().sorting[0]?.id !== 'fullName') {\n        table.setSorting([{ id: 'fullName', desc: false }])\n      }\n    }\n  }, [table.getState().columnFilters[0]?.id])\n\n  return (\n    <main className=\"demo-page demo-page-wide\">\n      <div>\n        <p className=\"island-kicker mb-2\">TanStack Table</p>\n        <h1 className=\"demo-title mb-6\">Table Demo</h1>\n        <DebouncedInput\n          value={globalFilter ?? ''}\n          onChange={(value) => setGlobalFilter(String(value))}\n          className=\"demo-input\"\n          placeholder=\"Search all columns...\"\n        />\n      </div>\n      <div className=\"h-4\" />\n      <div className=\"demo-table-shell\">\n        <table className=\"demo-table text-sm\">\n          <thead>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <tr key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <th\n                      key={header.id}\n                      colSpan={header.colSpan}\n                      className=\"px-4 py-3 text-left\"\n                    >\n                      {header.isPlaceholder ? null : (\n                        <>\n                          <div\n                            {...{\n                              className: header.column.getCanSort()\n                                ? 'cursor-pointer select-none transition-colors hover:text-[var(--lagoon-deep)]'\n                                : '',\n                              onClick: header.column.getToggleSortingHandler(),\n                            }}\n                          >\n                            {flexRender(\n                              header.column.columnDef.header,\n                              header.getContext(),\n                            )}\n                            {{\n                              asc: ' 🔼',\n                              desc: ' 🔽',\n                            }[header.column.getIsSorted() as string] ?? null}\n                          </div>\n                          {header.column.getCanFilter() ? (\n                            <div className=\"mt-2\">\n                              <Filter column={header.column} />\n                            </div>\n                          ) : null}\n                        </>\n                      )}\n                    </th>\n                  )\n                })}\n              </tr>\n            ))}\n          </thead>\n          <tbody>\n            {table.getRowModel().rows.map((row) => {\n              return (\n                <tr\n                  key={row.id}\n                  className=\"transition-colors\"\n                >\n                  {row.getVisibleCells().map((cell) => {\n                    return (\n                      <td key={cell.id} className=\"px-4 py-3\">\n                        {flexRender(\n                          cell.column.columnDef.cell,\n                          cell.getContext(),\n                        )}\n                      </td>\n                    )\n                  })}\n                </tr>\n              )\n            })}\n          </tbody>\n        </table>\n      </div>\n      <div className=\"h-4\" />\n      <div className=\"demo-muted flex flex-wrap items-center gap-2\">\n        <button\n          className=\"demo-button demo-button-secondary\"\n          onClick={() => table.setPageIndex(0)}\n          disabled={!table.getCanPreviousPage()}\n        >\n          {'<<'}\n        </button>\n        <button\n          className=\"demo-button demo-button-secondary\"\n          onClick={() => table.previousPage()}\n          disabled={!table.getCanPreviousPage()}\n        >\n          {'<'}\n        </button>\n        <button\n          className=\"demo-button demo-button-secondary\"\n          onClick={() => table.nextPage()}\n          disabled={!table.getCanNextPage()}\n        >\n          {'>'}\n        </button>\n        <button\n          className=\"demo-button demo-button-secondary\"\n          onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n          disabled={!table.getCanNextPage()}\n        >\n          {'>>'}\n        </button>\n        <span className=\"flex items-center gap-1\">\n          <div>Page</div>\n          <strong>\n            {table.getState().pagination.pageIndex + 1} of{' '}\n            {table.getPageCount()}\n          </strong>\n        </span>\n        <span className=\"flex items-center gap-1\">\n          | Go to page:\n          <input\n            type=\"number\"\n            defaultValue={table.getState().pagination.pageIndex + 1}\n            onChange={(e) => {\n              const page = e.target.value ? Number(e.target.value) - 1 : 0\n              table.setPageIndex(page)\n            }}\n            className=\"demo-input demo-input-fit py-1\"\n          />\n        </span>\n        <select\n          value={table.getState().pagination.pageSize}\n          onChange={(e) => {\n            table.setPageSize(Number(e.target.value))\n          }}\n          className=\"demo-select demo-input-fit py-1\"\n        >\n          {[10, 20, 30, 40, 50].map((pageSize) => (\n            <option key={pageSize} value={pageSize}>\n              Show {pageSize}\n            </option>\n          ))}\n        </select>\n      </div>\n      <div className=\"demo-muted mt-4\">\n        {table.getPrePaginationRowModel().rows.length} Rows\n      </div>\n      <div className=\"mt-4 flex gap-2\">\n        <button\n          onClick={() => rerender()}\n          className=\"demo-button\"\n        >\n          Force Rerender\n        </button>\n        <button\n          onClick={() => refreshData()}\n          className=\"demo-button\"\n        >\n          Refresh Data\n        </button>\n      </div>\n      <pre className=\"demo-code-block mt-4 overflow-auto\">\n        {JSON.stringify(\n          {\n            columnFilters: table.getState().columnFilters,\n            globalFilter: table.getState().globalFilter,\n          },\n          null,\n          2,\n        )}\n      </pre>\n    </main>\n  )\n}\n\nfunction Filter({ column }: { column: Column<any, unknown> }) {\n  const columnFilterValue = column.getFilterValue()\n\n  return (\n    <DebouncedInput\n      type=\"text\"\n      value={(columnFilterValue ?? '') as string}\n      onChange={(value) => column.setFilterValue(value)}\n      placeholder={`Search...`}\n      className=\"demo-input py-1\"\n    />\n  )\n}\n\n// A typical debounced input react component\nfunction DebouncedInput({\n  value: initialValue,\n  onChange,\n  debounce = 500,\n  ...props\n}: {\n  value: string | number\n  onChange: (value: string | number) => void\n  debounce?: number\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>) {\n  const [value, setValue] = React.useState(initialValue)\n\n  React.useEffect(() => {\n    setValue(initialValue)\n  }, [initialValue])\n\n  React.useEffect(() => {\n    const timeout = setTimeout(() => {\n      onChange(value)\n    }, debounce)\n\n    return () => clearTimeout(timeout)\n  }, [value])\n\n  return (\n    <input\n      {...props}\n      value={value}\n      onChange={(e) => setValue(e.target.value)}\n    />\n  )\n}\n\n<% if (codeRouter) { %>\nexport default (parentRoute: RootRoute) => createRoute({\n  path: '/demo/table',\n  component: TableDemo,\n  getParentRoute: () => parentRoute,\n})\n<% } %>\n"
  },
  "deletedFiles": [],
  "smallLogo": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 633 633\"><defs><linearGradient id=\"b\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"71.65%\"><stop offset=\"0%\" stop-color=\"#6BDAFF\"/><stop offset=\"31.922%\" stop-color=\"#F9FFB5\"/><stop offset=\"70.627%\" stop-color=\"#FFA770\"/><stop offset=\"100%\" stop-color=\"#FF7373\"/></linearGradient><linearGradient id=\"d\" x1=\"43.996%\" x2=\"53.441%\" y1=\"8.54%\" y2=\"93.872%\"><stop offset=\"0%\" stop-color=\"#673800\"/><stop offset=\"100%\" stop-color=\"#B65E00\"/></linearGradient><linearGradient id=\"e\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#2F8A00\"/><stop offset=\"100%\" stop-color=\"#90FF57\"/></linearGradient><linearGradient id=\"f\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#2F8A00\"/><stop offset=\"100%\" stop-color=\"#90FF57\"/></linearGradient><linearGradient id=\"g\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#2F8A00\"/><stop offset=\"100%\" stop-color=\"#90FF57\"/></linearGradient><linearGradient id=\"h\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#2F8A00\"/><stop offset=\"100%\" stop-color=\"#90FF57\"/></linearGradient><linearGradient id=\"i\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#2F8A00\"/><stop offset=\"100%\" stop-color=\"#90FF57\"/></linearGradient><linearGradient id=\"j\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#2F8A00\"/><stop offset=\"100%\" stop-color=\"#90FF57\"/></linearGradient><linearGradient id=\"k\" x1=\"92.9%\" x2=\"8.641%\" y1=\"45.768%\" y2=\"54.892%\"><stop offset=\"0%\" stop-color=\"#EE2700\"/><stop offset=\"100%\" stop-color=\"#FF008E\"/></linearGradient><linearGradient id=\"l\" x1=\"61.109%\" x2=\"43.717%\" y1=\"3.633%\" y2=\"43.072%\"><stop offset=\"0%\" stop-color=\"#FFF400\"/><stop offset=\"100%\" stop-color=\"#3C8700\"/></linearGradient><linearGradient id=\"m\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#FFDF00\"/><stop offset=\"100%\" stop-color=\"#FF9D00\"/></linearGradient><linearGradient id=\"n\" x1=\"127.279%\" x2=\"0%\" y1=\"49.778%\" y2=\"50.222%\"><stop offset=\"0%\" stop-color=\"#FFA400\"/><stop offset=\"100%\" stop-color=\"#FF5E00\"/></linearGradient><linearGradient id=\"o\" x1=\"127.279%\" x2=\"0%\" y1=\"47.531%\" y2=\"52.469%\"><stop offset=\"0%\" stop-color=\"#FFA400\"/><stop offset=\"100%\" stop-color=\"#FF5E00\"/></linearGradient><linearGradient id=\"p\" x1=\"127.279%\" x2=\"0%\" y1=\"46.195%\" y2=\"53.805%\"><stop offset=\"0%\" stop-color=\"#FFA400\"/><stop offset=\"100%\" stop-color=\"#FF5E00\"/></linearGradient><linearGradient id=\"q\" x1=\"127.279%\" x2=\"0%\" y1=\"35.33%\" y2=\"64.67%\"><stop offset=\"0%\" stop-color=\"#FFA400\"/><stop offset=\"100%\" stop-color=\"#FF5E00\"/></linearGradient><linearGradient id=\"r\" x1=\"127.279%\" x2=\"0%\" y1=\"4.875%\" y2=\"95.125%\"><stop offset=\"0%\" stop-color=\"#FFA400\"/><stop offset=\"100%\" stop-color=\"#FF5E00\"/></linearGradient><linearGradient id=\"s\" x1=\"78.334%\" x2=\"31.668%\" y1=\"0%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#FFA400\"/><stop offset=\"100%\" stop-color=\"#FF5E00\"/></linearGradient><linearGradient id=\"t\" x1=\"57.913%\" x2=\"44.88%\" y1=\"0%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#FFA400\"/><stop offset=\"100%\" stop-color=\"#FF5E00\"/></linearGradient><linearGradient id=\"u\" x1=\"50.495%\" x2=\"49.68%\" y1=\"0%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#FFA400\"/><stop offset=\"100%\" stop-color=\"#FF5E00\"/></linearGradient><circle id=\"a\" cx=\"308.5\" cy=\"308.5\" r=\"308.5\"/><circle id=\"v\" cx=\"307.5\" cy=\"308.5\" r=\"316.5\"/></defs><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(9 8)\"><mask id=\"c\" fill=\"#fff\"><use xlink:href=\"#a\"/></mask><use xlink:href=\"#a\" fill=\"url(#b)\"/><ellipse cx=\"81.5\" cy=\"602.5\" fill=\"#015064\" stroke=\"#00CFE2\" stroke-width=\"25\" mask=\"url(#c)\" rx=\"214.5\" ry=\"185.968\"/><ellipse cx=\"535.5\" cy=\"602.5\" fill=\"#015064\" stroke=\"#00CFE2\" stroke-width=\"25\" mask=\"url(#c)\" rx=\"214.5\" ry=\"185.968\"/><ellipse cx=\"81.5\" cy=\"640.5\" fill=\"#015064\" stroke=\"#00A8B8\" stroke-width=\"25\" mask=\"url(#c)\" rx=\"214.5\" ry=\"185.968\"/><ellipse cx=\"535.5\" cy=\"640.5\" fill=\"#015064\" stroke=\"#00A8B8\" stroke-width=\"25\" mask=\"url(#c)\" rx=\"214.5\" ry=\"185.968\"/><ellipse cx=\"81.5\" cy=\"676.5\" fill=\"#015064\" stroke=\"#007782\" stroke-width=\"25\" mask=\"url(#c)\" rx=\"214.5\" ry=\"185.968\"/><ellipse cx=\"535.5\" cy=\"676.5\" fill=\"#015064\" stroke=\"#007782\" stroke-width=\"25\" mask=\"url(#c)\" rx=\"214.5\" ry=\"185.968\"/><g mask=\"url(#c)\"><path fill=\"url(#d)\" stroke=\"#6E3A00\" stroke-width=\"6.088\" d=\"M98.318 88.007c7.691 37.104 16.643 72.442 26.856 106.013 10.212 33.571 25.57 68.934 46.07 106.088l-51.903 11.67c-10.057-60.01-17.232-99.172-21.525-117.487-4.293-18.315-10.989-51.434-20.089-99.357l20.591-6.927\" transform=\"scale(-1 1) rotate(25 -300.37 -553.013)\"/><g stroke=\"#2F8A00\"><path fill=\"url(#e)\" stroke-width=\"9.343\" d=\"M108.544 66.538s-13.54-21.305-37.417-27.785c-15.917-4.321-33.933.31-54.048 13.892C33.464 65.975 47.24 73.52 58.405 75.28c16.749 2.64 50.14-8.74 50.14-8.74Z\" transform=\"rotate(1 -6061.691 5926.397)\"/><path fill=\"url(#f)\" stroke-width=\"9.343\" d=\"M108.544 67.138s-47.187-5.997-81.077 19.936C4.873 104.362-3.782 137.794 1.502 187.369c28.42-29.22 48.758-50.836 61.016-64.846 18.387-21.016 46.026-55.385 46.026-55.385Z\" transform=\"rotate(1 -6061.691 5926.397)\"/><path fill=\"url(#g)\" stroke-width=\"9.343\" d=\"M108.544 66.538c-1.96-21.705 3.98-38.018 17.82-48.94C140.203 6.674 154.85.808 170.303 0c-4.865 21.527-12.373 36.314-22.524 44.361-10.151 8.048-23.23 15.44-39.236 22.177Z\" transform=\"rotate(1 -6061.691 5926.397)\"/><path fill=\"url(#h)\" stroke-width=\"9.343\" d=\"M108.544 67.138c29.838-31.486 61.061-42.776 93.669-33.869C234.82 42.176 253.749 60.785 259 89.096c-34.898-3.657-59.974-6.343-75.228-8.058-15.254-1.716-40.33-6.349-75.228-13.9Z\" transform=\"rotate(1 -6061.691 5926.397)\"/><path fill=\"url(#i)\" stroke-width=\"9.343\" d=\"M108.544 67.138c34.868-9.381 64.503-3.658 88.905 17.17 24.402 20.829 39.656 46.686 45.762 77.571-39.626-7.574-68.4-20.115-86.322-37.624a395.051 395.051 0 0 1-48.345-57.117Z\" transform=\"rotate(1 -6061.691 5926.397)\"/><path fill=\"url(#j)\" stroke-width=\"9.343\" d=\"M108.544 67.138C76.206 82.6 57.608 105.366 52.75 135.436c-4.858 30.07-.292 62.89 13.698 98.462 24.873-41.418 38.905-71.368 42.096-89.849 3.191-18.48 3.191-44.118 0-76.91Z\" transform=\"rotate(1 -6061.691 5926.397)\"/><path stroke-linecap=\"round\" stroke-width=\"5.91\" d=\"M211.284 173.477c-13.851 21.992-23.291 42.022-28.32 60.093-5.03 18.071-8.175 33.143-9.436 45.216\"/><path stroke-linecap=\"round\" stroke-width=\"5.91\" d=\"M209.814 176.884c-23.982 2.565-42.792 10.469-56.428 23.714-13.639 13.245-23.483 26.136-29.536 38.674M219.045 167.299c29.028-7.723 50.972-10.173 65.831-7.352 14.859 2.822 26.807 7.659 35.842 14.51M211.31 172.618c20.29 9.106 38.353 19.052 54.186 29.837 15.833 10.786 27.714 20.99 35.643 30.617\"/></g><path stroke=\"#830305\" stroke-linecap=\"round\" stroke-linejoin=\"bevel\" stroke-width=\"6.937\" d=\"m409.379 398.157-23.176 18.556M328.04 375.516l-22.313 28.398M312.904 353.698l53.18 59.816\"/><path fill=\"url(#k)\" d=\"M67.585 27.463H5.68C1.893 28.148 0 30.38 0 34.16c0 3.78 1.893 6.211 5.68 7.293h67.17l41.751-30.356c2.488-2.646 2.794-5.315.92-8.006s-4.6-3.626-8.177-2.803l-39.76 27.174Z\" transform=\"scale(-1 1) rotate(-9 2092.128 2856.854)\"/><path fill=\"#D8D8D8\" stroke=\"#FFF\" stroke-linecap=\"round\" stroke-linejoin=\"bevel\" stroke-width=\"4.414\" d=\"m402.861 391.51.471-4.088M382.21 388.752l.472-4.087M361.546 385.404l.485-3.845M337.59 371.883l2.56-2.498M324.276 359.567l2.56-2.497\"/></g><ellipse cx=\"308.5\" cy=\"720.5\" fill=\"url(#l)\" mask=\"url(#c)\" rx=\"266\" ry=\"316.5\"/><ellipse cx=\"308.5\" cy=\"720.5\" stroke=\"#6DA300\" stroke-opacity=\".502\" stroke-width=\"26\" mask=\"url(#c)\" rx=\"253\" ry=\"303.5\"/><g mask=\"url(#c)\"><g transform=\"translate(389 -32)\"><circle cx=\"168.5\" cy=\"113.5\" r=\"113.5\" fill=\"url(#m)\"/><circle cx=\"168.5\" cy=\"113.5\" r=\"106\" stroke=\"#FFC900\" stroke-opacity=\".529\" stroke-width=\"15\"/><path stroke=\"url(#n)\" stroke-linecap=\"round\" stroke-linejoin=\"bevel\" stroke-width=\"12\" d=\"M30 113H0\"/><path stroke=\"url(#o)\" stroke-linecap=\"round\" stroke-linejoin=\"bevel\" stroke-width=\"12\" d=\"M33.5 79.5 7 74\"/><path stroke=\"url(#p)\" stroke-linecap=\"round\" stroke-linejoin=\"bevel\" stroke-width=\"12\" d=\"m34 146-29 8\"/><path stroke=\"url(#q)\" stroke-linecap=\"round\" stroke-linejoin=\"bevel\" stroke-width=\"12\" d=\"m45 177-24 13\"/><path stroke=\"url(#r)\" stroke-linecap=\"round\" stroke-linejoin=\"bevel\" stroke-width=\"12\" d=\"m67 204-20 19\"/><path stroke=\"url(#s)\" stroke-linecap=\"round\" stroke-linejoin=\"bevel\" stroke-width=\"12\" d=\"m94.373 227-13.834 22.847\"/><path stroke=\"url(#t)\" stroke-linecap=\"round\" stroke-linejoin=\"bevel\" stroke-width=\"12\" d=\"M127.5 243.5 120 268\"/><path stroke=\"url(#u)\" stroke-linecap=\"round\" stroke-linejoin=\"bevel\" stroke-width=\"12\" d=\"m167.5 252.5.5 24.5\"/></g></g><circle cx=\"307.5\" cy=\"308.5\" r=\"304\" stroke=\"#000\" stroke-width=\"25\"/></g></svg>"
} satisfies AddOnCompiled