nillud-data-table 1.2.0 → 1.2.1

package/README.md

@@ -414,136 +414,149 @@ scrollable
 scrollHeight={410}
 ```
 
-### exportSectionComponent
+### headerGroup
 
-Необязательный параметр. Необходимо подключить модуль ExportSection и установить пакеты для экспорта Word и Excel
+Необязательный параметр. Передается **массив объектов**. Отображает сгруппированные заголовки таблицы, где title - заголовок группы, а cols - количество столбцов, на которое растягивается группа
 
-```bash
-npm i exceljs docx file-saver
--или-
-yarn add exceljs docx file-saver
+```tsx
+headerGroup={[{ title: 'Личные данные', cols: 4 }, { title: 'Оборудование', cols: 2 }]}
 ```
 
-Использование:
+### groupBy
 
-```tsx
-import { DataTable, ExportSection } from 'nillud-data-table'
+Необязательный параметр. Передается **строка**. Отображает строки таблицы, сгруппированные по столбцу, указанному в groupBy, каждую группу можно свернуть и раскрыть
 
-<DataTable
-    tableData={tableData}
-    columns={columns}
-    tableName={'current-tasks'}
-    ExportSectionComponent={ExportSection}
-/>
+```tsx
+groupBy={'status'}
 ```
 
-### exportCustomColumns
-
-Необязательный параметр. Принимает в себя массив объектов формата.
-По умолчанию:
-- Ключ header содержит в себе значение **title** объекта из массива columns
-- Ключ key содержит в себе значение **field** объекта из массива columns
-- Ключ width по умолчанию умеет ширину 20 у.е. по системе Excel
+### isTitles
 
-Дополнительные параметры можно добавлять исходя из документации [exceljs](https://www.npmjs.com/package/exceljs). 
-Для изменения/добавления каких-либо параметров в массиве необходимо указать объект с нужным ключом **key**
+Необязательный параметр. Передается **boolean** значение. Отображает **html title** при наведении на ячейку, по умолчанию **false**
 
 ```tsx
-excelCustomColumns={[
-    {
-        key: 'name',
-        width: 50
-    }
-]}
+isTitles
 ```
 
-### excelBtn
+### Возможности useRef
 
-Необязательный параметр. Тип **boolean**, по умолчанию **false**. При значении **true** над таблицей с правой стороны появляется кнопка экспорта Excel, которая по умолчанию принимает в себя исходный массив **tableData**
+Возможность подключиться напрямую к таблице и получить данные после всех манипуляций
 
-Для использования модуля Excel необходимо установить библиотеку [exceljs](https://www.npmjs.com/package/exceljs)
+```tsx
+import { useRef } from "react";
+
+const tableRef = useRef<DataTableRef>(null);
+
+<DataTable
+    ...
+    ref={tableRef}
+    ...
+/>
+
+const func = () => {
+    const data = tableRef.current.getData() // Получить текущие данные, после сортировки и фильтрации
+    const currData = tableRef.current.getCurrentData() // Получить данные с текущей таблицы пагинации
+}
 
-```bash
-npm i exceljs
--или-
-yarn add exceljs
 ```
 
-### wordBtn
+## Возможности экспорта данных
 
-Необязательный параметр. Тип **boolean**, по умолчанию **false**. При значении **true** над таблицей с правой стороны появляется кнопка экспорта Word, которая по умолчанию принимает в себя исходный массив **tableData**
+### ExportExcel
 
-Для использования модуля Word необходимо установить библиотеки [docx](https://www.npmjs.com/package/docx) и [file-saver](https://www.npmjs.com/package/file-saver)
+Требует установки пакета Exceljs
 
 ```bash
-npm i docx file-saver
--или-
-yarn add docx file-saver
+npm install exceljs
+# или
+yarn add exceljs
 ```
 
-### wordOptions
-
-Необязательный параметр. Используется вместе с **wordBtn**. Принимает в себя объект
-
+Пример вызова
 ```tsx
-options = {
-    fontSize: 20, // размер шрифта, 
-    boldHeaders: false, // Заголовки жирным начертанием, 
-    autoLandscape: false, // делать ли альбомный формат, 
-    maxColumnsBeforeLandscape: 5 // и от скольки столбцов. 
-}
+<ExportExcel
+    columns={columns} // Колонки таблицы
+    excelData={tableData} // Данные таблицы
+    title={'table-name'} // Название таблицы
+    exportCustomColumns={[{
+        header: 'Наименование',
+        key: 'name',
+        width: 50,
+        ...
+    }]} // Описание ниже
+/>
 ```
 
-### downloadSectionLeftSideContent
+#### exportCustomColumns
 
-Необязательный параметр. Передается **React.Component**. Отображает компонент с левой стороны от кнопок экспорта. Создано для экономии места
+Необязательный параметр. Принимает в себя массив объектов формата.
+По умолчанию:
+- Ключ header содержит в себе значение **title** объекта из массива columns
+- Ключ key содержит в себе значение **field** объекта из массива columns
+- Ключ width по умолчанию умеет ширину 20 у.е. по системе Excel
 
-```tsx
-downloadSectionLeftSideContent={<button className='base-button' onClick={() => setCanvas(true)}>OffCanvas</button>}
-```
+Дополнительные параметры можно добавлять исходя из документации [exceljs](https://www.npmjs.com/package/exceljs). 
+Для изменения/добавления каких-либо параметров в массиве необходимо указать объект с нужным ключом **key**
 
-### headerGroup
+### ExportWord
 
-Необязательный параметр. Передается **массив объектов**. Отображает сгруппированные заголовки таблицы, где title - заголовок группы, а cols - количество столбцов, на которое растягивается группа
+Требует установки пакетов docx и file-saver
 
-```tsx
-headerGroup={[{ title: 'Личные данные', cols: 4 }, { title: 'Оборудование', cols: 2 }]}
+```bash
+npm install docx file-saver
+# или
+yarn add docx file-saver
 ```
 
-### groupBy
-
-Необязательный параметр. Передается **строка**. Отображает строки таблицы, сгруппированные по столбцу, указанному в groupBy, каждую группу можно свернуть и раскрыть
-
+Пример вызова
 ```tsx
-groupBy={'status'}
+<ExportWord
+    columns={columns} // Колонки таблицы
+    wordData={tableData} // Данные таблицы
+    title={'table-name'} // Название таблицы
+    options={
+        fontSize: 20,
+        boldHeaders: false,
+        autoLandscape: false,
+        maxColumnsBeforeLandscape: 5
+    } // Описание ниже
+/>
 ```
 
-### isTitles
+#### wordOptions
 
-Необязательный параметр. Передается **boolean** значение. Отображает **html title** при наведении на ячейку, по умолчанию **false**
+Необязательный параметр. Принимает в себя объект:
 
 ```tsx
-isTitles
+options = {{
+    fontSize: 20, // размер шрифта, 
+    boldHeaders: false, // Заголовки жирным начертанием, 
+    autoLandscape: false, // делать ли альбомный формат, 
+    maxColumnsBeforeLandscape: 5 // и от скольки столбцов. 
+}}
 ```
 
-### Возможности useRef
+### ExportSection
 
-Возможность подключиться напрямую к таблице и получить данные после всех манипуляций
+Если нужно использовать секцию, по умолчанию 2 кнопки Word и Excel справа. А так же **downloadSectionLeftSideContent** принимает **React.Component**
 
 ```tsx
-import { useRef } from "react";
-
-const tableRef = useRef<DataTableRef>(null);
-
-<DataTable
-    ...
-    ref={tableRef}
-    ...
+<ExportSection
+    wordBtn // boolean - использовать экспорт Word
+    excelBtn // boolean - использовать экспорт Excel
+    downloadSectionLeftSideContent={<>...</>} // React.Component - произвольный контент
+    tableData={tableData} // Данные таблицы
+    columns={columns} // Колонки таблицы
+    tableName={'table-name'} // Название таблицы
+    exportCustomColumns={[{...}, {...}]}
+    wordOptions={{...}}
 />
+```
 
-const func = () => {
-    const data = tableRef.current.getData() // Получить текущие данные, после сортировки и фильтрации
-    const currData = tableRef.current.getCurrentData() // Получить данные с текущей таблицы пагинации
-}
+##### downloadSectionLeftSideContent
+
+Необязательный параметр. Передается **React.Component**. Отображает компонент с левой стороны от кнопок экспорта. Создано для экономии места
 
+```tsx
+downloadSectionLeftSideContent={<button className='base-button' onClick={() => setCanvas(true)}>OffCanvas</button>}
 ```

package/dist/export/index.d.ts

@@ -22,6 +22,13 @@ type ExportOptions = {
     autoLandscape?: boolean;
     maxColumnsBeforeLandscape?: number;
 };
+type CustomColumn = {
+    header: string;
+    key: string;
+    width?: number;
+    [key: string]: any;
+};
+type CustomColumns = Array<CustomColumn> | null;
 type ExportSectionTypes = {
     wordBtn: boolean;
     excelBtn: boolean;
@@ -29,18 +36,14 @@ type ExportSectionTypes = {
     tableData: TableData;
     columns: Array<Column>;
     tableName: string;
-    exportCustomColumns?: Array<{
-        header: string;
-        key: string;
-        width: number;
-    }> | null;
+    exportCustomColumns?: CustomColumns;
     wordOptions?: ExportOptions;
 };
 type ExcelExportTypes = {
     columns: Array<Column>;
     excelData: TableData;
     title: string;
-    exportCustomColumns: ExportSectionTypes["exportCustomColumns"];
+    exportCustomColumns?: ExportSectionTypes["exportCustomColumns"];
 };
 type ExportWordTypes = {
     wordData: TableData;

package/dist/index.js

@@ -235,7 +235,7 @@ var TableFooter = ({
     }
   };
   const renderPageNumbers = () => {
-    if (totalPages <= 1) return null;
+    if (totalPages <= 1) return /* @__PURE__ */ jsx12("button", { onClick: () => handlePageChange(0), children: "1" }, "page-0");
     const pages = [];
     const maxVisible = 5;
     let start = Math.max(0, paginationPage - Math.floor(maxVisible / 2));
@@ -411,7 +411,7 @@ var DataTable = forwardRef(({
 }, ref) => {
   const [filters, setFilters] = useState({});
   const [sortBy, setSortBy] = useState({ col: "", type: "asc" });
-  const [paginationSize, setPaginationSize] = useState((paginationCounts == null ? void 0 : paginationCounts[0]) || 10);
+  const [paginationSize, setPaginationSize] = useState((paginationCounts == null ? void 0 : paginationCounts[0]) || 0);
   const [paginationPage, setPaginationPage] = useState(0);
   const [collapsedGroups, setCollapsedGroups] = useState({});
   const toggleGroup = (groupKey) => {

package/dist/styles.css

@@ -15,12 +15,14 @@
   border-bottom: 2px solid #ddd;
 }
 .ndt-table-container .ndt-table .ndt-table-columns .ndt-column {
-  padding: 16px 10px;
+  padding: 10px 10px;
 }
 .ndt-table-container .ndt-table .ndt-table-columns .ndt-column:not(:last-child) {
   border-right: 1px solid #ddd;
 }
 .ndt-table-container .ndt-table .ndt-table-columns .ndt-column .ndt-column-head {
+  font-size: 14px;
+  font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -45,7 +47,15 @@
 }
 .ndt-table-container .ndt-table .ndt-table-columns .ndt-column .ndt-column-footer input {
   width: 100%;
-  padding: 4px;
+  color: #222;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  line-height: 24px;
+  border: 1px solid #d9d9d9;
+  border-radius: 5px;
+  font-size: 14px;
+  padding: 4px 11px;
+  height: 43px;
 }
 .ndt-table-container .ndt-table .ndt-table-body {
   z-index: 1000;
@@ -81,6 +91,13 @@
 .ndt-table-container .ndt-table .ndt-table-body .ndt-table-row:nth-child(2n) {
   background-color: rgba(0, 0, 0, 0.05);
 }
+.ndt-table-container .ndt-table .ndt-table-body .ndt-table-row .ndt-cell {
+  display: flex;
+  align-items: center;
+  color: #333;
+  font-size: 16px;
+  font-weight: 400;
+}
 .ndt-table-container .ndt-table .ndt-table-body .ndt-table-row .ndt-cell:not(:last-child) {
   border-right: 1px solid #ddd;
 }
@@ -91,14 +108,20 @@
   border-top: 2px solid #cccccc;
   padding: 10px;
 }
+.ndt-table-container .ndt-table .ndt-table-footer .ndt-footer-count {
+  font-size: 14px;
+  color: #777777;
+}
 .ndt-table-container .ndt-table .ndt-table-footer .ndt-footer-pagination {
   display: flex;
 }
 .ndt-table-container .ndt-table .ndt-table-footer .ndt-footer-pagination .ndt-pagination-counts span {
   margin-right: 5px;
+  color: #777777;
 }
 .ndt-table-container .ndt-table .ndt-table-footer .ndt-footer-pagination .ndt-pagination-counts select {
-  height: 25px;
+  height: 32px;
+  border: 1px solid #cccccc;
   min-width: 50px;
   text-align: center;
 }
@@ -107,12 +130,12 @@
   display: flex;
 }
 .ndt-table-container .ndt-table .ndt-table-footer .ndt-footer-pagination .ndt-pagination-buttons button {
-  margin-right: 5px;
+  margin-right: 10px;
   background-color: #fff;
   border: 1px solid #cccccc;
   border-radius: 4px;
   cursor: pointer;
-  padding: 4px;
+  padding: 4px 10px;
   height: 100%;
   font-size: 14px;
 }

package/dist/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../components/data-table/styles/data-table.scss"],"names":[],"mappings":";AACI;EACI;EACA;;AAEA;AAAA;EAEI;;AAGJ;AAAA;EAEI;;AAGJ;EACI;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAMR;EACI;EACA;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;;AAGA;EACI;AACA;;AAGJ;EACI;AACA;EACA;AACA;;AAGJ;EACI;AACA;EACA;AACA;;AAGJ;EACI;AACA;;AAKJ;EACI;;AAGJ;EACI;;AAIA;EACI;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AAIA;EACI;;AAGI;EACI;;AAGJ;EACI;EACA;EACA;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EAGI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;;;AAUhC;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EAGI;EACA;EACA;;AAIR;EACI;;AAEA;EAGI;EACA;EACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAIA;EACI","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["../components/data-table/styles/data-table.scss"],"names":[],"mappings":";AACI;EACI;EACA;;AAEA;AAAA;EAEI;;AAGJ;AAAA;EAEI;;AAGJ;EACI;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAMR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;;AAGA;EACI;AACA;;AAGJ;EACI;AACA;EACA;AACA;;AAGJ;EACI;AACA;EACA;AACA;;AAGJ;EACI;AACA;;AAKJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGI;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EAGI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;;;AAUhC;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EAGI;EACA;EACA;;AAIR;EACI;;AAEA;EAGI;EACA;EACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAIA;EACI","file":"styles.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nillud-data-table",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",