testReact/Table.js at master · egloosrl/testReact · 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
import React, { useState, useEffect } from "react"

const ComponentName = props => {
  const [users, setUsers] = useState([
    {
      name: "Mario",
      surname: "Rossi",
      username: "mario.rossi",
      email: "mario.rossi@email.com",
      phone: "1234567890",
      address: "Via Roma 1",
      cap: "12345",
      city: "Roma",
      province: "RM",
      state: "Italia"
    },
    {
      name: "Luigi",
      surname: "Verdi",
      username: "luigi.verdi",
      email: "luigi.verdi@email.com",
      phone: "1234567890",
      address: "Via Verdi 1",
      cap: "12345",
      city: "Napoli",
      province: "NA",
      state: "Italia"
    },
    {
      name: "Giovanni",
      surname: "Bianchi",
      username: "giovanni.bianchi",
      email: "giovanni.bianchi@email.com",
      phone: "1234567890",
      address: "Via Rossi 1",
      cap: "12345",
      city: "Roma",
      province: "RM",
      state: "Italia"
    }
  ])

  const handleSorting = e => {
    // Table sorting
  }

  const handleFilter = e => {
    // Table filtering
  }

  return (
    <>
      <div className="filters">
        <div className="filter">
          <label htmlFor="name">City</label>
          <input type="checkbox" name="city" id="city" onClick={handleFilter} />
        </div>
        <div className="filter">
          <label htmlFor="name">Province</label>
          <input type="checkbox" name="province" id="province" onClick={handleFilter} />
        </div>
        <div className="filter">
          <label htmlFor="name">State</label>
          <input type="checkbox" name="state" id="state" onClick={handleFilter} />
        </div>
      </div>

      <table>
        <thead>
          <tr>
            <th onClick={handleSorting}>Name</th>
            <th onClick={handleSorting}>Surname</th>
            <th onClick={handleSorting}>Username</th>
            <th onClick={handleSorting}>Email</th>
            <th onClick={handleSorting}>Phone</th>
            <th onClick={handleSorting}>Address</th>
            <th onClick={handleSorting}>Cap</th>
            <th onClick={handleSorting}>City</th>
            <th onClick={handleSorting}>Province</th>
            <th onClick={handleSorting}>State</th>
          </tr>
        </thead>

        <tbody>
          {Boolean(users.length) &&
            users.map((item, index) => (
              <tr key={index}>
                <td>{item.name}</td>
                <td>{item.surname}</td>
                <td>{item.username}</td>
                <td>{item.email}</td>
                <td>{item.phone}</td>
                <td>{item.address}</td>
                <td>{item.cap}</td>
                <td>{item.city}</td>
                <td>{item.province}</td>
                <td>{item.state}</td>
              </tr>
            ))}
        </tbody>
      </table>
    </>
  )
}

export default ComponentName