REA Data Table
The REA Data Table widget allows you to add a table with filled data on your page and also gives controls to customize the styling of the table as per requirement.

Content

  • Enable Table Sorting - Show or Hide the table sorting button.
  • List of table header - Each header item has the following controls for configuration:
    • Column Name - Add header item name
    • Column Span - Add the number of columns that header item should span
    • Enable Header Icon - Show or Hide icon to be displayed with the header item
    • Header Icon Type - Choose the icon type. Available options are None, Icon, and Image.
    • Icon - Add icon for the header item, this control is only available if the Header Icon Type is set to Icon.
    • Image - Add the image for the header item, this control is only available if the Header Icon Type is set to Image.
    • Image Size(px) - Set the image size for the image of the header item, this control is only available if the Header Icon Type is set to Image.
    • CSS Class - Add a CSS class if required.
    • CSS ID - Add a CSS ID if required.

Content

List of items for table data. Each item has the following controls:
  • Row Type - Select the type of row content. If Row is selected from the option then a row will be started which should be followed by column type contents. If Column is selected then the following controls for the column content will be available:
    • Col Span - Set the column span for that particular item. Default: 1.
    • Content Type - Choose the content type for the column. Available options: Icon, Textarea, Editor, and Templates. Default: Textarea.
    • Row Span - Set the row span for that particular item. Default: 1.
    • Cell Text - Add the text content for the column content item. This control is a Textarea if the Content Type is set to Textarea or text editor if the Content Type is set to Editor.
    • Icon - Add the icon for the column content item. This control is available only if the Content Type is set to Icon.
    • Choose Template - Select a template from which the column content data should be fetched.
    • Link - Add link for the column content item.
    • CSS Class - Add a CSS class if required.
    • CSS ID - Add a CSS ID if required.

Export

This control allows the user to export the table data in a CSV format file.

Style

General Style

  • Width - Set the width of the table.
  • Alignment - Choose the alignment of the table.

Header Style

  • Header Border Radius - Set the border radius for the table header.
  • Padding - Set the padding dimensions for the table header.
  • Normal/Hover State:
    • Color - Set the text color for the table header.
    • Background Color - Set the background color for the table header.
  • Border Type - Set the border type for the table header. If the Border Type is not set to None then the controls for Border Width and Border Color will be available.
  • Typography - Set the typography settings for the table header.
  • Icon Size - Set the icon size for the table header.
  • Icon Position - Set the icon position for the table header.
  • Icon Space - Set the icon spacing for the table header.
  • Title Alignment - Set the alignment for the table header item text.

Content Style

  • Border Type - Set the border type for the content item cell. If the Border Type is not set to None then the controls for Border Width and Border Color will be available.
  • Padding - Set the padding dimensions for the content item cell.
  • Typography - Set the typography settings for the content item cell.
  • Normal/Hover State :
    • Color(Odd Row) - Set the text color for the odd row cells.
    • Background(Odd Row) - Set the background color for the odd row cells.
    • Color(Even Row) - Set the text color for the even row cells.
    • Background(Even Row) - Set the background color for the even row cells.
  • Link Color
    • Normal/Hover State:
      • Text Color - Set the text color for the link in table content.
    • Content Alignment - Set the alignment for the table content item.
  • Icon Style
    • Icon Size - Set the icon size for the table content item.
    • Normal/Hover State :
      • Icon Color - Set the icon color for the table content item.

Responsive Options

Enable Responsive Table - Toggle table responsiveness. If the value is set to Yes then the following controls will be available:
  • Width - Set the table width for different devices.
  • Color - Set the color for the table for different devices.
  • Background Color - Set the background color for the table for different devices.
  • Typography - Set the typography settings for the table.
  • Border Type - Set the border type for the table. If the Border Type is not set to None then the controls for Border Width and Border Color will be available.