Tables View Source



An example of a table component.



Imports


Import React and the TableContent, TableColumn Components.


0
import * as React from "react";
1
import { TableContent, TableColumn } from "slate-react-system";


Usage


Declare the Group and Table components.

0
class ExampleOne extends React.Component {
1
  state = { exampleOne: null };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <Table
8
        data={{
9
          columns: [
10
            { key: "a", name: "Link", type: "FILE_LINK" },
11
            { key: "b", name: "Value", width: "88px" },
12
            {
13
              key: "c",
14
              name: "Tooltip",
15
              tooltip: "A tooltip.",
16
              width: "128px",
17
            },
18
            { key: "d", name: "Copyable", copyable: true, width: "88px" },
19
          ],
20
          rows: [
21
            {
22
              id: 1,
23
              a: "col 1 row 1",
24
              b: "col 1 row 2",
25
              c: "col 1 row 3",
26
              d: "col 1 row 4",
27
            },
28
            {
29
              id: 2,
30
              a: "col 2 row 1",
31
              b: "col 2 row 2",
32
              c: "col 2 row 3",
33
              d: "col 2 row 4",
34
            },
35
            {
36
              id: 3,
37
              a: "col 3 row 1",
38
              b: "col 3 row 2",
39
              c: "col 3 row 3",
40
              d: "col 3 row 4",
41
            },
42
            {
43
              id: 3,
44
              a: "col 4 row 1",
45
              b: "col 4 row 2",
46
              c: "col 4 row 3",
47
              d: "col 4 row 4",
48
            },
49
          ],
50
        }}
51
        selectedRowId={this.state.exampleOne}
52
        onChange={this._handleChange}
53
        name="exampleOne"
54
      />
55
    );
56
  }
57
}


Output


LinkValueTooltipCopyable
col 1 row 1
col 1 row 2
col 1 row 3
col 1 row 4
col 2 row 1
col 2 row 2
col 2 row 3
col 2 row 4
col 3 row 1
col 3 row 2
col 3 row 3
col 3 row 4
col 4 row 1
col 4 row 2
col 4 row 3
col 4 row 4


Accepted React Properties


Tables
NameTypeDefaultDescription
key
string
null
Column key value
id
number
null
Row ID value
name
string
null
Name of the column
text
string
null
Table content text
data
string
null
Table content data
tooltip
string
null
If not null, a tooltip will be visible
copyable
boolean
false
If true, a copyable icon will be visible
type
string
null
Use FILE_LINK to add a linkable column
width
number
null
Width of the column
action
string
null
Row action
hideLabel
boolean
false
If true, column label will be hidden
children
string
null
Row child value
onAction
string
null
onAction function binding
onChange
string
null
onChange function binding
selectedRowId
number
null
ID value of the selected row



TableContents


The Table Component has many TableContent properties that can be added to alter the column using the type props.

0
class ExampleTwo extends React.Component {
1
  state = { exampleTwo: null };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <Table
8
        data={{
9
          columns: [
10
            {
11
              key: "a",
12
              name: "Upload",
13
              width: "112px",
14
              type: "BANDWIDTH_UPLOAD",
15
            },
16
            {
17
              key: "b",
18
              name: "Download",
19
              width: "112px",
20
              type: "BANDWIDTH_DOWNLOAD",
21
            },
22
            {
23
              key: "c",
24
              name: "Tranaction Status",
25
              width: "128px",
26
              type: "TRANSACTION_STATUS",
27
            },
28
            {
29
              key: "d",
30
              name: "Deal Status",
31
              width: "184px",
32
              type: "DEAL_STATUS",
33
            },
34
            { key: "e", name: "Icon", width: "88px", type: "ICON" },
35
          ],
36
          rows: [
37
            { id: 1, a: "500", b: "200", c: "2", d: "1", e: "PNG" },
38
            { id: 2, a: "20", b: "10", c: "1", d: "2", e: "FOLDER" },
39
            { id: 3, a: "100", b: "250", c: "2", d: "3", e: "PNG" },
40
            { id: 3, a: "4", b: "135", c: "1", d: "4", e: "FOLDER" },
41
          ],
42
        }}
43
        selectedRowId={this.state.exampleTwo}
44
        onChange={this._handleChange}
45
        name="exampleTwo"
46
      />
47
    );
48
  }
49
}


Output


UploadDownloadTranaction StatusDeal StatusIcon
500.00 B
200.00 B
Available on network
20.00 B
10.00 B
Sealed On Filecoin
Retrieval deal proposed.
100.00 B
250.00 B
Retrieval deal accepted.
4.00 B
135.00 B
Sealed On Filecoin
Data transfer in progress.


Accepted Type Properties


TableContent
NameTypeDescription
DEAL_CATEGORY
number
"1": "Storage", else: "Retrieval"
LOCATION
string
String for location
BUTTON
string
String for button text
TRANSACTION_DIRECTION
number
"1": incoming badge, "2": outgoing badge
TRANSACTION_STATUS
number
"1": complete badge, "2": pending badge
ICON
string
"PNG": image icon, "FOLDER": folder icon
AVATAR
null
Adds the users avatar and online status
DEAL_STATUS_RETRIEVAL
number
"0": "Local file", "1": "Available on network", "2": "Retrieval deal proposed.", "3": "Retrieval deal accepted.", "4": "Data transfer in progress.", "5": "Data transfer completed.", "6": "Retrieved from network.",
DEAL_STATUS
number
"0": "Local file", "1": "Available on network", "2": "Retrieval deal proposed.", "3": "Retrieval deal accepted.", "4": "Data transfer in progress.", "5": "Data transfer completed.", "6": "Retrieved from network.",
BANDWIDTH_UPLOAD
number
Outputs an upload icon with the {number} of bytes
BANDWIDTH_DOWNLOAD
number
Outputs a download icon with the {number} of bytes
MINER_AVAILABILITY
number
"1": "true", "2": null
DEAL_AUTO_RENEW
number
"1": "true", else: "false"
NOTIFICATION_ERROR
string
String with error notification badge
FILE_DATE
string
String to date
FILE_SIZE
number
Outputs "{number} Bytes"
FILE_LINK
string
String of file link


ComponentsAvatar GroupButtonsCard TabsCheckboxesColorsDropdownsGlobeHover TileIconsInputsList EditorLoadersNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source