Table

The Table component in GridStudio provides a fully interactive and extensible way to display, filter, and manage structured data. Tables support built-in filtering, sorting, pagination, dynamic column rendering, custom row actions, conditional logic, and advanced UI integration via drawers and dropdowns.

It is one of the most powerful tools in the Client SDK, enabling developers to create CRM-like list views and management interfaces with complete control over the UI and logic.

---

Core Features

• Declarative Table Headers: Define column titles, sorting fields, and custom render logic.
• Custom Row Rendering: Render each row based on fetched data using various UI components.
• Filtering Options: Add advanced filters using atoms-select-ajax, bound to backend queries.
• Pagination and Sorting: Integrated with the SDK’s state and reactive update system.
• Action Buttons & Dropdowns: Add actions per row, including nested forms and multi-step workflows.

---

Example Setup

The following example outlines how to build a full-featured lead management table, including:

• Filtering by agent, country, interest level, etc.
• Calculating and displaying remaining time dynamically.
• Showing various UI elements (badges, dropdowns, buttons).
• Triggering drawers with custom forms for lead updates.

sdk.sorting.set({ 'payload.pendingAt': -1 })
sdk.filteringOptions = {
  items: [
    {
      type: 'atoms-select-ajax',
      name: 'payload.agentUserId',
      label: 'Agent User',
      multiple: true,
      events: {
        async onSearch(templateInstance, params, callback) {
          // Fetch options from method
        },
      },
    },
    {
      type: 'atoms-select-ajax',
      name: 'payload.countryKey',
      label: 'Country',
      multiple: true,
      events: {
        async onSearch(templateInstance, params, callback) {
          // Fetch from custom function
        },
      },
    },
  ],
}

sdk.options = function () {
  const items = sdk.state.get('leads')
  return {
    header: {
      title: 'Leads',
      buttons: [{
        text: 'Create Lead',
        events: {
          onClick() {
            sdk.utils.drawer.show({
              customFunctionPathString: sdk.utils.absolutePathString('create.js'),
              title: 'Create Lead',
            })
          }
        }
      }],
    },
    tableHeaders: [
      { title: 'Company Name', sortField: 'payload.companyName' },
      { title: 'Membership Type', sortField: 'payload.membershipTypeKey' },
      { title: 'State', sortField: 'payload.leadStateKey' },
    ],
    items: items.map((lead) => ({
      cells: [
        { type: 'atoms-text', text: lead.payload.companyName },
        { type: 'atoms-badge', text: lead.payload.membershipTypeKey },
        { type: 'atoms-badge', text: lead.payload.leadStateKey },
      ]
    })),
  }
}

---

Table Config Fields

Field	Type	Description
header	object	Contains title and optional buttons
tableHeaders	array	Defines visible columns and sort fields
items	array	Row data, each with cells array
notFound	object	UI to show when no data is found

Each cell can use atoms-text, atoms-badge, atoms-button, components-dropdown, etc.

---

Best Practices

• Use sdk.utils.autorun() to handle reactivity for filtering and pagination.
• Use sdk.state.set and sdk.state.get to manage and render data.
• Leverage ReactiveVar for dynamic filtering state.
• Provide visual feedback with sdk.utils.loading.show/remove().
• Ensure each row action has clear UI and fallback confirmation dialogs.