How to use the Data Table block by Zoloblocks

This documentation provides comprehensive insights into the Data Table Block developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Data Table block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Data Table block.
3. After on the right side, Click on the Block. Then the Data Table details appear.
4. Here shows all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

This section provides a control for the general section,

1. Show Pagination: Enable the switcher to show the pagination.
2. Show Search: Enable the switcher to show the Search box.

Change CSV File

3. Data Source: Select the data source (e.g.: CSV, Google Sheets).
4. Change CSV File: Click on the ” change csv file button ” and upload new csv file.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Entries Per Page

Go to Style > Entries Per Page

Make the customization for the entries tab, and Make the basic appearance changes.

Per Page Tab

1. Typography: Set the typography for the Entries per page
2. Entries Page Color: Set entries page color.

Number Tab

1. Typography: Set the typography for the number.
2. Number Color: Set the color for the number.

3. Focus Color: Set the focus color.

4. Background: Set the background color.
5. Border: Set the border for the number.
6. Border Radius: Set the border-radius.
7. Padding: Set padding for the

Search Section

Go to Style > Search

1. Typography: Set the typography for the search.
2. Search Color: Set the search color.
3. Focus Color: Set the focus color.

4. Background: Set the background for the search.
5. Border: Set the border.
6. Border Radius: Set the border radius.
7. Padding: Set the padding.

Head Section

Go to Style > Head

This section provides control to customize the Head section,

1. Typography: Set the typography for the head.
2. Alignment: Set the alignment for the head.
3. Color: Set the color for the head.

4. Background: Set the background for th head.
5. Border: Set the border.
6. Padding: Set inner spacing by setting the padding.

Body Section

Go to Style > Body

Make the body section customization by following the controls,

1. Typography: Set the typography for the body.
2. Alignment: Set the alignment for the body.
3. Color: Set the color for the body.

4. Border: Set the border for th head.
5. Border Radius: Set the border corner edges rounded.
6. Padding: Set inner spacing by setting the padding.

Even Tab

7. Background Even: Set the background for the Even.

ODD Tab

8. Background Odd: Set the background for the Odd.

Page Count Section

Go to Style > Page Count

Make this page count customization,

1. Typography: Set the typography for the page count.
2. Entries Page Color: Set the entries page color.

Pagination Section

Go to Style > Pagination

Make the pagination section more customizable the appearances changes,

1. Size: Set the size for the pagination number.
2. Typography: Set the typography.
3. Alignment: Set the alignment for the typography.

4. Border: Set the border for the pagination.
5. Border Radius: Set the radius for the border.
6. Margin: Set margin for pagination.

Normal tab

7. Color: Set the color for the pagintion.
8. Background: Set the backgroud for the normal.

Active Tab

The changes appears for the normal tab,

9. Color: Set the color for the pagintion.
10. Background: Set the backgroud for the normal.

Empty Text Section

Go to Style > Empty Text

Set appearacne change sfor the empty text,

1. Typography: Set the typography for the empty text.
2. Color: Set the color for the text.

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial coming soon!

Check the Demo Page.

Thanks for being with us!