Skip to main content

NoCode-X Tutorial: How to Create & Use Datatables for Secure Web Apps

Table of Contents​

Introduction​

This guide demonstrates how to create and use datatables in NoCode-X to visualize and interact with large datasets. The tutorial covers setting up datatables, enabling features like filtering, sorting, and pagination, and dynamically manipulating data through actions.

Video Tutorial​

Use Cases​

  • Displaying large datasets in a user-friendly format.
  • Enabling users to filter, sort, and paginate data.
  • Creating dynamic dashboards for data visualization.
  • Building master-detail views for data management.
  • Interactive applications requiring real-time data updates.

Prerequisites​

  • Basic understanding of NoCode-X.
  • Familiarity with UI elements like lists and buttons.
  • A NoCode-X workspace with access to the datatable feature.

Quick Start Guide​

  1. Add a Datatable to Your Page:

    • Create a horizontal list and add a vertical list inside it.
    • Add a datatable to the vertical list.

  2. Configure the Datatable:

    • Define columns (e.g., First Name, Last Name, Email).
    • Enable features like filtering, sorting, and pagination.

  3. Add Static Data:

    • Populate the datatable with static rows for testing.

  4. Enable Dynamic Data:

    • Fetch data from a database and populate the datatable dynamically.

Detailed Implementation Steps​

1. Setting Up the Page Layout (Timestamp: 0:36-2:10)​

  • Add a horizontal list to the page.
  • Set the width and height to 100%.
  • Add a vertical list inside the horizontal list.
  • Add a datatable to the vertical list.
// Example: Adding a datatable
const datatable = {
    columns: [
        { name: "First Name", type: "text" },
        { name: "Last Name", type: "text" },
        { name: "Email", type: "text" }
    ],
    rows: []
};

2. Configuring the Datatable (Timestamp: 2:15-5:00)​

  • Define columns and their data types.
  • Enable filtering, sorting, and pagination.
  • Add placeholder text for empty results.
// Example: Enabling filtering and pagination
datatable.enableFilter = true;
datatable.enablePagination = true;
datatable.paginationSize = 10;
datatable.noResultsMessage = "No persons were found.";

3. Adding Dynamic Data (Timestamp: 5:04-17:00)​

  • Fetch data from a database and populate the datatable.
  • Use actions to dynamically add rows and columns.
// Example: Fetching data and populating the datatable
const fetchData = async () => {
    const data = await fetch("YOUR_API_ENDPOINT");
    const rows = data.map(item => ({
        id: item.id,
        firstName: item.firstName,
        lastName: item.lastName,
        email: item.email
    }));
    datatable.rows = rows;
};

4. Adding Actions to the Datatable (Timestamp: 17:00-25:00)​

  • Add buttons to dynamically enable/disable features like filtering and pagination.
  • Use actions to add or remove columns and rows.
// Example: Adding a column dynamically
const addColumn = () => {
    datatable.columns.push({ name: "New Column", type: "text" });
};

5. Creating a Master-Detail View (Timestamp: 25:28-43:00)​

  • Use the datatable as a master view.
  • Add an onClick action to redirect users to a detail page.
// Example: Redirecting to a detail page
const onRowClick = (row) => {
    window.location.href = `/detail?id=${row.id}`;
};

Advanced Features​

1. Styling the Datatable (Timestamp: 6:08-7:00)​

  • Customize the appearance of the datatable using design system settings.
  • Add borders, shadows, and custom fonts.

2. Clearing the Datatable (Timestamp: 44:00-45:37)​

  • Add a button to clear all rows from the datatable.
// Example: Clearing the datatable
const clearDatatable = () => {
    datatable.rows = [];
};

3. Dynamic Row and Column Manipulation (Timestamp: 7:05-12:00)​

  • Add or remove rows and columns dynamically based on user actions.

References​

Last Updated: 2025-04-13