frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ad tanstak test-table

Browse Source
This commit is contained in:
smanylov
2025-12-12 14:22:00 +07:00
parent fcf9114319
commit 54c63a6a40
4 changed files with 363 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+57
View File
@@ -9,7 +9,9 @@
"version": "0.1.0",
"dependencies": {
"@tailwindcss/postcss": "^4.1.17",
"@tanstack/match-sorter-utils": "^8.19.4",
"@tanstack/react-query": "^5.90.11",
"@tanstack/react-table": "^8.21.3",
"clsx": "^2.1.1",
"jose": "^6.1.2",
"next": "^16.0.7",
@@ -2176,6 +2178,22 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/@tanstack/match-sorter-utils": {
"version": "8.19.4",
"resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz",
"integrity": "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==",
"license": "MIT",
"dependencies": {
"remove-accents": "0.5.0"
},
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tanstack/query-core": {
"version": "5.90.11",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.11.tgz",
@@ -2202,6 +2220,39 @@
"react": "^18 || ^19"
}
},
"node_modules/@tanstack/react-table": {
"version": "8.21.3",
"resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
"integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
"license": "MIT",
"dependencies": {
"@tanstack/table-core": "8.21.3"
},
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/@tanstack/table-core": {
"version": "8.21.3",
"resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
"integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tybys/wasm-util": {
"version": "0.10.1",
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -6665,6 +6716,12 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/remove-accents": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
"integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==",
"license": "MIT"
},
"node_modules/reselect": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
package.json
+2
View File
@@ -10,7 +10,9 @@
},
"dependencies": {
"@tailwindcss/postcss": "^4.1.17",
"@tanstack/match-sorter-utils": "^8.19.4",
"@tanstack/react-query": "^5.90.11",
"@tanstack/react-table": "^8.21.3",
"clsx": "^2.1.1",
"jose": "^6.1.2",
"next": "^16.0.7",
src/app/components/tanstakTable.tsx
+302
View File
@@ -0,0 +1,302 @@
'use client';
import { useState, useMemo } from 'react';
import {
useReactTable,
getCoreRowModel,
getSortedRowModel,
getPaginationRowModel,
getFilteredRowModel,
ColumnDef,
SortingState,
ColumnFiltersState,
FilterFn,
} from '@tanstack/react-table';
import { rankItem } from '@tanstack/match-sorter-utils';
// Типы данных
type Person = {
id: number;
name: string;
age: number;
email: string;
department: string;
salary: number;
};
// Кастомная функция фильтрации
const fuzzyFilter: FilterFn<Person> = (row, columnId, value, addMeta) => {
const itemRank = rankItem(row.getValue(columnId), value);
addMeta({ itemRank });
return itemRank.passed;
};
// Определяем тип для фильтров
declare module '@tanstack/react-table' {
interface FilterFns {
fuzzy: FilterFn<unknown>;
}
}
export default function DataTable() {
// Данные
const [data] = useState<Person[]>([
{ id: 1, name: 'Иван Петров', age: 28, email: 'ivan@example.com', department: 'IT', salary: 80000 },
{ id: 2, name: 'Анна Сидорова', age: 32, email: 'anna@example.com', department: 'HR', salary: 65000 },
{ id: 3, name: 'Сергей Иванов', age: 45, email: 'sergey@example.com', department: 'Финансы', salary: 95000 },
{ id: 4, name: 'Мария Кузнецова', age: 26, email: 'maria@example.com', department: 'Маркетинг', salary: 60000 },
{ id: 5, name: 'Алексей Смирнов', age: 38, email: 'alex@example.com', department: 'IT', salary: 85000 },
{ id: 6, name: 'Ольга Васнецова', age: 29, email: 'olga@example.com', department: 'HR', salary: 62000 },
{ id: 7, name: 'Дмитрий Орлов', age: 41, email: 'dmitry@example.com', department: 'Финансы', salary: 92000 },
{ id: 8, name: 'Екатерина Новикова', age: 35, email: 'ekaterina@example.com', department: 'Маркетинг', salary: 70000 },
]);
// Состояния
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState('');
const [rowSelection, setRowSelection] = useState({});
// Определение колонок
const columns = useMemo<ColumnDef<Person>[]>(
() => [
{
id: 'select',
header: ({ table }) => (
<input
type="checkbox"
checked={table.getIsAllPageRowsSelected()}
onChange={table.getToggleAllPageRowsSelectedHandler()}
/>
),
cell: ({ row }) => (
<input
type="checkbox"
checked={row.getIsSelected()}
onChange={row.getToggleSelectedHandler()}
/>
),
enableSorting: false,
enableColumnFilter: false,
},
{
accessorKey: 'id',
header: 'ID',
cell: (info) => info.getValue(),
},
{
accessorKey: 'name',
header: 'Имя',
cell: (info) => info.getValue(),
filterFn: fuzzyFilter,
},
{
accessorKey: 'age',
header: 'Возраст',
cell: (info) => info.getValue(),
},
{
accessorKey: 'email',
header: 'Email',
cell: (info) => info.getValue(),
},
{
accessorKey: 'department',
header: 'Отдел',
cell: (info) => info.getValue(),
},
{
accessorKey: 'salary',
header: 'Зарплата',
cell: (info) => `$${Number(info.getValue()).toLocaleString()}`,
},
],
[]
);
// Создание таблицы
const table = useReactTable({
data,
columns,
filterFns: {
fuzzy: fuzzyFilter,
},
state: {
sorting,
columnFilters,
globalFilter,
rowSelection,
},
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
onGlobalFilterChange: setGlobalFilter,
onRowSelectionChange: setRowSelection,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getFilteredRowModel: getFilteredRowModel(),
globalFilterFn: fuzzyFilter, // Используем саму функцию, а не строку
});
return (
<div className="p-6 max-w-6xl mx-auto">
<h1 className="text-2xl font-bold mb-6">Таблица сотрудников</h1>
{/* Глобальный поиск */}
<div className="mb-4">
<input
type="text"
placeholder="Поиск по всем полям..."
value={globalFilter}
onChange={(e) => setGlobalFilter(e.target.value)}
className="px-4 py-2 border rounded-md w-full max-w-md"
/>
</div>
{/* Фильтры по колонкам */}
<div className="flex gap-4 mb-4 flex-wrap">
{table.getAllColumns()
.filter(column => column.getCanFilter() && column.id !== 'select')
.map(column => (
<div key={column.id} className="flex flex-col">
<label className="text-sm font-medium mb-1">
{typeof column.columnDef.header === 'string'
? column.columnDef.header
: column.id}
</label>
{column.id === 'department' ? (
<select
value={(column.getFilterValue() as string) || ''}
onChange={e => column.setFilterValue(e.target.value)}
className="px-3 py-1 border rounded"
>
<option value="">Все отделы</option>
<option value="IT">IT</option>
<option value="HR">HR</option>
<option value="Финансы">Финансы</option>
<option value="Маркетинг">Маркетинг</option>
</select>
) : column.id === 'age' ? (
<input
type="number"
placeholder="Возраст от..."
value={(column.getFilterValue() as number) || ''}
onChange={e => column.setFilterValue(e.target.value ? parseInt(e.target.value) : undefined)}
className="px-3 py-1 border rounded w-32"
/>
) : (
<input
type="text"
placeholder={`Фильтр ${column.id}`}
value={(column.getFilterValue() as string) || ''}
onChange={e => column.setFilterValue(e.target.value)}
className="px-3 py-1 border rounded"
/>
)}
</div>
))}
</div>
{/* Таблица */}
<div className="overflow-x-auto border rounded-lg">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th
key={header.id}
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer"
onClick={header.column.getToggleSortingHandler()}
>
<div className="flex items-center">
{header.isPlaceholder
? null
: typeof header.column.columnDef.header === 'string'
? header.column.columnDef.header
: header.column.id}
{{
asc: ' 🔼',
desc: ' 🔽',
}[header.column.getIsSorted() as string] ?? null}
</div>
</th>
))}
</tr>
))}
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{table.getRowModel().rows.map(row => (
<tr key={row.id} className="hover:bg-gray-50">
{row.getVisibleCells().map(cell => (
<td key={cell.id} className="px-6 py-4 whitespace-nowrap">
{typeof cell.column.columnDef.cell === 'function'
? cell.column.columnDef.cell(cell.getContext())
: cell.getValue() as string}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
{/* Пагинация */}
<div className="flex items-center justify-between mt-4">
<div className="flex items-center gap-2">
<button
className="px-3 py-1 border rounded disabled:opacity-50"
onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()}
>
⟪
</button>
<button
className="px-3 py-1 border rounded disabled:opacity-50"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
⟨
</button>
<button
className="px-3 py-1 border rounded disabled:opacity-50"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
⟩
</button>
<button
className="px-3 py-1 border rounded disabled:opacity-50"
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>
⟫
</button>
</div>
<div className="flex items-center gap-4">
<span>
Страница{' '}
<strong>
{table.getState().pagination.pageIndex + 1} из {table.getPageCount()}
</strong>
</span>
<select
value={table.getState().pagination.pageSize}
onChange={e => table.setPageSize(Number(e.target.value))}
className="px-2 py-1 border rounded"
>
{[5, 10, 20, 30, 40, 50].map(pageSize => (
<option key={pageSize} value={pageSize}>
Показать {pageSize}
</option>
))}
</select>
<span>
Всего строк: {data.length} | Отфильтровано: {table.getFilteredRowModel().rows.length}
</span>
</div>
</div>
</div>
);
}
src/app/ui/dashboard/files-table.tsx
+2 -1
View File
@@ -1,7 +1,8 @@
import DataTable from '@/app/components/tanstakTable';
export default function FilesTable() {
return (
<div>
table
<DataTable/>
</div>
)
}