Table Design Setup Guide

The Table Design feature in BizCore allows administrators to customize the appearance of system tables for a consistent look and feel that matches company branding. Through Color Scheme settings and Custom CSS, you can control how table headers, bodies, and footers are displayed.

This guide provides a comprehensive walkthrough of the available configuration options.

Accessing Table Design Settings

1. Log in to your BizCore administrator account.

2. Navigate to the Setup menu.

3. Under Custom Tables, click Table Design.

You will now see two main configuration sections: Color Scheme and Custom CSS.

Configuring Color Scheme

The Color Scheme section allows you to define colors for each part of your tables. All colors must be set using hexadecimal color codes (e.g., #FFFFFF for white, #000000 for black).

1. Header Configuration

Setting Description
Header Background Color Sets the background color of the table header row.
Header Border Color Defines the color of borders around header cells.
Header Text Color Changes the font color of the text within header cells.

2. Body Configuration

Setting Description
Body Background Color Sets the default background color for all table rows.
Body Border Color Defines the color of the borders separating table rows and columns.
Body Text Color Specifies the color of the text in the table body.

3. Footer Configuration

Setting Description
Footer Background Color Sets the background color of the table footer row.
Footer Border Color Defines the color of borders around footer cells.
Footer Text Color Changes the font color of the text within footer cells.

Once you have defined your preferred color scheme, click Save to apply changes.

Configuring Custom CSS

The Custom CSS section allows advanced users to write custom CSS rules to further personalize table appearance.

Note

This feature is recommended for users with prior knowledge of CSS. Incorrect or invalid CSS may cause layout issues in the system.

Info

Here you have added custom CSS that can be applied to the datatable only.

After entering your CSS code, click Save to apply the changes.

1 views