feat: selectable table with sequence ordering

2026-10-05 19:05:01 +03:30
parent 6f2406caf6
commit 4ce2131677
1 changed files with 77 additions and 1 deletions
@@ -1,3 +1,79 @@
+import { useState } from "react";
+import { Table, Checkbox, Container, Badge } from "@mantine/core";
+
+interface BankAccount {
+  Selection: number;
+  Number: string;
+  Order: number;
+  Debit: number;
+  Credit: number;
+}
+
+const BankAccounts: BankAccount[] = [
+  { Selection: 0, Number: "1001", Order: 0, Debit: 0, Credit: 750000.0 },
+  { Selection: 0, Number: "1002", Order: 0, Debit: 0, Credit: 1500000.0 },
+  { Selection: 0, Number: "1003", Order: 0, Debit: 0, Credit: 140000.0 },
+  { Selection: 0, Number: "1004", Order: 0, Debit: 0, Credit: 170000.0 },
+];
+
 export default function App() {
-  return <></>;
+  const [selectedNumbers, setSelectedNumbers] = useState<string[]>([]);
+
+  const toggleRow = (number: string) => {
+    setSelectedNumbers((prev) =>
+      prev.includes(number)
+        ? prev.filter((x) => x !== number)
+        : [...prev, number],
+    );
+  };
+
+  const rows = BankAccounts.map((account) => {
+    const index = selectedNumbers.indexOf(account.Number);
+    const isSelected = index !== -1;
+    const order = isSelected ? index + 1 : 0;
+
+    return (
+      <Table.Tr
+        key={account.Number}
+        bg={isSelected ? "var(--mantine-color-blue-light)" : undefined}
+      >
+        <Table.Td>
+          <Checkbox
+            checked={isSelected}
+            onChange={() => toggleRow(account.Number)}
+            aria-label={`Select account ${account.Number}`}
+          />
+        </Table.Td>
+        <Table.Td>{account.Number}</Table.Td>
+        <Table.Td>
+          {isSelected ? (
+            <Badge color="blue" variant="filled" circle>
+              {order}
+            </Badge>
+          ) : (
+            <span style={{ color: "var(--mantine-color-dimmed)" }}>—</span>
+          )}
+        </Table.Td>
+        <Table.Td ta="right">{account.Debit}</Table.Td>
+        <Table.Td ta="right">{account.Credit}</Table.Td>
+      </Table.Tr>
+    );
+  });
+
+  return (
+    <Container size="lg" mt="xl">
+      <Table striped highlightOnHover withTableBorder withColumnBorders>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th w={40}>Selection</Table.Th>
+            <Table.Th>Number</Table.Th>
+            <Table.Th>Order</Table.Th>
+            <Table.Th ta="right">Debit</Table.Th>
+            <Table.Th ta="right">Credit</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>{rows}</Table.Tbody>
+      </Table>
+    </Container>
+  );
 }