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:
Generated
+57
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -1,7 +1,414 @@
|
||||
export default function Page() {
|
||||
return (
|
||||
<div>
|
||||
terms of use
|
||||
<main className="main-content">
|
||||
<div className="container">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import packageJson from '../../../../package.json';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div>
|
||||
{packageJson.version}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -53,13 +53,23 @@
|
||||
|
||||
ul {
|
||||
margin-bottom: 16px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.7;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
import DataTable from '@/app/components/tanstakTable';
|
||||
export default function FilesTable() {
|
||||
return (
|
||||
<div>
|
||||
table
|
||||
<DataTable/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user