rescript-ink/examples/table.res at main · cometkim/rescript-ink · GitHub

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
45
46
47
48
49
50
51
52
53
54
55
56
57
open Ink

module Chance = {
  type t = {
    name: (. unit) => string,
    email: (. unit) => string,
  }

  @module @new
  external make: unit => t = "chance"
}

let chance = Chance.make()

let users = Belt.Array.makeBy(10, i =>
  {
    "id": i->Belt.Int.toString,
    "name": chance.name(.),
    "email": chance.email(.),
  }
)

module Table = {
  @react.component
  let make = () => {
    <Box flexDirection=#column width={#length(80)}>
      <Box>
        <Box width={#percent(10.0)}>
          <Text> {React.string("ID")} </Text>
        </Box>
        <Box width={#percent(50.0)}>
          <Text> {React.string("Name")} </Text>
        </Box>
        <Box width={#percent(40.0)}>
          <Text> {React.string("Email")} </Text>
        </Box>
      </Box>
      {React.array(
        users->Belt.Array.map(user =>
          <Box key={user["id"]}>
            <Box width={#percent(10.0)}>
              <Text> {React.string(user["id"])} </Text>
            </Box>
            <Box width={#percent(50.0)}>
              <Text> {React.string(user["name"])} </Text>
            </Box>
            <Box width={#percent(40.0)}>
              <Text> {React.string(user["email"])} </Text>
            </Box>
          </Box>
        ),
      )}
    </Box>
  }
}

let _ = render(<Table />, ())