Skip to content
Docs
/
Getting Started

Getting Started

Installation

Solid Table is now a part of TanStack, and is published to NPM as @tanstack/solid-table, and you'll be able to add it like:

npm install @tanstack/solid-table@alpha

Quick Start

At the heart of every Solid Table is the createTableInstance function and the table instance object that it returns. This instance object contains everything you'll need to build a table and interact with its state.

💡

In Solid Table, you the developer are responsible for rendering the UI (markup and styles) of your table, Seact Table exists to make the process much easier to wire up your own table UI.

To show you how this works. Let's start with a very basic table example.

Getting your data

When thinking about a table structure, you typically have rows which contain columns. While table configurations can get far more complex with nested columns, subrows, etc. for this basic quick start, we need to define some data that resembles this structure.

const data = [
  {
    col1: 'Hello',
    col2: 'World',
  },
  {
    col1: 'react-table',
    col2: 'rocks',
  },
  {
    col1: 'whatever',
    col2: 'you want',
  },
]

Defining columns

Now that we have some data, let's create a core table and define some columns to pass to the createTable function.

const table = createTable();

const columns = table.createColumns([
  table.createDataColumn('col1', {
    header: "Column 1"
  }),
  table.createDataColumn('col2', {
    header: "Column 2"
  })
])

Using the createTableInstance function

function Table() {
  const instance = createTableInstance(table, {
    columns,
    data,
    getCoreRowModel: getCoreRowModelSync()
  });

  return (
    <table>
      <thead>
        <tr>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
        </tr>
      </tbody>
    </table>
  )
}

Applying the table instance to markup

Now that we have our table structure, we can use the instance to make it come to life!

function Table() {
  const instance = createTableInstance(table, {
    columns,
    data,
    getCoreRowModel: getCoreRowModelSync()
  });

  return (
    // apply the table props
    <table {...instance.getTableProps()}>
      <thead>
        {/* Loop over the header rows */}
        <For each={instance.getHeaderGroups()}>
          {headerGroup => (
            // Apply the header row props
            <tr {...headerGroup.getHeaderGroupProps()}>
              {/* Loop over the headers in each row */}
              <For each={headerGroup.headers}>
                {header => (
                  // Apply the header cell props
                  <th {...header.getHeaderProps()}>
                    {// Render the header
                    header.renderHeader()}
                  </th>
                )}
              </For>
            </tr>
          )}
        </For>
      </thead>
      {/* Apply the body props */}
      <tbody {...instance.getTableBodyProps()}>
        {/* Loop over the table rows */}
        <For each={instance.getRowModel().rows}>
          {row => (
            // Apply the row props
            <tr {...row.getRowProps()}>
              {/* Loop over the rows cells */}
              <For each={row.getVisibleCells()}>
                {cell => (
                  // Apply the cell props
                  <td {...cell.getCellProps()}>
                    {// Render the cell contents
                    cell.renderCell()}
                  </td>
                )}
              </For>
            </tr>
          )}
        </For>
      </tbody>
    </table>
  )
}
Options