52 lines
1.6 KiB
JavaScript
52 lines
1.6 KiB
JavaScript
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>Filters</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; |