Skip to content

UI.Table

Name Mandatory Description Default Type
⬅️ Input The value that will be passed to the Columns and Rows shards of the table. [Any]
Output ➡️ The output of this shard will be its input. [Any]
Builder No Sequence of shards to build each column, repeated for each row. [] [None Shard [Shard]]
Columns No Configuration of the columns. none [{Any}]None
Striped No Whether to alternate a subtle background color to every other row. none BoolVar(Bool)None
Resizable No Whether columns can be resized within their specified range. none BoolVar(Bool)None
RowIndex No Variable to hold the row index, to be used within Rows. Var: Table.RowIndex IntVar(Int)None

Table layout.

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@wire(ui-wire {
  UI.Window(
    Position: @f2(0 0)
    Anchor: Anchor::Center
    Width: 200
    Height: 200
    Flags: [WindowFlags::NoResize]
    Contents: {
      [
        @i2(0) @i2(0 1) @i2(1) @i2(1 0)]
      UI.Table(
        Columns: [
          {Header: "A"}
          {Header: "B"}
          {Header: "A xor B"}]
        Builder: [
          {Take(0) | ToString | UI.Label}
          {Take(1) | ToString | UI.Label}
          {
            {Take(0) >= a}
            {Take(1) >= b}
            a | Math.Xor(b) | ToString | UI.Label
          }]
      )
    }
  )
} Looped: true)

{ui-behavior: ui-wire}
 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
@wire(ui-wire {
  UI.Window(
    Position: @f2(0 0)
    Anchor: Anchor::Center
    Width: 200
    Height: 200
    Flags: [WindowFlags::NoResize]
    Contents: {
      [
        {Name: "Doe" Surname: "John"}
        {Name: "Dough" Surname: "Jane"}
        {Name: "Smith" Surname: "Dick"}]
      UI.Table(
        Resizable: true
        Striped: true
        RowIndex: index
        Columns: [
          {Initial: 20.0}
          {
            Header: "Surname"
            Initial: 100.0
            AtLeast: 60.0
            AtMost: 160.0
          }
          {
            Header: {
              "Name" | UI.Label(Style: {text_style: "Heading"})
              UI.Button("Up" Msg("Clicked Up") Style: {text_style: "Small"})
              UI.Button("Down" Msg("Clicked Down") Style: {text_style: "Small"})
            }
            Initial: 120.0
            AtLeast: 100.0
            AtMost: 160.0
          }]
        Builder: [
          {index | ToString | UI.Label}
          {Take("Surname") | UI.Label}
          {Take("Name") | UI.Label}]
      )
    }
  )
} Looped: true)

{ui-behavior: ui-wire}
 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@wire(ui-wire {
  UI.Window(
    Position: @f2(0 0)
    Anchor: Anchor::Center
    Width: 200
    Height: 200
    Flags: [WindowFlags::NoResize]
    Contents: {
      [
        {Name: "Doe" Surname: "John"}
        {Name: "Dough" Surname: "Jane"}
        {Name: "Smith" Surname: "Dick"}]
      UI.Table(
        Resizable: true
        Striped: true
        RowIndex: index
        Columns: [
          {Initial: 20.0}
          {
            Header: "Surname"
            Initial: 100.0
            AtLeast: 60.0
            AtMost: 160.0
          }
          {
            Header: "Name"
            Initial: 80.0
            AtLeast: 60.0
            AtMost: 160.0
          }]
        Builder: [
          {index | ToString | UI.Label}
          {Take("Surname") | UI.Label}
          {Take("Name") | UI.Label}]
      )
    }
  )
} Looped: true)

{ui-behavior: ui-wire}