📄 tanstack/table/latest/docs/framework/qwik/examples/basic

=======================================================================================================================================================================================================================================================================================================================================================================================

Code ExplorerCode

Interactive SandboxSandbox

src
- index.css
- main.tsx
- vite-env.d.ts
.gitignore
README.md
index.html
package.json
tsconfig.json
tsconfig.node.json
vite.config.ts

tsx

import '@builder.io/qwik/qwikloader.js'
import { render, component$ } from '@builder.io/qwik'

import './index.css'

import {
  createColumnHelper,
  getCoreRowModel,
  flexRender,
  useQwikTable,
} from '@tanstack/qwik-table'

type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  status: string
  progress: number
}

const defaultData: Person[] = [\
  {\
    firstName: 'tanner',\
    lastName: 'linsley',\
    age: 24,\
    visits: 100,\
    status: 'In Relationship',\
    progress: 50,\
  },\
  {\
    firstName: 'tandy',\
    lastName: 'miller',\
    age: 40,\
    visits: 40,\
    status: 'Single',\
    progress: 80,\
  },\
  {\
    firstName: 'joe',\
    lastName: 'dirte',\
    age: 45,\
    visits: 20,\
    status: 'Complicated',\
    progress: 10,\
  },\
  {\
    firstName: 'Anxhi',\
    lastName: 'Rroshi',\
    age: 21,\
    visits: 1,\
    status: 'Unknown',\
    progress: 99,\
  },\
]

const columnHelper = createColumnHelper<Person>()

const columns = [\
  columnHelper.accessor('firstName', {\
    cell: info => info.getValue(),\
    footer: info => info.column.id,\
  }),\
  columnHelper.accessor(row => row.lastName, {\
    id: 'lastName',\
    cell: info => <i>{info.getValue()}</i>,\
    header: () => <span>Last Name</span>,\
    footer: info => info.column.id,\
  }),\
  columnHelper.accessor('age', {\
    header: () => 'Age',\
    cell: info => info.renderValue(),\
    footer: info => info.column.id,\
  }),\
  columnHelper.accessor('visits', {\
    header: () => <span>Visits</span>,\
    footer: info => info.column.id,\
  }),\
  columnHelper.accessor('status', {\
    header: 'Status',\
    footer: info => info.column.id,\
  }),\
  columnHelper.accessor('progress', {\
    header: 'Profile Progress',\
    footer: info => info.column.id,\
  }),\
]

const App = component$(() => {
  const table = useQwikTable({
    columns,
    data: defaultData,
    getCoreRowModel: getCoreRowModel(),
    enableSorting: true,
  })

  return (
    <div class="p-2">
      <table>
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id}>
              {row.getVisibleCells().map(cell => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
        <tfoot>
          {table.getFooterGroups().map(footerGroup => (
            <tr key={footerGroup.id}>
              {footerGroup.headers.map(header => (
                <th key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.footer,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </tfoot>
      </table>
    </div>
  )
})

render(document.getElementById('app') as HTMLElement, <App />)


import '@builder.io/qwik/qwikloader.js'
import { render, component$ } from '@builder.io/qwik'

import './index.css'

import {
  createColumnHelper,
  getCoreRowModel,
  flexRender,
  useQwikTable,
} from '@tanstack/qwik-table'

type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  status: string
  progress: number
}

const defaultData: Person[] = [\
  {\
    firstName: 'tanner',\
    lastName: 'linsley',\
    age: 24,\
    visits: 100,\
    status: 'In Relationship',\
    progress: 50,\
  },\
  {\
    firstName: 'tandy',\
    lastName: 'miller',\
    age: 40,\
    visits: 40,\
    status: 'Single',\
    progress: 80,\
  },\
  {\
    firstName: 'joe',\
    lastName: 'dirte',\
    age: 45,\
    visits: 20,\
    status: 'Complicated',\
    progress: 10,\
  },\
  {\
    firstName: 'Anxhi',\
    lastName: 'Rroshi',\
    age: 21,\
    visits: 1,\
    status: 'Unknown',\
    progress: 99,\
  },\
]

const columnHelper = createColumnHelper<Person>()

const columns = [\
  columnHelper.accessor('firstName', {\
    cell: info => info.getValue(),\
    footer: info => info.column.id,\
  }),\
  columnHelper.accessor(row => row.lastName, {\
    id: 'lastName',\
    cell: info => <i>{info.getValue()}</i>,\
    header: () => <span>Last Name</span>,\
    footer: info => info.column.id,\
  }),\
  columnHelper.accessor('age', {\
    header: () => 'Age',\
    cell: info => info.renderValue(),\
    footer: info => info.column.id,\
  }),\
  columnHelper.accessor('visits', {\
    header: () => <span>Visits</span>,\
    footer: info => info.column.id,\
  }),\
  columnHelper.accessor('status', {\
    header: 'Status',\
    footer: info => info.column.id,\
  }),\
  columnHelper.accessor('progress', {\
    header: 'Profile Progress',\
    footer: info => info.column.id,\
  }),\
]

const App = component$(() => {
  const table = useQwikTable({
    columns,
    data: defaultData,
    getCoreRowModel: getCoreRowModel(),
    enableSorting: true,
  })

  return (
    <div class="p-2">
      <table>
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id}>
              {row.getVisibleCells().map(cell => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
        <tfoot>
          {table.getFooterGroups().map(footerGroup => (
            <tr key={footerGroup.id}>
              {footerGroup.headers.map(header => (
                <th key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.footer,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </tfoot>
      </table>
    </div>
  )
})

render(document.getElementById('app') as HTMLElement, <App />)

AG Grid

Filters

Partners Become a Partner

scarf analytics