Components / Data & content

Table Advanced

Component + manager

Builds a dynamic and extendable table layout with editable rows/columns, sorting, pagination, bulk-selection, inserting rows, uploading bulk rows, exporting CSV/JSON, and more.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentTableAdvanced

Managercreate_table_advanced_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { TableAdvanced, create_table_advanced_manager } from "sveltekit-ui"

  const rows = [
    { name: "Website", status: "In review" },
    { name: "Documentation", status: "Draft" },
    { name: "Mobile app", status: "Published" },
  ]

  const manager = create_table_advanced_manager({
    table_name: "Projects",
    definition_stack: [{ rows }],
    rows_data_from_variable_path: ["rows"],
    is_data_editable: false,
    is_paginate: true,
    rows_per_page: 2,
    nav_items: ["search", "pagination", "rows_per_page", "file"],
    columns: {
      name: {
        display_order: 1,
        header_content: { type_id: "base_text", attributes: { content: "Project" } },
        body_content: {
          type_id: "base_text",
          attributes: { content_from_variable_path: ["rows", ["row_i"], "name"] },
        },
      },
      status: {
        display_order: 2,
        header_content: { type_id: "base_text", attributes: { content: "Status" } },
        body_content: {
          type_id: "base_text",
          attributes: { content_from_variable_path: ["rows", ["row_i"], "status"] },
        },
      },
    },
  })
</script>

<TableAdvanced {manager} />

API reference

Configure the manager, call its methods, and read its reactive state.

18 entries in configuration

Property	Type	Default	Description
`table_id`	`string`	`null`	An optional unique identifier for the table.
`table_name`	`string`	`null`	A display name for the table.
`table_description`	`string`	`null`	A descriptive text for the table.
`rows_data_from_variable_path`	`array of strings or nested arrays`	`null`	Specifies a path to retrieve the rows array within your variable/loop structure. Example: `['variables','data','my_table_rows']`.
`row_input_content`	`ASTC (abstract content) or null`	`null`	Defines the content structure for editing/creating each row.
`variables_data_type`	`object`	`null`	An optional data-type scheme for advanced usage. Typically derived from overall JSON data type.
`is_data_editable`	`boolean`	`false`	If true, enables editing features for rows, columns, and bulk insert/delete.
`nav_items`	`array of strings`	`[]`	Select which interactive elements appear above the table. For instance, 'search', 'file' (export options), 'insert', 'bulk_select', etc.
`is_paginate`	`boolean`	`false`	If true, includes pagination controls.
`is_more_to_load`	`boolean`	`false`	Toggles the 'Load More' button visibility if some server-based pagination still has more rows to fetch.
`table_header_max_height`	`number or null`	`null`	Optional maximum height (in rem) for the table header cells. Contents become scrollable if exceeded.
`table_row_max_height`	`number or null`	`null`	Optional maximum height (in rem) for table body cells. Contents become scrollable if exceeded.
`columns`	`object of { [column_id]: column_definition }`	`{}`	A dictionary of columns. Each column_id has metadata including `header_content`, `body_content` ASTC for the table header / cell rendering, plus optional properties like min_width, alignment, etc.
`on_event`	`function or null`	`—`	A callback that intercepts table events (insert/delete row, insert/delete column, load more, update row, bulk delete, etc.). Should return an object `{ is_success: boolean, ... }`. This is how the table manager interacts with external data storage.
`on_search_table_row_ids`	`function or null`	`—`	Optional: if columns reference foreign tables, you can pass a function for searching row IDs from other tables.
`table_options`	`object or null`	`null`	Optional higher-level table config references, e.g. for specialized column input behavior or server-based queries.
`mapkit_js_token`	`string or null`	`null`	If any columns or row content uses map-based location input, you'll need this MapKit token.
`rows_per_page`	`number`	`100`	Default rows per page when `is_paginate` is true.