lab 4 done

labs/lab4/src/components/Table.jsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import TableHead from './TableHead.jsx';
+import TableBody from './TableBody.jsx';
+import Filter from './Filter.jsx';
+
+/*
+   компонент, выводящий на страницу таблицу с пагинацией
+   пропсы:
+      data - данные для таблицы в виде массива объектов
+*/
+
+const Table = (props) => {
+    const [activePage, setActivePage] = useState("1");
+
+    const [dataTable, setDataTable] = useState(props.data);
+    const updateDataTable = (value) => setDataTable(value);
+
+    const changeActive = (event) => {
+        setActivePage(event.target.innerHTML);
+    };
+
+    //количество страниц разбиения таблицы
+    const n = Math.ceil(dataTable.length / props.amountRows);
+
+    // массив с номерами страниц
+    const arr = Array.from({ length: n }, (v, i) => i + 1);
+
+    //формируем совокупность span с номерами страниц
+    const pages = arr.map((item, index) =>
+        <span className={index == (activePage - 1) ? "selected" : ""} key={index} onClick={changeActive}> {item} </span>
+    );
+
+    return (
+        <>
+            <h4>Фильтры</h4>
+            <Filter filtering={updateDataTable} data={dataTable} fullData={props.data} />
+
+            <table>
+                <TableHead head={Object.keys(props.data[0])} />
+                <TableBody body={dataTable} amountRows={props.amountRows} numPage={activePage} />
+            </table>
+
+            {n>1 &&
+                <div>
+                    {pages}
+                </div>
+            }
+        </>
+    )
+}
+
+export default Table;