/
RandomTable.tsx
46 lines (44 loc) · 1.17 KB
/
RandomTable.tsx
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
"use client"
import { Suspense, useState } from "react"
import { Row } from "./rows"
export const RandomTable = ({ initialRows }: { initialRows: Row[] }) => {
const [rows, setRows] = useState(initialRows)
return (
<Suspense>
<table>
<thead>
<tr>
<th>
Column 1{" "}
<button
onClick={() => {
const col = Math.floor(4 * Math.random())
const newRows = [...rows]
const reverse = Math.random() < 0.5 ? 1 : -1
newRows.sort(
(a, b) => reverse * a[col].text.localeCompare(b[0].text)
)
setRows(newRows)
}}
>
⬆️⬇️
</button>
</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
{rows.map((row, i) => (
<tr key={i}>
{row.map((cell, j) => (
<td key={j}>{cell.text}</td>
))}
</tr>
))}
</tbody>
</table>
</Suspense>
)
}