Untitled
unknown
javascript
a year ago
2.3 kB
9
Indexable
"use client" import React, { useState } from 'react' import Pagination from '@/app/components/Pagination'; import Table from '@/app/components/Table' import Title from '@/app/components/Title'; import { useSupplier } from '@/app/hooks/useSupplierAPI'; import { SearchInput } from '@/app/components/SearchInput/SearchInput'; type Props = { columns: string[]; }; type CollegementoArticoli = { id: number; supplierID: string; supplierName: string; undefArticles: string; assignedArticles: number; }; type ColumnDefinitionType<T> = { key: keyof T; label: string; header: string; width?: number; }; const Articoli = (props: Props) => { const [currentPage, setCurrentPage] = useState(1); const [searchTerm, setSearchTerm] = useState(''); const { data } = useSupplier(); const filterData = (data: CollegementoArticoli[], searchTerm: string) => { return data.filter(item => item.supplierID.toLowerCase().includes(searchTerm.toLowerCase()) ); }; const handleSearch = (searchValue: string) => { setSearchTerm(searchValue); setCurrentPage(1); }; const { columns } = props; const defaultColumns: Array<ColumnDefinitionType<CollegementoArticoli>> = [ { key: 'supplierID', label: 'Fornitori', header: 'Fornitori' }, { key: 'supplierName', label: 'Analizzare', header: 'Analizzare' }, { key: 'undefArticles', label: 'Assegnati', header: 'Assegnati' }, { key: 'assignedArticles', label: 'Fatturato Value', header: 'Fatturato Value' } ]; return ( <div> <Title Title={'Collegamento Articoli'} /> <SearchInput defaultValue={''} onChange={handleSearch} /> <Table data={filterData(data, searchTerm)} // Filtrelenmiş veri kümesini kullan pageNumber={currentPage} pageSize={5} columns={columns && columns.length > 0 ? columns : defaultColumns} /> <Pagination pageSize={5} currentPage={currentPage} items={data.length} onPageChange={function (page: number): void { setCurrentPage(page) }} /> </div> ) } export default Articoli
Editor is loading...
Leave a Comment