Scribd
Upload
22 views6 pages

Basic Table Usage and Customization Guide

This document outlines the basic usage of a table in query mode, including creating datasets and customizing column controls. It details steps for adding various column types, formatting date columns, and implementing aggregate functions for totals in the table footer. Additionally, it provides guidance on customizing column styles based on specific conditions.

Uploaded by

CHIRAG GUPTA
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views6 pages

Basic Table Usage and Customization Guide

This document outlines the basic usage of a table in query mode, including creating datasets and customizing column controls. It details steps for adding various column types, formatting date columns, and implementing aggregate functions for totals in the table footer. Additionally, it provides guidance on customizing column styles based on specific conditions.

Uploaded by

CHIRAG GUPTA
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Table Basic usage

Overview

This example mainly demonstrates the basic usage of common column controls combined

with a table in query mode and the subtotal in the table footer.

Sample tableBase

1. Create a new dataset

Create pageDataset genderDs departmentDs hobbyDataset datasets.

2. Create a new table and edit column controls

2-1. Drag a Table container, change the ID to 'tableRef', and bind it to the 'pageDataSet' dataset.

2-2. Drag Index Column Group Column Put an Input Column and a Number Column inside the Group Column.

2-3. Drag Radio Column Switch Column Number Column 4 DataTime Column Select Column
Link Column CheckBox Colmun Textarea Column Please proceed to modify the values of the Title and Field accordingly.

2-4. Radio Column Select Column CheckBox Colmun in EditBind the dataset and fill in the values for Display Member and Value Member.

2-5. In the Format section of the DataTime Column, select ym for the first column, ymdt for the third column, and hms for the fourth column.

If there are format options that do not exist, you can add them in the '[Link]' file in the static resources. Alternatively,

you can directly input the desired format, such as 'YYYYMM', which represents year and month.

[Link] Column, select tag in 'Display Type' of 'Appearance', Colors can be customized. Enter the following code in the Tag Color Function:

(value, label, row) => {

if (value === '0') {

return 'red';

}else if (value === '1') {

return 'green';
} else {

return 'pink';

3. Total at the end of the table

[Link] on the table and select 'Show Footer' in the 'Footer Properties' section.

3-2. The label is in the current column:

Click on the Number Column inside the Group Column. In the 'Appearance' section, input 'Avg:' in the 'Aggregate Label' field.

You can choose 'Aggregate' from the [Link] the expression, input the method name 'ageAggregate'.

In the page script, input the following code

const ageAggregate = (data, filed) => {


let avgNum = 0;

[Link]((item)=>{

avgNum+=[Link];

})

return [Link](avgNum/[Link]);

3-3. The label is not in the current column: In the 'Appearance' section of the previous column, enter 'Total:'

and select 'sum' from the 'Aggregate' drop-down value.

4. Custom column styles.

4-1. Customize the method or method name in the 'Class Name' expression of the current column [Appearance]. The code is as follows:
({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) => {

if ([Link] > 35) {

return 'ageCla';

4-2. Enter the following code in the style:

:deep(.ageCla){

color: red;

You might also like