Table Widget

Last Update: July 8, 2021

Table widget has a lot of customization settings so that you can style it up as you need. With the help of this widget, you are able to create a schedule, classify the information, etc.

Table widget sample

On the pictures below you can view the Table widget sample.

Content

Data Source

  • Data Types
    • Custom: Fill in the table content.
    • CSV: import CSV file inside the table.

Header Section

  • Content
    • Text: type the heading title.
    • Add icon/image: add icon or image to the heading.
  • Settings
    • Column Span: type the number of columns that the heading should take its place.
    • Colum Width: type the column width.
  • Style
    • Color: Choose the heading text color.
    • Background Color: Choose the heading background color.

Body Section

  • Action
    • Start New Row: choose it to start a new table row.
      • Add Custom Style
        • Color: Choose the column text color.
        • Background Color: Choose the column background color.
    • Add New Cell: choose it to add a column in the table row.
      • Content
        • Text: type the column content.
        • Link: link the column content to a URL.
        • Add Icon/Image: choose to add an icon or image to the column content.
      • Settings
        • Column Span: type the number of columns that the column should take its place.
        • Row Span: type the number of rows that the column should take its place.
        • This Cell is table Heading?: Switch it on in case you need to make a Cell as a Heading Column.
      • Style
        • Color: Choose the column Color.
        • Background Color: Choose the column background color.

Display Options

  • Sorting Table: Turn it on in case you need to enable the sorting in the table.
  • Search Table: Turn it on in case you need to enable the search box in the table.
  • Responsive Table: Turn it on in case you need to enable the responsiveness in the table.

Style

Table

  • Table Width: type the table width.
  • Column Width
    • Auto: Choose it in case that you need the table width based on content.
    • Fixed: Choose it in case that you need all columns to have the same width.
  • Table Alignment: choose the text alignment inside the table.
  • Border Radius: here you can set the border radius to make the angles more smooth and round.
  • Box Shadow: here you can apply the shadow for the tab content and change the shadow’s settings, such as color, blur, spread, and position.

Table Header

  • Typography: turn the option on to view the typography settings.
  • Switch between Normal & Hover modes to customize the Heading Columns.
    • Color: here you can change the Heading Columns text color to the one you want.
    • Background Color: in this block, you can choose, whether you want to use classic or gradient type for the Heading Columns. The customization options vary for each type.
  • Padding: here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
  • Border Type: here you can select the needed type of border to use for the Heading Columns.
  • Hidden border for header container: in case that you need to disable the border for the Heading Columns.
  • Alignment: here you can set the alignment of the Heading Columns and make it different for different screen resolutions.
  • Vertical Alignment: here you can set the vertical alignment of the Heading Columns and make it different for different screen resolutions.
  • Icon
    • Font Size: here you need to customize the size of the icon and make it responsive.
    • Color: here you can change the color of the icon to be shown in the Heading Columns.
    • Gap: here you can add the space between the heading column text and the icon.
  • Image
    • Width: here you can set the image width.
    • Gap: here you can add the space between the image and heading column content.
    • border-radius: here you can set the border-radius to make the angles more smooth and round.
  • Sorting Icon
    • Font Size: here you need to customize the size of the icon and make it responsive.
    • Color: here you can change the Icon color to the one you want.

Table Body

  • Typography: turn the option on to view the typography settings.
  • Switch between Normal & Hover modes to customize the Body Columns.
    • Row Color: here you can change the Body Columns text color to the one you want.
    • Row Background Color: in this block, you can choose, whether you want to use classic or gradient type for the Body Columns. The customization options vary for each type.
    • Striped Rows: turn it on to add a different color for even and odd column
      • Even Row Color: here you can change the Body Even Columns text color to the one you want.
      • Even Row Background Color: in this block, you can choose, whether you want to use classic or gradient type for the Body Even Columns. The customization options vary for each type.
    • Link Color: Choose the link color inside the Body Columns.
  • Padding: here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
  • Border Type: here you can select the needed type of border to use for the Body Columns.
  • Hidden border for body container: in case that you need to disable the border for the Body Columns.
  • Alignment: here you can set the alignment of the Body Columns and make it different for different screen resolutions.
  • Vertical Alignment: here you can set the vertical alignment of the Body Columns and make it different for different screen resolutions.
  • Icon
    • Font Size: here you need to customize the size of the icon and make it responsive.
    • Color: here you can change the color of the icon to be shown in the Body Columns.
    • Gap: here you can add the space between the Body column text and the icon.
  • Image
    • Width: here you can set the image width.
    • Gap: here you can add the space between the image and Body column content.
    • border-radius: here you can set the border-radius to make the angles more smooth and round.
0