hpe-design-system/apps/docs/src/examples/templates/ascending-navigation/components/PageTwoContent.js at 1d55c54649e2cb37bdcdcd475c765a1415172f9c · grommet/hpe-design-system · 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/* eslint-disable react/prop-types */
import { useState } from 'react';
import { Box, DataTable, Text } from 'grommet';

const data = [
  {
    id: 'id-1',
    displayName: 'Server 1',
    serialNumber: '8899569448808967',
    model: 'Proliant SY 480 Gen10',
    powerState: 'On',
    health: { summary: 'OK' },
    state: { connected: false },
  },
  {
    id: 'id-2',
    displayName: 'Server 2',
    serialNumber: '482148808968',
    model: 'Proliant SY 990 Gen9',
    powerState: 'Off',
    health: { summary: 'Warning' },
    state: { connected: true },
  },
  {
    id: 'id-3',
    displayName: 'Server 3',
    serialNumber: '3890108963',
    model: 'Proliant SY 990 Gen9',
    powerState: 'Off',
    health: { summary: 'Warning' },
    state: { connected: false },
  },
  {
    id: 'id-4',
    displayName: 'Server 4',
    serialNumber: '8508964',
    model: 'Proliant SY 660 Gen10',
    powerState: 'On',
    health: { summary: 'OK' },
    state: { connected: true },
  },
  {
    id: 'id-5',
    displayName: 'Server 5',
    serialNumber: '3123i4264',
    model: 'Proliant SY 660 Gen10',
    powerState: 'On',
    health: { summary: 'OK' },
    state: { connected: true },
  },
  {
    id: 'id-6',
    displayName: '3M442501WV',
    serialNumber: '4208964',
    model: 'ProLiant DL380 Gen10',
    powerState: 'Off',
    health: { summary: 'Critical' },
    state: { connected: true },
  },
  {
    id: 'id-7',
    displayName: 'ZFD3712GP',
    serialNumber: 'CCD21712GP',
    model: null,
    powerState: 'On',
    health: { summary: 'OK' },
    state: { connected: false },
  },
];

export const PageTwoContent = () => {
  const [selected, setSelected] = useState([]);

  return (
    <Box>
      <DataTable
        data={data}
        aria-describedby="Server data table"
        select={selected}
        onSelect={setSelected}
        columns={[
          {
            property: 'displayName',
            header: 'Name',
            primary: true,
            render: datum => <Text>{datum.displayName}</Text>,
          },
          {
            property: 'serialNumber',
            header: 'Serial Number',
          },
          {
            property: 'model',
            header: 'Model',
            render: datum => <Text>{datum.model || '—'}</Text>,
          },
          {
            property: 'powerState',
            header: 'Power',
          },
          {
            property: 'health',
            header: 'Health',
            render: datum => <Text>{datum.health?.summary}</Text>,
          },
        ]}
      />
    </Box>
  );
};