nillud-data-table 1.4.10 → 1.5.0

package/README.md

@@ -118,7 +118,7 @@ const columns = [
             return (
                 <div style={{ display: 'flex', alignItems: 'center' }}>
                     <span style={{ marginBottom: 3 }}>{cell}</span>
-                    <span style={{ marginLeft: 5, cursor: 'pointer' }} onClick={() => { setModalShow(true); setRowData(row) }}><PenEdit /></span>
+                    <span style={{ marginLeft: 5, cursor: 'pointer' }} onClick={() => { setModalShow(true); setRowData(row); }}><PenEdit /></span>
                 </div>
             )
         },
@@ -126,13 +126,15 @@ const columns = [
     {
         field: 'address',
         title: 'Адрес',
-        headerFilter: headerFilterAddress,
-        editable: true
-    },
-    {
-        field: 'obj',
-        title: 'Объект',
-        sortable: false
+        headerFilter(headerValue, rowValue, row) {
+            const values = [
+                rowValue.toLowerCase(),
+                String(row.user_name).toLowerCase(),
+                String(row.org_name).toLowerCase()
+            ]
+
+            return values.some(e => e.includes(headerValue.toLowerCase()))
+        },
     },
 ]
 ```
@@ -148,6 +150,7 @@ const columns = [
 | [formatter](#formatter)                |    -     |  func       | Кастомное форматирование, принимает в себя функцию, описание далее                     |
 | [headerFormatter](#headerFormatter)    |    -     |  func       | Кастомное форматирование заголовка колонки, принимает в себя функцию, описание далее   |
 | [exportCustomCell](#exportCustomCell)  |    -     |  func       | Кастомное форматирование для Excel и Word, принимает в себя функцию, описание далее    |
+| [cellAlignment](#cellAlignment)        |    -     |  string     | Выравнивание контента в ячейке                                                         |
 | [headerFilter](#headerFilter)          |    -     |  func       | Кастомный фильтр, принимает в себя функуцию, описание далее                            |
 | [sortable](#sortable)                  |    -     |  bool       | Убирает возможность сортировки, по умолчанию true                                      |
 | [filterable](#filterable)              |    -     |  bool       | Убирает возможность фильтрации, по умолчанию true                                      |
@@ -263,44 +266,54 @@ const columns = [
 }
 ```
 
-#### headerFilter
+#### cellAlignment
 
-Кастомный фильтр колонки. Принимает в себя функцию со значениями headerValue и rowValue
+Выравнивание контента ячейки таблицы, так же распространяется на выравнивание в Excel
 
 ```tsx
-// Функция фильтрации
 
-const headerFilterAddress = (headerValue, rowValue) => {
-    if (headerValue.includes(" ")) {
-        const stringArray = headerValue.split(" ")
+type CellAlignment = {
+    vertical: 'top' | 'middle' | 'bottom'
+    horizontal: 'left' | 'center' | 'right'
+}
+
+const columns = {
+    ...,
+    {
+        field: 'name',
+        title: 'name',
+        cellAlignment: {
+            vertical: 'middle',
+            horizontal: 'center'
+        },
+    }
+    ...
+}
+
+```
 
-        if (!stringArray.includes('')) {
-            var row = rowValue.toLowerCase()
+#### headerFilter
 
-            const filtered = []
+Кастомный фильтр колонки. Принимает в себя функцию со значениями headerValue, rowValue и не обязательным row
 
-            for (let i = 0; i < stringArray.length; i++) {
-                row = rowValue.toLowerCase().includes(stringArray[i].toLowerCase())
+```tsx
+// Функция фильтрации
 
-                row ? filtered.push(row) : null
-            }
+const headerFilter = (headerValue, rowValue, row) => {
+    const values = [
+        rowValue.toLowerCase(),
+        String(row.de_name).toLowerCase(),
+        String(row.dco_name).toLowerCase()
+    ]
 
-            if (filtered.length === stringArray.length) {
-                return rowValue
-            }
-        } else {
-            return rowValue.toLowerCase().includes(stringArray[0].toLowerCase())
-        }
-    } else {
-        return rowValue.toLowerCase().includes(headerValue.toLowerCase())
-    }
+    return values.some(e => e.includes(headerValue.toLowerCase()))
 }
 
 // Объект массива columns
 
 {
     ...,
-    headerFilter: headerFilterAddress
+    headerFilter: headerFilter
 }
 ```
 

package/dist/index.d.ts

@@ -17,7 +17,7 @@ type Column = {
     headerFormatter?: (column: string) => ReactElement;
     exportCustomCell?: (title: string, row: TableElement) => string;
     cellAlignment?: CellAlignment;
-    headerFilter?: (headerValue: string, rowValue: string) => boolean;
+    headerFilter?: (headerValue: string, rowValue: string, row: TableElement) => boolean;
     sortable?: boolean;
     filterable?: boolean;
     selectable?: boolean;

package/dist/index.js

@@ -137,11 +137,25 @@ var Cell = ({
     var _a;
     return (_a = column.formatter) == null ? void 0 : _a.call(column, stringValue, row, column);
   }, [column.formatter, stringValue, row, column]);
+  const cellVerticalAlignment = {
+    "top": { alignItems: "flex-start" },
+    "middle": { alignItems: "center" },
+    "bottom": { alignItems: "flex-end" }
+  };
+  const cellHorizontalAlignment = {
+    "left": { justifyContent: "flex-start" },
+    "center": { justifyContent: "center" },
+    "right": { justifyContent: "flex-end" }
+  };
   const CellWithData = ({ children }) => /* @__PURE__ */ jsx6(
     "div",
     {
       className: "ndt-cell",
       title: isTitles && stringValue ? stringValue : "",
+      style: column.cellAlignment ? {
+        ...cellVerticalAlignment[column.cellAlignment.vertical],
+        ...cellHorizontalAlignment[column.cellAlignment.horizontal]
+      } : {},
       onClick: isSelectable && (typeof column.isSelectableCell === "undefined" || column.isSelectableCell || column.editable) ? onRowSelect : () => {
       },
       children
@@ -579,7 +593,7 @@ var DataTable = forwardRef(({
       if (filterValue === "") continue;
       const column = columnMap.get(field);
       if (!column) continue;
-      result = column.headerFilter ? result.filter((e) => column.headerFilter(filterValue, String(e[field]))) : filterData(result, field, filterValue);
+      result = column.headerFilter ? result.filter((e) => column.headerFilter(filterValue, String(e[field]), e)) : filterData(result, field, filterValue);
     }
     if (sortBy.col) {
       result = sortData(result, sortBy.col, sortBy.type);
@@ -593,9 +607,9 @@ var DataTable = forwardRef(({
   }, [processedData, paginationPage, paginationSize]);
   const rowIdMap = useMemo4(() => {
     const map = /* @__PURE__ */ new Map();
-    processedData.forEach((row, i) => map.set(row, i));
+    tableData.forEach((row, i) => map.set(row, i));
     return map;
-  }, [processedData]);
+  }, [tableData]);
   const toggleRowSelection = (index) => {
     setSelectedRows((prev) => {
       const updated = new Set(prev);

package/package.json

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