Properties
| Property | Type | Description |
|---|---|---|
| columnWidths | Map<int, StacTableColumnWidth> | Determines the column width on a column by column basis, if a particular column entry has null width defaultColumnWidth is used. See StacTableColumnWidth |
| defaultColumnWidth | StacTableColumnWidth | Determines the default column width. Defaults to flexColumnWidth. See StacTableColumnWidth |
| textDirection | StacTextDirection | Determines the direction in which the columns are ordered. Can be rtl or ltr. Defaults to rtl. |
| border | StacTableBorder | Defines the border style for StacTable. See StacTableBorder. |
| defaultVerticalAlignment | StacTableCellVerticalAlignment | Defines the verticalAlignment for the cells that don’t specify a verticalAlignment. Can be top, middle, bottom, baseline, fill & intrinsicHeight Defaults to top. |
| textBaseLine | StacTextBaseline | Defines the text baseline to use when verticalAlignment is baseline. Can be alphabetic or ideographic. There is no default value. |
| children | List<StacTableRow> | Rows that will be populated in the table. See StacTableRow. |
Example
- Dart
- JSON
- Preview
StacTable(
columnWidths: {
1: StacFixedColumnWidth(value: 200),
},
defaultColumnWidth: StacFlexColumnWidth(value: 1),
textDirection: StacTextDirection.ltr,
defaultVerticalAlignment: StacTableCellVerticalAlignment.bottom,
border: StacTableBorder(
color: '#428AF5',
width: 1.0,
style: StacBorderStyle.solid,
borderRadius: StacBorderRadius.all(16.0),
),
children: [
StacTableRow(
children: [
StacTableCell(
child: StacContainer(
color: '#40000000',
height: 50.0,
child: StacCenter(child: StacText(data: 'Header 1')),
),
),
StacTableCell(
child: StacContainer(
color: '#40000000',
height: 50.0,
child: StacCenter(child: StacText(data: 'Header 2')),
),
),
StacTableCell(
child: StacContainer(
color: '#40000000',
height: 50.0,
child: StacCenter(child: StacText(data: 'Header 3')),
),
),
],
),
StacTableRow(
children: [
StacTableCell(
child: StacSizedBox(
height: 50.0,
child: StacCenter(child: StacText(data: 'Row 1, Cell 1')),
),
),
StacTableCell(
child: StacSizedBox(
height: 50.0,
child: StacCenter(child: StacText(data: 'Row 1, Cell 2')),
),
),
StacTableCell(
child: StacSizedBox(
height: 50.0,
child: StacCenter(child: StacText(data: 'Row 1, Cell 3')),
),
),
],
),
],
)
{
"type": "table",
"columnWidths": {
"1": {
"type": "fixedColumnWidth",
"value": 200
}
},
"defaultColumnWidth": {
"type": "flexColumnWidth",
"value": 1
},
"textDirection": "ltr",
"defaultVerticalAlignment": "bottom",
"border": {
"color": "#428AF5",
"width": 1,
"style": "solid",
"borderRadius": {
"topLeft": 16,
"topRight": 16,
"bottomLeft": 16,
"bottomRight": 16
}
},
"children": [
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"child": {
"type": "container",
"color": "#40000000",
"height": 50,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "Header 1"
}
}
}
},
{
"type": "tableCell",
"child": {
"type": "container",
"color": "#40000000",
"height": 50,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "Header 2"
}
}
}
},
{
"type": "tableCell",
"child": {
"type": "container",
"color": "#40000000",
"height": 50,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "Header 3"
}
}
}
}
]
},
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"child": {
"type": "sizedBox",
"height": 50,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "Row 1, Cell 1"
}
}
}
},
{
"type": "tableCell",
"child": {
"type": "sizedBox",
"height": 50,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "Row 1, Cell 2"
}
}
}
},
{
"type": "tableCell",
"child": {
"type": "sizedBox",
"height": 50,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "Row 1, Cell 3"
}
}
}
}
]
}
]
}