Skip to main content

Datatable

The DataTable component is an essential tool for displaying raw data in a structured and organized manner, allowing users to view, analyze, and interact with data efficiently. It is particularly useful for business applications where data needs to be presented with clarity and precision, such as in reports, dashboards, and data management systems. The DataTable can highlight business priorities by accentuating key data points, making it easier for stakeholders to identify trends, make comparisons, and derive insights. Its flexibility and interactivity make it a powerful component for enhancing user experience and facilitating data-driven decision-making.

Properties​

To effectively utilize a DataTable, the following data and attributes are necessary:

  • Component-Level Attributes:
    • CodeTitle: A unique identifier for the data table, used for referencing and integration within larger data systems or dashboards. The code is also used to be referenced in the actions through your application.
    • ComponentName: A descriptive name for the data table, providing context and clarity to the viewer.
  • Column Attributes:
    • Columns: Each column is linked to an attribute in the dataset and has a unique code and name. Columns can be rearranged by dragging, allowing users to customize the order in which data is displayed. The code is also used to be referenced in the actions through your application
    • The +ADD COLUMN feature enables users to add additional attributes from the data source, enhancing the table's flexibility and adaptability.
  • Row Attributes:
    • Rows: These represent the instances of data that need to be visualized. Rows can be populated dynamically as a result of user actions or defined statically, depending on the use case and data source. The code of the row is also used to be referenced in the actions through your application.
    • The +ADD ROW feature enables users to add additional records from the dynamic data source or fixed list, enhancing the table's flexibility and adaptability.
  • Interactive Features:
    • Filter Toggle: This feature controls whether the DataTable is filterable, allowing users to search and filter data to find specific information quickly. This enhances the user experience by making it easier to navigate large datasets.
    • Paging Toggle: Ideal for larger datasets, this feature enables pagination, allowing data to be displayed in manageable chunks. It helps prioritize or sort data, improving readability and reducing clutter.
    • Result Message Toggle: This feature allows users to suppress or display messages related to the results of the data source, providing control over the information presented to the user.

By structuring the DataTable component with these attributes, businesses can create a dynamic and user-friendly interface that effectively communicates data insights. The ability to customize columns, filter data, and manage large datasets ensures that the DataTable remains a versatile and powerful tool for data visualization and analysis.

Style​

Best Practices​

  • Clarity and Readability: Ensure that the data table is easy to read by using adequate spacing, clear fonts, and contrasting colors for text and backgrounds. Avoid clutter by limiting the number of columns and using pagination for large datasets.
  • Consistency: Maintain a consistent style with other UI elements in your application, such as using similar fonts, colors, and spacing.
  • Accessibility: Use semantic HTML for tables and ensure that screen readers can interpret the data correctly. Consider using high-contrast colors and larger fonts for better accessibility.
  • Interactivity: Implement hover effects and cursor changes to provide visual feedback to users, enhancing the interactive experience.

Highest Value Features​

  • Overflow Management: Properly handling overflow ensures that data is displayed neatly without breaking the layout.
  • Font and Background Customization: Customizing fonts and backgrounds for headers and rows can significantly enhance the visual appeal and usability of the table.
  • Padding and Margin Adjustments: Adjusting padding and margins helps in fitting the table better within the layout, especially in responsive designs.

All the Settings​

Overflow​

  • Normal or On Hover
    • Overflow X: Options include visible, hidden, scroll, auto, initial, inherit.
    • Overflow Y: Options include visible, hidden, scroll, auto, initial, inherit.

Border​

  • Border Options: Customize the border style, width, and color to define the table's outline and cell separation.

Padding​

  • Padding Options
    • Icon: Adjust padding for all sides, top, left, bottom, right.
    • Size: Set in pixels using up and down arrows or by entering a numeric value.

Background​

  • Normal and On Hover Options:
    • Background Color:
      • Color: Color picker or enter values in HEX, RGBA, HSLA format.
    • Image: OR “select an image” from the media library OR “http” have it referred to an online image.
    • Background Attachment: Options include scroll, fixed, local, initial, inherit.
    • Background Position X/Y: Expressed in pixels (arrow up or down, or number), shift of the background regarding the X-axis (horizontal shift) and Y-axis (vertical shift).
    • Background Repeat: Options include repeat (horizontal and vertical), repeat-x (horizontal repeat), repeat-y (vertical repeat), no-repeat (based upon position one instance), initial (inherits the browser’s default), inherit (inherit from the parent element).
    • Background Size: Options include auto (autofit the size to the element), length, cover, contain, initial (inherits the browser’s default), inherit (inherit from the parent element).
    • Background Origin: Options include border-box, padding-box, content-box, initial (inherits the browser’s default), inherit (inherit from the parent element).

Shadow​

  • Shadow Options: Customize the shadow effect to add depth and focus to the table.

Cursor​

  • Cursor Options: Change the icon of the cursor when hovering over the datatable to indicate interactivity.

Label Font​

  • Normal and On Hover Options:
    • Alignment: Options include left, center, right, aligned.
    • Font Type: Choose the font family.
    • Font Size: Number expressed in px, em, or rem (em and rem are relative units based on font size).
    • Letter Spacing: In pixels.
    • Line Height: In pixels.
    • Style: Options include normal, italic, oblique, initial (inherits the browser’s default), inherit (inherit from the parent element).
    • Weight: Options include thin, extra light, light, normal, medium, semi bold, bold, extra bold, black.
    • Color: Picker or values in HEX, RGBA, HSLA.
    • Stretch: Options include normal, semi condensed, condensed, extra condensed, ultra condensed, semi expanded, expanded, extra expanded, ultra expanded.
    • Variant: Options include normal, small caps, initial (inherits the browser’s default), inherit (inherit from the parent element).
    • Caps Variant: Options include normal, small caps, all small caps, mini caps, all mini caps, unicase, titling caps, initial (inherits the browser’s default), inherit (inherit from the parent element).
  • Font Options: Same as Label Font.
  • Cursor: Change the icon of the cursor when hovering over the header.
  • Background: Same as Background Options.

Row​

  • Font Options: Same as Label Font.
  • Cursor: Change the icon of the cursor when hovering over the rows.
  • Background: Same as Background Options.

Explanation of Terms​

  • Initial: Sets the property to its default value as defined in the CSS specification.
  • Inherit: Makes the element inherit the property from its parent element.
  • em/rem: Relative units based on the font size of the element or root element, respectively.

This style guide provides a comprehensive overview of the styling options available for the DataTable component in NoCode-X, ensuring users can create visually appealing and functional designs.

Actions​

Event: On Change​

The "On Click" action is triggered whenever a user clicks on a record within the datatable. This action allows for interactive engagement with the data presented, enabling users to perform specific tasks or navigate to detailed views based on the selected record.

Compatible functions​

  • Add column to datatable
  • Add row to datatable
  • Clear rows of datatable
  • Disable filter of datatable
  • Disable paging of datatable
  • Enable paging of datatable
  • Enable filter of datatable