MiTable

The MiTable component is a stateful Flutter widget designed to display tabular data. It offers features like column configuration, row selection, and responsiveness for different screen sizes. MiTable is intended to be configured via JSON, allowing for dynamic table creation in your applications.

Overview

MiTable simplifies displaying datasets in a structured table format within Flutter apps. Key features include:

Configurable Columns: Define column titles, widths, and data keys via JSON.
Data Display: Display lists of data in rows.
Row Selection: Enable users to select rows, with options for single or multiple selection.
Responsive Layout: Adapts its presentation for compact (e.g., mobile) and regular (e.g., desktop) screen sizes.
Data Binding: Connect table data and selected rows to application state variables.

Component Name: table

JSON key: "component": "table".

Parameters

The MiTable component is customized using the following JSON parameters, in addition to inherited styling parameters from MiStatefulWidgetOld:

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
`data`	`List<List<Map<String, dynamic>>>`	`List<List>`	Data: A list of maps representing the table data. Each map in the list represents a row, and keys within the map correspond to column keys.	`[]` (Empty List)	Yes	Yes
`columns`	`List<List<Map<String, String>>>`	`List<List>`	Columns: A list defining table columns. Each item is a map with the following keys: - `"title"`: Column header text (String). - `"key"`: Key to access data from the `data` list (String). - `"width"`: Column width. Options: `"flex"`, `"intrinsic"`, or a `num` for fixed width. `"flex"` can take an optional `"flex"` value (num) to define flex factor. Defaults to `"flex": 1`. - `"flex"`: (Optional, num) Flex factor if `"width"` is `"flex"`.	`[]` (Empty List)	Yes	Yes
`canSelectRow`	`bool`	`bool`	Can Select Row: If `true`, rows in the table become selectable, and checkboxes are added for row selection.	`false`	Yes	Yes
`allowMultipleSelectRow`	`bool`	`bool`	Allow Multiple Select Row: If `true` (and `canSelectRow` is `true`), users can select multiple rows. If `false`, only single row selection is allowed.	`true`	Yes	Yes
`onSelectRow`	`dynamic`	`dynamic`	On Select Row Action: JSON action to be executed when a row is selected or deselected. This action can be used to update application state or trigger other actions based on row selection.	`null`	Yes	Yes
`selectedRowKey`	`String`	`dynamic`	Selected Row Key: State variable key to which the selected row data will be bound. If `allowMultipleSelectRow` is `true`, the value bound will be a `List` of selected row data. Otherwise, it will be a single `Map` representing the selected row, or `null` if no row is selected.	`null`	Yes	Yes
`padding`	`List<num>`	`EdgeInsets`	Inner Padding: Sets padding within the table container. Inherited from `MiStatefulWidgetOld`.	`null`	Yes	Yes
`margin`	`List<num>`	`EdgeInsets`	Outer Margin: Defines the margin surrounding the table widget. Inherited from `MiStatefulWidgetOld`.	`null`	Yes	Yes
`alignment`	`String`	`AlignmentGeometry`	Alignment: Specifies how the table should be aligned within its parent. Inherited from `MiStatefulWidgetOld`.	`"topLeft"`	Yes	No
`color`	`String`	`Color`	Background Color: Background color of the table's container. Inherited from `MiStatefulWidgetOld`.	`null`	Yes	No
`width`	`num`	`double`	Fixed Width: Defines a fixed width for the table component. Inherited from `MiStatefulWidgetOld`.	`null`	Yes	No
`height`	`num`	`double`	Fixed Height: Defines a fixed height for the table component. Inherited from `MiStatefulWidgetOld`.	`null`	Yes	No

Note:

Data Binding: The data and selectedRowKey parameters facilitate data binding. data can be bound to a state variable holding the dataset for the table. selectedRowKey binds the selected row (or rows) to a state variable, enabling two-way data flow.
Column Definition: The columns parameter is critical for structuring the table. Each column definition requires a "title" (header text) and a "key" (to map to data fields). Column widths can be configured using "width".
Row Selection Configuration: canSelectRow and allowMultipleSelectRow parameters control row selection behavior. When canSelectRow is true, checkboxes are displayed in the table.
Responsiveness: MiTable uses ResponsiveBuilder to render different layouts based on screen width. On compact screens, it uses a ListView.builder for a more vertical, card-like presentation of rows. On regular screens, it uses a standard Table widget.
State Variables: MiTable internally uses a state variable selectedIndexList to track selected row indices. This is part of its state management to handle selections.
MiStatefulWidgetOld Inheritance: MiTable extends MiStatefulWidgetOld, inheriting base styling and layout parameters (padding, margin, alignment, color, width, height) and the associated widget lifecycle management.

Example JSON Configuration

Example 1: Basic Table Display

{
  "component": "table",
  "data": [
    { "name": "Apple", "price": 1.0 },
    { "name": "Banana", "price": 0.5 },
    { "name": "Orange", "price": 0.8 }
  ],
  "columns": [
    { "title": "Fruit", "key": "name" },
    { "title": "Price", "key": "price" }
  ],
  "margin": [8, 16, 8, 16]
}

Explanation of Example 1:

component: "table": Identifies this as a MiTable component.
data: Provides sample data as a list of maps. Each map has keys "name" and "price".
columns: Defines two columns:
- "title": "Fruit", "key": "name": Column header "Fruit", displaying data from the "name" field in each data item.
- "title": "Price", "key": "price": Column header "Price", displaying data from the "price" field.
margin: [8, 16, 8, 16]: Sets margins around the table.

Example 2: Table with Row Selection Enabled (Single Select)

{
  "component": "table",
  "data": [
    { "id": 1, "product": "Laptop", "price": 1200 },
    { "id": 2, "product": "Keyboard", "price": 75 },
    { "id": 3, "product": "Mouse", "price": 25 }
  ],
  "columns": [
    { "title": "Product", "key": "product" },
    { "title": "Price", "key": "price" }
  ],
  "canSelectRow": true,
  "allowMultipleSelectRow": false,
  "selectedRowKey": "selectedProduct",
  "margin": [8, 16, 8, 16]
}

Explanation of Example 2:

canSelectRow: true: Enables row selection in the table.
allowMultipleSelectRow: false: Restricts selection to a single row at a time.
selectedRowKey: "selectedProduct": Binds the selected row data to the state variable "selectedProduct". When a row is selected, the selectedProduct state variable will be updated with the data of the selected row (a Map).

Example 3: Table with Row Selection and "On Select Row Action" (Multiple Select)

{
  "component": "table",
  "data": [
    { "item": "Task 1", "status": "Pending" },
    { "item": "Task 2", "status": "In Progress" },
    { "item": "Task 3", "status": "Completed" }
  ],
  "columns": [
    { "title": "Task", "key": "item" },
    { "title": "Status", "key": "status" }
  ],
  "canSelectRow": true,
  "allowMultipleSelectRow": true,
  "selectedRowKey": "selectedTasks",
  "onSelectRow": "customAction",
  "margin": [8, 16, 8, 16]
}

Explanation of Example 3:

canSelectRow: true: Enables row selection.
allowMultipleSelectRow: true: Allows users to select multiple rows.
selectedRowKey: "selectedTasks": Binds the list of selected row data to the state variable "selectedTasks". selectedTasks will hold a List of Maps representing the data of all selected rows.
onSelectRow: ...: Defines an action to execute when row selection changes.

Example 4: Table with Column Width Configuration

{
  "component": "table",
  "data": [
    {
      "name": "Product A",
      "description": "Very long description of product A",
      "price": 100
    },
    { "name": "Product B", "description": "Short description", "price": 50 }
  ],
  "columns": [
    { 
      "title": "Name", 
      "key": "name", 
      "width": "flex", 
      "flex": 2
    },
    {
      "title": "Description",
      "key": "description",
      "width": "flex",
      "flex": 3
    },
    { 
      "title": "Price", 
      "key": "price", 
      "width": 100
    }
  ],
  "margin": [8, 16, 8, 16]
}

Explanation of Example 4:

columns width configuration:
- "Name" column: "width": "flex", "flex": 2 - Flexible width, with a flex factor of 2.
- "Description" column: "width": "flex", "flex": 3 - Flexible width, with a flex factor of 3 (will take up more space than "Name").
- "Price" column: "width": 100 - Fixed width of 100 logical pixels.

Overview​

Parameters​

Example JSON Configuration​

Overview

Parameters

Example JSON Configuration