The Table element lists invoices in an organized manner with the columns No, Date, Recipient, Status, Amount. The user manages invoices with sorting, searching, filtering, pagination, exporting, and (optional) in-line editing.

The Table element is supported in web and mobile applications. Mobile responsive table support is available.

Invoice Management Scenario

In a finance or subscription application, the Table element is used to allow users to track their latest invoices. The table lists the invoice number (No), invoice date (Date), recipient company or service provider (Recipient), invoice status (Status), and amount information (Amount) in an organized manner.

Connecting the Data Source

• Go to the Datasources module.
• Then click the + icon next to the Tables heading and name the table Invoices.
• Create the following table.

• Then click SQL Actions and name the action Invoices. You can also create it with C#.
• Enter the following SQL command.

SELECT ‘AXZ-177’ AS InvoiceNo, CAST(‘2022-06-07’ AS DATE) AS InvoiceDate,‘Figma Inc.’ AS RecipientName, ‘https://cdn.example.com/logo/figma.png’ AS RecipientLogoUrl,‘Paid’ AS Status, 351.02 AS Amount, ‘USD’ AS CurrencyUNION ALLSELECT ‘AXZ-922’,'2022-06-05',‘Dribbble’,'https://cdn.example.com/logo/dribbble.png',‘Overdue’,710.68,‘USD’UNION ALLSELECT ‘AXZ-703’,'2022-06-04',‘Youtube’,'https://cdn.example.com/logo/youtube.png',‘Paid’,778.35,‘USD’UNION ALLSELECT ‘AXZ-883’,'2022-06-02',‘Spotify’,'https://cdn.example.com/logo/spotify.png',‘Overdue’,490.51,‘USD’UNION ALLSELECT ‘AXZ-798’,'2022-06-02',‘Discord’,'https://cdn.example.com/logo/discord.png',‘Paid’,275.43,‘USD’UNION ALLSELECT ‘AXZ-154’,'2022-06-01',‘Github’,'https://cdn.example.com/logo/github.png',‘Paid’,105.55,‘USD’;

UI Design Module operations

• Click the Add Action button on the right side of the application screen.
• Then select Custom > Invoices.

Using Features in a Scenario Context

General

• Datasource: Data source (Invoices).
• ShowHeader: On → Show header rows.
• Fixed Header: On → Keep header fixed when scrolling.
• Editable: Off → View only.
• Editable Always Active: If enabled, every cell is always in edit mode.
• Table Width Mode: Content (for narrow tables), Full (for wide screens).

Search and Filtering

(Web only)

• GlobalSearch: Searches the entire table (e.g., “Spotify” → finds the relevant row).
• Searchable: Displays a search box in the upper right corner.
• Should Search OnChange: Filters as you type.
• SearchDelay: 300–500 ms recommended.
• Filtering: Column-based filter.
  
  • String: contains, equals, begins with
  • Number: >, <, =
  • Date: between, after, before
  • E.g.: Status = Paid → only paid invoices are visible.
• Multi Filter: Multiple conditions can be added.
  
  • Example: Amount > 500 AND Status = Overdue.

Sorting

• Sorter: On → Clicking column headers sorts in ascending/descending order.
  
  • Example: “Amount” ascending → invoice amounts from lowest to highest.
• SpecialSortingFormat: Date sorting for dates, numeric sorting for numbers.

Pagination

• Pagination: Active.
• PageSize: 10.
• Show Size Changer: User can select 10/20/50 rows.
• Size Changer Options: [10, 20, 50].

Appearance and Interaction

• ColumnChooser: User can select which columns to view.
• Resizable Columns: Column width can be changed.
• HideTableOnEmpty: Hides the table if there is no data.
• ShowNoDataFound: On → “No invoices found” message.
• NoDataFoundMessage / Image: Message and image can be customized.
• Striped: Rows appear with a striped background.
• StripedColor: Stripe color.
• RowHoverBgColor: Row color changes on hover.
• Selected Row Color: Selected row color.
• MultiSelect: Multiple rows can be selected at the same time.
• MultiSelect Scope: Row / cell / column-based selection.
• Selected Values: Returns the values of the selected rows.

Export

• Export: Open → Export to Excel/CSV.
• Exclude From Export: E.g., exclude the Logo column.

Columns Properties

• Title: Column name visible to the user (e.g., “Amount”).
• Second Title: Subtitle (e.g., “USD”).
• Default Data Field: Data associated with the column.
• Group: Group columns (e.g., “Invoice Info”, “Payment Info”).
• Group Bg Color / Font Color: Group header colors.
• Title Bg Color: Header background.
• Always Visible On Mobile: Critical columns are always visible on mobile.
• Hide Filtering / Sorting / Search: Can be disabled in the relevant column.
• Footer Options: Calculates sum, avg, etc.
  
  • E.g., total invoice amount under “Amount”.
• FooterFormatter / OptionLabel: Footer text.
• Fixed: Fix the column (e.g., the No column is always on the left).
• Placeholder: Text displayed when an editable cell is empty.

Title Properties

• Hide on Mobile: The title can be hidden on mobile.
• TextDirection: LTR / RTL.

Inline Grid

• Add EditableTableColumn.
• Link it to the Label → Status field inside.
• EditMode Component: Selectbox (Paid, Overdue).
• On Row Edit Finished:
  
  • Save Record → update the database.
  • Then call the listing Action → refresh the table.

Hover Effect

• RowHoverBgColor → Change row color on hover.

Table Configuration Management

You can perform the following actions from the Properties panel on the right side +ADD ACTION button.

• Export Table Configs: Exports user table settings (filter, column).
• Import Table Configs: Loads previously saved table settings.
• Clear Table Filtering Configs: Resets filters.
• Reset Table Configs: Resets all table settings to default. JSON outputs can be saved to the TableConfig table (Id, Json columns).

Master–Detail

• Master table: Invoice list.
• Detail table: Payment details for the selected invoice.
• Datasource: Nested list from Master.
• Supported by SQL or Custom C#.

When the Scenario Step is Complete

• The user views invoices via the table.
• Search, filter, sort, pagination active.
• Status → Paid (green), Overdue (red).
• Total invoice amount in the footer.
• Can be exported to Excel/CSV.
• (Optional) Status can be edited with Inline Grid.

Limitations

• Search/filtering/sorting only on the web.
• Large data → performance may decrease.
• Multiple columns on mobile → readability issue.

Tips and Best Practices

• Make critical columns Always Visible On Mobile.
• Exclude From Export images such as logos.
• Hover and Striped rows improve readability.
• Filters work after three letters → for performance.
• Offer users a personal table template with Export/Import Config.