Build Table

Introduction to Tables


Tables play a crucial role in displaying and managing data in a structured format. Whether you're dealing with user lists, product inventories, or any other dataset, the table component provides a powerful solution.

Introduction to Tables

The table component is designed to render data in a tabular format, providing features such as searching, filtering, pagination, and more. It can be configured to generate columns automatically based on a specified datasource, or columns can be manually configured.

Key Features :
  • Dynamic column generation from a datasource.
  • Customizable column types (Text, Rich Text, Date, Time, Image, File, Picker).
  • Interactive row actions (e.g., Edit and Delete).
  • Triggers for row click and double click events.
  • Extensive theming options for customization.

Step 1: Adding the Table Component

Drag and Drop:

Begin by dragging and dropping the table component onto your canvas.

Configure Label:

Set the label for your table, representing the type of data it will display (e.g., "Users").

Step 2: Configuring Datasource



Specify the datasource for the table. This can be an array or list containing the items to be displayed. Automatic Column Generation:

If a datasource is provided, the table will attempt to automatically generate columns based on the structure of the data. Verify that the generated columns match your requirements.

If no datasource is specified, columns must be manually configured.

Step 3: Configuring Columns

Creating Columns:

Under the table configuration, click + Column to create a new column. Configure properties like Label, Key, and Type for each column. Screenshot

Column Types:

Choose appropriate types for your columns (Text, Rich Text, Date, Time, Image, File, Picker).

Step 4: Adding Call to Action (CTA) Buttons

Static Buttons:

Enhance user interaction by adding static buttons under the CTAs section. Example: Add a button labeled "+ New User" with an onClick handler to navigate to the Create User page. Screenshot

Step 5: Adding Row Action Buttons

Row Action Buttons:

Improve user experience by adding row action buttons under the Row Actions tab. Example: Add "Edit" and "Delete" buttons with corresponding onClick handlers. Screenshot

Step 6: Configuring Table Header

Header Configuration:

Customize the table header, including the label, search functionality, and additional features. Example: Change the label to "Users" and enable features like Search and Download.

Step 7: Row Configuration

Fetch Data:

Define how the rows of the table will be populated by fetching data from a workflow endpoint. Example: Use a workflow endpoint such as "Get all Users" to retrieve an array of Users and fill the table with row data.

Step 8: Table Component Handlers

Utilize Handlers:

Leverage the provided handlers for specific actions. Example: Use onRowClick and onRowDoubleClick to trigger events based on clicking a row, and use onRefresh for actions triggered by refreshing the table.

Step 9: Theme Customization

Theme Options:

Customize the appearance of your table using theme options. Adjust properties like title alignment, color, style, text size, padding, shadow, border, and background colors.

Did you find what you were looking for?
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. →