Merge pull request 'dev-1' (#2) from dev-1 into main

Reviewed-on: #2
This commit was merged in pull request #2.
This commit is contained in:
2025-12-12 15:23:52 +08:00
7 changed files with 822 additions and 5 deletions
+57
View File
@@ -9,7 +9,9 @@
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@tailwindcss/postcss": "^4.1.17", "@tailwindcss/postcss": "^4.1.17",
"@tanstack/match-sorter-utils": "^8.19.4",
"@tanstack/react-query": "^5.90.11", "@tanstack/react-query": "^5.90.11",
"@tanstack/react-table": "^8.21.3",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"jose": "^6.1.2", "jose": "^6.1.2",
"next": "^16.0.7", "next": "^16.0.7",
@@ -2176,6 +2178,22 @@
"node": "^10 || ^12 || >=14" "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": { "node_modules/@tanstack/query-core": {
"version": "5.90.11", "version": "5.90.11",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.11.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.11.tgz",
@@ -2202,6 +2220,39 @@
"react": "^18 || ^19" "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": { "node_modules/@tybys/wasm-util": {
"version": "0.10.1", "version": "0.10.1",
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz", "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -6665,6 +6716,12 @@
"url": "https://github.com/sponsors/ljharb" "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": { "node_modules/reselect": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz", "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+2
View File
@@ -10,7 +10,9 @@
}, },
"dependencies": { "dependencies": {
"@tailwindcss/postcss": "^4.1.17", "@tailwindcss/postcss": "^4.1.17",
"@tanstack/match-sorter-utils": "^8.19.4",
"@tanstack/react-query": "^5.90.11", "@tanstack/react-query": "^5.90.11",
"@tanstack/react-table": "^8.21.3",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"jose": "^6.1.2", "jose": "^6.1.2",
"next": "^16.0.7", "next": "^16.0.7",
+410 -3
View File
@@ -1,7 +1,414 @@
export default function Page() { export default function Page() {
return ( return (
<div> <main className="main-content">
terms of use <div className="container">
</div> <div className="hero-container">
<h1 className="hero-title">Политика конфиденциальности</h1>
<p className="hero-subtitle">
Настоящая политика определяет, как мы собираем, используем и защищаем ваши персональные данные. Мы серьезно относимся к вашей конфиденциальности и обеспечиваем надежную защиту информации.
</p>
</div>
<div className="document-content-container">
<div className="document-content">
<div className="document-section">
<h2>1. Общие положения</h2>
<p>Настоящая Политика конфиденциальности (далее «Политика») определяет порядок обработки персональных данных пользователей сервиса No Copy, принадлежащего ООО «НО КОПИ» (далее «Компания», «Оператор»).</p>
<p>Политика разработана в соответствии с:</p>
<ul>
<li>Федеральным законом «О персональных данных» 152-ФЗ</li>
<li>Федеральным законом «Об информации, информационных технологиях и о защите информации» 149-ФЗ</li>
<li>Общим регламентом по защите данных (GDPR) Европейского Союза</li>
<li>Иными применимыми нормативными правовыми актами</li>
</ul>
<div className="important-note">
<p>Используя наш сервис, вы соглашаетесь с условиями настоящей Политики конфиденциальности.</p>
</div>
</div>
<div className="document-section">
<h2>2. Основные понятия</h2>
<h3>2.1 Персональные данные:</h3>
<p>Любая информация, относящаяся к прямо или косвенно определенному или определяемому физическому лицу (субъекту персональных данных).</p>
<h3>2.2 Обработка персональных данных:</h3>
<p>Любое действие (операция) или совокупность действий (операций), совершаемых с использованием средств автоматизации или без использования таких средств с персональными данными.</p>
<h3>2.3 Автоматизированная обработка:</h3>
<p>Обработка персональных данных с помощью средств вычислительной техники.</p>
<h3>2.4 Блокирование персональных данных:</h3>
<p>Временное прекращение обработки персональных данных (за исключением случаев, если обработка необходима для уточнения персональных данных).</p>
</div>
<div className="document-section">
<h2>3. Какие данные мы собираем</h2>
<p>Мы можем собирать следующие категории персональных данных:</p>
<table className="data-table">
<thead>
<tr>
<th>Категория данных</th>
<th>Примеры</th>
<th>Источник получения</th>
</tr>
</thead>
<tbody>
<tr>
<td>Идентификационные данные</td>
<td>ФИО, email, телефон</td>
<td>Регистрация, контактные формы</td>
</tr>
<tr>
<td>Данные об использовании</td>
<td>IP-адрес, время посещения, страницы</td>
<td>Автоматический сбор</td>
</tr>
<tr>
<td>Технические данные</td>
<td>Браузер, операционная система</td>
<td>Автоматический сбор</td>
</tr>
<tr>
<td>Платежные данные</td>
<td>Данные карты, чеки</td>
<td>Платежные системы</td>
</tr>
<tr>
<td>Контент пользователя</td>
<td>Загружаемые файлы, сообщения</td>
<td>Пользовательский ввод</td>
</tr>
</tbody>
</table>
<h3>3.1 Автоматически собираемые данные:</h3>
<ul>
<li>IP-адрес и данные о местоположении</li>
<li>Информация о браузере и операционной системе</li>
<li>Данные о посещенных страницах и времени на сайте</li>
<li>Реферер (источник перехода на сайт)</li>
<li>Файлы cookie и локальное хранилище</li>
</ul>
</div>
<div className="document-section">
<h2>4. Цели обработки персональных данных</h2>
<p>Мы обрабатываем ваши персональные данные для следующих целей:</p>
<h3>4.1 Основные цели:</h3>
<ul>
<li>Предоставление услуг защиты интеллектуальной собственности</li>
<li>Регистрация и ведение аккаунтов пользователей</li>
<li>Обработка платежей и выставление счетов</li>
<li>Техническая поддержка и обслуживание клиентов</li>
<li>Уведомления о статусе услуг и важных изменениях</li>
</ul>
<h3>4.2 Дополнительные цели:</h3>
<ul>
<li>Аналитика использования сервиса для его улучшения</li>
<li>Предотвращение мошенничества и обеспечение безопасности</li>
<li>Маркетинговые коммуникации (с вашего согласия)</li>
<li>Соблюдение правовых обязательств</li>
<li>Разрешение споров и правоприменение</li>
</ul>
<div className="important-note">
<p>Мы не обрабатываем персональные данные в целях, несовместимых с указанными выше, без получения дополнительного согласия.</p>
</div>
</div>
<div className="document-section">
<h2>5. Правовые основания обработки</h2>
<p>Обработка персональных данных осуществляется на основании:</p>
<h3>5.1 Согласие субъекта персональных данных:</h3>
<ul>
<li>Маркетинговые рассылки</li>
<li>Использование cookies для аналитики</li>
<li>Обработка специальных категорий данных</li>
</ul>
<h3>5.2 Исполнение договора:</h3>
<ul>
<li>Предоставление заказанных услуг</li>
<li>Обработка платежей</li>
<li>Техническая поддержка</li>
</ul>
<h3>5.3 Правовые обязательства:</h3>
<ul>
<li>Ведение налогового и бухгалтерского учета</li>
<li>Предоставление данных государственным органам</li>
<li>Соблюдение валютного законодательства</li>
</ul>
<h3>5.4 Законные интересы:</h3>
<ul>
<li>Обеспечение безопасности системы</li>
<li>Предотвращение мошенничества</li>
<li>Улучшение качества услуг</li>
</ul>
</div>
<div className="document-section">
<h2>6. Передача данных третьим лицам</h2>
<p>Мы можем передавать ваши персональные данные следующим категориям получателей:</p>
<h3>6.1 Поставщики услуг:</h3>
<ul>
<li>Платежные системы (для обработки платежей)</li>
<li>Хостинг-провайдеры (для размещения данных)</li>
<li>Системы аналитики (Google Analytics, Яндекс.Метрика)</li>
<li>Службы доставки уведомлений</li>
</ul>
<h3>6.2 Государственные органы:</h3>
<ul>
<li>По запросам правоохранительных органов</li>
<li>В рамках налогового контроля</li>
<li>При исполнении судебных решений</li>
</ul>
<h3>6.3 Партнеры:</h3>
<ul>
<li>Юридические фирмы (для защиты прав)</li>
<li>Технические партнеры (интеграции)</li>
</ul>
<div className="important-note">
<p>Все третьи лица обязуются обеспечивать адекватный уровень защиты персональных данных и использовать их только в согласованных целях.</p>
</div>
</div>
<div className="document-section">
<h2>7. Трансграничная передача данных</h2>
<p>Некоторые из наших поставщиков услуг могут обрабатывать данные за пределами Российской Федерации. В таких случаях мы обеспечиваем:</p>
<ul>
<li>Передачу данных только в страны с адекватным уровнем защиты</li>
<li>Заключение соответствующих договоров с гарантиями защиты</li>
<li>Применение стандартных договорных положений ЕС</li>
<li>Получение необходимых согласий субъектов данных</li>
</ul>
<p>Актуальный список стран, в которые передаются данные, доступен по запросу.</p>
</div>
<div className="document-section">
<h2>8. Сроки хранения данных</h2>
<p>Мы храним персональные данные не дольше, чем это необходимо для достижения целей обработки:</p>
<table className="data-table">
<thead>
<tr>
<th>Тип данных</th>
<th>Срок хранения</th>
<th>Основание</th>
</tr>
</thead>
<tbody>
<tr>
<td>Данные аккаунта</td>
<td>До удаления аккаунта + 1 год</td>
<td>Исполнение договора</td>
</tr>
<tr>
<td>Платежные данные</td>
<td>5 лет</td>
<td>Налоговое законодательство</td>
</tr>
<tr>
<td>Логи доступа</td>
<td>1 год</td>
<td>Требования безопасности</td>
</tr>
<tr>
<td>Маркетинговые данные</td>
<td>До отзыва согласия</td>
<td>Согласие</td>
</tr>
<tr>
<td>Данные поддержки</td>
<td>3 года</td>
<td>Обслуживание клиентов</td>
</tr>
</tbody>
</table>
<p>По истечении указанных сроков данные удаляются или обезличиваются.</p>
</div>
<div className="document-section">
<h2>9. Ваши права</h2>
<p>В соответствии с применимым законодательством вы имеете следующие права:</p>
<h3>9.1 Право на доступ:</h3>
<ul>
<li>Получить подтверждение факта обработки ваших данных</li>
<li>Получить копию обрабатываемых данных</li>
<li>Узнать цели и правовые основания обработки</li>
</ul>
<h3>9.2 Право на исправление:</h3>
<ul>
<li>Исправить неточные данные</li>
<li>Дополнить неполные данные</li>
</ul>
<h3>9.3 Право на удаление («право быть забытым»):</h3>
<ul>
<li>Удалить данные при отзыве согласия</li>
<li>Удалить данные при незаконной обработке</li>
<li>Удалить данные, когда они больше не нужны</li>
</ul>
<h3>9.4 Право на ограничение обработки:</h3>
<ul>
<li>Приостановить обработку на время проверки точности</li>
<li>Ограничить обработку при незаконности</li>
</ul>
<h3>9.5 Право на портируемость данных:</h3>
<ul>
<li>Получить данные в структурированном формате</li>
<li>Передать данные другому оператору</li>
</ul>
<h3>9.6 Право на возражение:</h3>
<ul>
<li>Возразить против обработки для прямого маркетинга</li>
<li>Возразить против обработки на основании законных интересов</li>
</ul>
<div className="important-note">
<p>Для реализации своих прав обращайтесь к нам по адресу privacy@no-copy.ru. Мы рассмотрим ваш запрос в течение 30 дней.</p>
</div>
</div>
<div className="document-section">
<h2>10. Меры безопасности</h2>
<p>Мы применяем следующие технические и организационные меры для защиты ваших данных:</p>
<h3>10.1 Технические меры:</h3>
<ul>
<li>Шифрование данных при передаче (SSL/TLS)</li>
<li>Шифрование данных при хранении (AES-256)</li>
<li>Многофакторная аутентификация</li>
<li>Регулярные обновления безопасности</li>
<li>Мониторинг безопасности 24/7</li>
<li>Резервное копирование данных</li>
</ul>
<h3>10.2 Организационные меры:</h3>
<ul>
<li>Ограничение доступа к данным по принципу необходимости</li>
<li>Обучение сотрудников основам защиты данных</li>
<li>Регулярные аудиты безопасности</li>
<li>Процедуры реагирования на инциденты</li>
<li>Соглашения о конфиденциальности с сотрудниками</li>
</ul>
</div>
<div className="document-section">
<h2>11. Cookies и похожие технологии</h2>
<p>Мы используем файлы cookie и похожие технологии для:</p>
<h3>11.1 Необходимые cookies:</h3>
<ul>
<li>Аутентификация пользователей</li>
<li>Настройки безопасности</li>
<li>Функционирование сервиса</li>
</ul>
<h3>11.2 Аналитические cookies:</h3>
<ul>
<li>Google Analytics</li>
<li>Яндекс.Метрика</li>
<li>Внутренняя аналитика</li>
</ul>
<h3>11.3 Маркетинговые cookies:</h3>
<ul>
<li>Ретаргетинг</li>
<li>Персонализация рекламы</li>
<li>Измерение эффективности</li>
</ul>
<p>Вы можете управлять cookies через настройки браузера или наш центр управления конфиденциальностью.</p>
</div>
<div className="document-section">
<h2>12. Дети</h2>
<p>Наш сервис не предназначен для лиц младше 18 лет. Мы намеренно не собираем персональные данные детей младше 18 лет.</p>
<p>Если вы являетесь родителем или опекуном и знаете, что ваш ребенок предоставил нам персональные данные, пожалуйста, свяжитесь с нами. Мы удалим такие данные из наших систем.</p>
</div>
<div className="document-section">
<h2>13. Изменения в политике</h2>
<p>Мы можем периодически обновлять настоящую Политику конфиденциальности. При внесении существенных изменений мы уведомим вас:</p>
<ul>
<li>Размещением уведомления на главной странице сайта</li>
<li>Отправкой уведомления на ваш email</li>
<li>Через уведомления в личном кабинете</li>
</ul>
<p>Рекомендуем периодически просматривать данную страницу для ознакомления с актуальной версией Политики.</p>
</div>
<div className="document-section">
<h2>14. Жалобы и контроль</h2>
<p>Если вы считаете, что ваши права на защиту персональных данных были нарушены, вы имеете право:</p>
<ul>
<li>Обратиться к нам с жалобой</li>
<li>Подать жалобу в Роскомнадзор</li>
<li>Обратиться в суд</li>
<li>При обработке данных в ЕС обратиться к соответствующему регулятору</li>
</ul>
<p>Контактные данные для подачи жалоб указаны в разделе «Контактная информация».</p>
</div>
<div className="contact-info">
<h3>Контактная информация</h3>
<p><strong>Контролер персональных данных:</strong></p>
<p>ООО «НО КОПИ»</p>
<p>📧 Email: privacy@no-copy.ru</p>
<p>📧 Вопросы по защите данных: info@no-copy.ru</p>
<p>📞 Телефон: +7 (800) 100-43-98</p>
<p>🏢 Адрес: г. Москва, ул. Проспект Мира, д. 39</p>
<p>🌐 Веб-сайт: https://no-copy.ru</p>
<p><strong>Надзорный орган:</strong></p>
<p>Федеральная служба по надзору в сфере связи, информационных технологий и массовых коммуникаций (Роскомнадзор)</p>
<p>🌐 https://rkn.gov.ru</p>
</div>
<div className="effective-date">
<p>Политика конфиденциальности вступает в силу с 01 января 2025 года</p>
<p>Последнее обновление: 25 сентября 2025 года</p>
</div>
</div>
</div>
</div>
</main>
) )
} }
+9
View File
@@ -0,0 +1,9 @@
import packageJson from '../../../../package.json';
export default function Page() {
return (
<div>
{packageJson.version}
</div>
)
}
+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>
);
}
+40 -1
View File
@@ -53,13 +53,23 @@
ul { ul {
margin-bottom: 16px; margin-bottom: 16px;
padding-left: 24px;
} }
li { li {
margin-bottom: 8px; margin-bottom: 8px;
line-height: 1.7; line-height: 1.7;
color: #1e293b; color: #1e293b;
&::before {
content: ' ';
display: inline-block;
width: 5px;
height: 5px;
border-radius: 2.5px;
background-color: #000;
margin-right: 10px;
margin-bottom: 4px;
}
} }
} }
@@ -97,4 +107,33 @@
padding-top: 32px; padding-top: 32px;
border-top: 1px solid #94a3b833; border-top: 1px solid #94a3b833;
} }
.data-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
th {
background: #f8fafc;
font-weight: 600;
color: #1e293b;
}
td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #94a3b833;
}
th,
td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #94a3b833;
}
}
} }
+2 -1
View File
@@ -1,7 +1,8 @@
import DataTable from '@/app/components/tanstakTable';
export default function FilesTable() { export default function FilesTable() {
return ( return (
<div> <div>
table <DataTable/>
</div> </div>
) )
} }