Getting Started

Quick Start

At the core of every Svelte Headless Table is the createTable function.

createTable creates a table instance that defines the data source and plugins to use.

# Getting your data

In its most basic form, a table converts data items into rows, and provides columns to access the properties of each data item.

Svelte Headless Table takes the innovative approach of defining the rows and plugins first when creating a table instance, then later defining the columns used to structure the table instance.

To start, define some data in a Svelte store and create your table with createTable.

const data = readable([
  { name: 'Ada Lovelace', age: 21 },
  { name: 'Barbara Liskov', age: 52 },
  { name: 'Richard Hamming', age: 38 },
]);

const table = createTable(data);

# Defining your columns

Once we have our table instance, we can create columns to access the values of each data item.

const columns = table.createColumns([
  table.column({
    header: 'Name',
    accessor: 'name',
  }),
  table.column({
    header: 'Age',
    accessor: 'age',
  }),
]);

# Creating the view model

Now that we've defined our data source and columns, we can get the view model for our first table UI.

const {
  headerRows,
  rows,
  tableAttrs,
  tableBodyAttrs,
} = table.createViewModel(columns);

# Applying to markup

HTML tables have a standard structure.

<table>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

We apply our view model over the structure.

<table {...$tableAttrs}>
  <thead>
    {#each $headerRows as headerRow (headerRow.id)}
      <Subscribe rowAttrs={headerRow.attrs()} let:rowAttrs>
        <tr {...rowAttrs}>
          {#each headerRow.cells as cell (cell.id)}
            <Subscribe attrs={cell.attrs()} let:attrs>
              <th {...attrs}>
                <Render of={cell.render()} />
              </th>
            </Subscribe>
          {/each}
        </tr>
      </Subscribe>
    {/each}
  </thead>
  <tbody {...$tableBodyAttrs}>
    {#each $rows as row (row.id)}
      <Subscribe rowAttrs={row.attrs()} let:rowAttrs>
        <tr {...rowAttrs}>
          {#each row.cells as cell (cell.id)}
            <Subscribe attrs={cell.attrs()} let:attrs>
              <td {...attrs}>
                <Render of={cell.render()} />
              </td>
            </Subscribe>
          {/each}
        </tr>
      </Subscribe>
    {/each}
  </tbody>
</table>

# Final result

Putting it all together, we have a very simple table.

Explore this example in the REPL.

# What's next?

We are now ready to extend our table with powerful features using the Plugin System!