* EditableCell улучшена мемоизация

* Добавлена поддержка составных ключей для столбцов таблиц
* Улучшена типизация
* Методы-генераторы столбцов переписаны
* Методы-генераторы сортировок переписаны с учётом составных ключей

src/components/Table/Columns/date.tsx

@@ -1,26 +1,36 @@
-import { ReactNode } from 'react'
+import { Key, ReactNode } from 'react'
 
-import { formatDate } from '@utils'
+import { makeColumn, ColumnProps, SorterMethod } from '.'
-
+import { DatePickerWrapper, getObjectByDeepKey } from '..'
-import makeColumn, { columnPropsOther } from '.'
-import { DatePickerWrapper, makeDateSorter } from '..'
 import { DatePickerWrapperProps } from '../DatePickerWrapper'
+import { formatDate, isRawDate } from '@utils'
 
-export const makeDateColumn = (
+export const makeDateSorter = <T extends unknown>(key: Key): SorterMethod<T> => (a, b) => {
+    const vA = a ? getObjectByDeepKey(key, a) : null
+    const vB = b ? getObjectByDeepKey(key, b) : null
+
+    if (!isRawDate(vA) || !isRawDate(vB)) return 0
+    if (!isRawDate(vA)) return 1
+    if (!isRawDate(vB)) return -1
+
+    return (new Date(vA)).getTime() - (new Date(vB)).getTime()
+}
+
+export const makeDateColumn = <T extends unknown>(
     title: ReactNode,
     key: string,
     utc?: boolean,
     format?: string,
-    other?: columnPropsOther,
+    other?: ColumnProps<T>,
     pickerOther?: DatePickerWrapperProps,
-) => makeColumn(title, key, {
+) => makeColumn<T>(title, key, {
     ...other,
     render: (date) => (
         <div className={'text-align-r-container'}>
             <span>{formatDate(date, utc, format) ?? '-'}</span>
         </div>
     ),
-    sorter: makeDateSorter(key),
+    sorter: makeDateSorter<T>(key),
     input: <DatePickerWrapper {...pickerOther} />,
 })
 

src/components/Table/Columns/index.ts

@@ -1,6 +1,10 @@
-import { ReactNode } from 'react'
+import { Key, ReactNode } from 'react'
 import { Rule } from 'antd/lib/form'
-import { ColumnProps } from 'antd/lib/table'
+import { ColumnType } from 'antd/lib/table'
+import { RenderedCell } from 'rc-table/lib/interface'
+
+import { DataSet } from '../Table'
+import { OmitExtends } from '@utils/types'
 
 export * from './date'
 export * from './time'
@@ -12,10 +16,13 @@ export * from './text'
 export * from './timezone'
 
 export type DataType<T = any> = Record<string, T>
-export type RenderMethod<T = any> = (value: T, dataset?: DataType<T>, index?: number) => ReactNode
+export type RenderMethod<T = any, DT = DataSet<T>> = (value: T | undefined, dataset: DT, index: number) => ReactNode | RenderedCell<T> | undefined
-export type SorterMethod<T = any> = (a?: DataType<T> | null, b?: DataType<T> | null) => number
+export type SorterMethod<T = any, DT = DataSet<T> | null | undefined> = (a: DT, b: DT) => number
+export type FilterMethod<T = any, DT = DataSet<T>> = (value: string | number | T | undefined, record: DT) => boolean
 
-export type columnPropsOther<T = any> = ColumnProps<DataType<T>> & {
+export type FilterGenerator<T, DT = DataSet<T>> = (key: Key) => FilterMethod<T, DT>
+
+export type ColumnProps<T = any> = OmitExtends<{
     // редактируемая колонка
     editable?: boolean
     // react компонента редактора
@@ -29,10 +36,12 @@ export type columnPropsOther<T = any> = ColumnProps<DataType<T>> & {
     // дефолтное значение при добавлении новой строки
     initialValue?: string | number
 
+    onFilter?: FilterMethod<T>
+    sorter?: SorterMethod<T>
     render?: RenderMethod<T>
-}
+}, ColumnType<DataSet<T>>>
 
-export const makeColumn = (title: ReactNode, key: string, other?: columnPropsOther) => ({
+export const makeColumn = <T = any>(title: ReactNode, key: Key, other?: ColumnProps<T>) => ({
     title: title,
     key: key,
     dataIndex: key,

src/components/Table/Columns/numeric.tsx

@@ -1,20 +1,26 @@
+import { ColumnFilterItem } from 'antd/lib/table/interface'
 import { InputNumber } from 'antd'
-import { ReactNode } from 'react'
+import { Key, ReactNode } from 'react'
 
-import { makeNumericSorter } from '../sorters'
+import makeColumn, { ColumnProps, FilterGenerator, makeGroupColumn, RenderMethod, SorterMethod } from '.'
-import makeColumn, { columnPropsOther, DataType, makeGroupColumn, RenderMethod } from '.'
+import { getObjectByDeepKey } from '../Table'
-import { ColumnFilterItem, CompareFn } from 'antd/lib/table/interface'
 
 export const RegExpIsFloat = /^[-+]?\d+\.?\d*$/
 
-type FilterMethod<T> = (value: string | number | boolean, record: DataType<T>) => boolean
+export const makeNumericSorter = <T extends number = number>(key: Key): SorterMethod<T> => (a, b) => {
+    if (!a && !b) return 0
+    if (!a) return 1
+    if (!b) return -1
 
-export const makeNumericRender = <T extends unknown>(fixed?: number): RenderMethod<T> => (value: T) => {
+    return Number(getObjectByDeepKey(key, a)) - Number(getObjectByDeepKey(key, b))
-    let val = '-'
+}
-    if ((value ?? null) !== null && Number.isFinite(+value)) {
+
+export const makeNumericRender = <T extends unknown>(fixed?: number, defaultValue: string = '-', precision: number = 5): RenderMethod<T> => (value) => {
+    let val = defaultValue
+    if (value !== undefined && value !== null && Number.isFinite(+value)) {
         val = (fixed ?? null) !== null
             ? (+value).toFixed(fixed)
-            : (+value).toPrecision(5)
+            : (+value).toPrecision(precision)
     }
 
     return (
@@ -24,7 +30,7 @@ export const makeNumericRender = <T extends unknown>(fixed?: number): RenderMeth
     )
 }
 
-export const makeNumericColumnOptions = <T extends unknown = any>(fixed?: number, sorterKey?: string): columnPropsOther<T> => ({
+export const makeNumericColumnOptions = <T extends number>(fixed?: number, sorterKey?: string): ColumnProps<T> => ({
     editable: true,
     initialValue: 0,
     width: 100,
@@ -37,14 +43,14 @@ export const makeNumericColumnOptions = <T extends unknown = any>(fixed?: number
     render: makeNumericRender<T>(fixed),
 })
 
-export const makeNumericColumn = <T extends unknown = any>(
+export const makeNumericColumn = <T extends number>(
     title: ReactNode,
-    key: string,
+    key: Key,
     filters?: ColumnFilterItem[],
-    filterDelegate?: (key: string | number) => FilterMethod<T>,
+    filterDelegate?: FilterGenerator<T>,
     renderDelegate?: RenderMethod<T>,
     width?: string | number,
-    other?: columnPropsOther,
+    other?: ColumnProps<T>,
 ) => makeColumn(title, key, {
     filters,
     onFilter: filterDelegate ? filterDelegate(key) : undefined,
@@ -56,24 +62,25 @@ export const makeNumericColumn = <T extends unknown = any>(
     ...other
 })
 
-export const makeNumericColumnPlanFact = <T extends unknown = any>(
+export const makeNumericColumnPlanFact = <T extends number>(
     title: ReactNode,
-    key: string,
+    key: Key,
     filters?: ColumnFilterItem[],
-    filterDelegate?: (key: string | number) => FilterMethod<T>,
+    filterDelegate?: FilterGenerator<T>,
     renderDelegate?: RenderMethod<T>,
-    width?: string | number
+    width?: string | number,
+    other?: ColumnProps<T>,
 ) => makeGroupColumn(title, [
-    makeNumericColumn<T>('п', key + 'Plan', filters, filterDelegate, renderDelegate, width),
+    makeNumericColumn<T>('п', key + 'Plan', filters, filterDelegate, renderDelegate, width, other),
-    makeNumericColumn<T>('ф', key + 'Fact', filters, filterDelegate, renderDelegate, width),
+    makeNumericColumn<T>('ф', key + 'Fact', filters, filterDelegate, renderDelegate, width, other),
 ])
 
-export const makeNumericStartEnd = <T extends unknown = any>(
+export const makeNumericStartEnd = <T extends number>(
     title: ReactNode,
-    key: string,
+    key: Key,
     fixed: number,
     filters?: ColumnFilterItem[],
-    filterDelegate?: (key: string | number) => FilterMethod<T>,
+    filterDelegate?: FilterGenerator<T>,
     renderDelegate?: RenderMethod<T>,
     width?: string | number,
 ) => makeGroupColumn(title, [
@@ -81,12 +88,12 @@ export const makeNumericStartEnd = <T extends unknown = any>(
     makeNumericColumn<T>('конец', key + 'End', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'End'))
 ])
 
-export const makeNumericMinMax = <T extends unknown = any>(
+export const makeNumericMinMax = <T extends number>(
     title: ReactNode,
-    key: string,
+    key: Key,
     fixed: number,
     filters?: ColumnFilterItem[],
-    filterDelegate?: (key: string | number) => FilterMethod<T>,
+    filterDelegate?: FilterGenerator<T>,
     renderDelegate?: RenderMethod<T>,
     width?: string | number,
 ) => makeGroupColumn(title, [
@@ -94,4 +101,18 @@ export const makeNumericMinMax = <T extends unknown = any>(
     makeNumericColumn<T>('макс', key + 'Max', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'Max')),
 ])
 
+export const makeNumericAvgRange = <T extends number>(
+    title: ReactNode,
+    key: Key,
+    fixed: number,
+    filters?: ColumnFilterItem[],
+    filterDelegate?: FilterGenerator<T>,
+    renderDelegate?: RenderMethod<T>,
+    width?: string | number,
+) => makeGroupColumn(title, [
+    makeNumericColumn<T>('мин', `${key}.min`, filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, `${key}.min`)),
+    makeNumericColumn<T>('сред', `${key}.avg`, filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, `${key}.avg`)),
+    makeNumericColumn<T>('макс', `${key}.max`, filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, `${key}.max`)),
+])
+
 export default makeNumericColumn

src/components/Table/Columns/plan_fact.tsx

@@ -1,36 +1,20 @@
-import { ReactNode } from 'react'
+import { Key, ReactNode } from 'react'
 
-import { columnPropsOther, makeColumn } from '.'
+import { ColumnProps, makeColumn } from '.'
 
-export const makeColumnsPlanFact = (
+export const makeColumnsPlanFact = <T,>(
     title: string | ReactNode,
-    key: string | string[],
+    key: Key | [Key, Key],
-    columsOther?: columnPropsOther | [columnPropsOther, columnPropsOther],
+    columsOther?: ColumnProps<T> | [ColumnProps<T>, ColumnProps<T>],
-    gruopOther?: any
 ) => {
-    let keyPlanLocal: string
+    const keys = Array.isArray(key) ? key : [`${key}Plan`, `${key}Fact`]
-    let keyFactLocal: string
+    const others = Array.isArray(columsOther) ? columsOther : [columsOther, columsOther]
-
-    if (key instanceof Array) {
-      keyPlanLocal = key[0]
-      keyFactLocal =  key[1]
-    } else {
-      keyPlanLocal = key + 'Plan'
-      keyFactLocal =  key + 'Fact'
-    }
-
-    let columsOtherLocal : any[2]
-    if (columsOther instanceof Array)
-      columsOtherLocal = [columsOther[0], columsOther[1]]
-    else
-      columsOtherLocal = [columsOther, columsOther]
 
     return {
-        title: title,
+        title,
-        ...gruopOther,
         children: [
-            makeColumn('план', keyPlanLocal, columsOtherLocal[0]),
+            makeColumn<T>('план', keys[0], others[0]),
-            makeColumn('факт', keyFactLocal, columsOtherLocal[1]),
+            makeColumn<T>('факт', keys[1], others[1]),
         ]
     }
 }

src/components/Table/Columns/select.tsx

@@ -1,21 +1,22 @@
 import { Select, SelectProps } from 'antd'
 import { DefaultOptionType, SelectValue } from 'antd/lib/select'
+import { Key, ReactNode } from 'react'
 
-import { columnPropsOther, makeColumn } from '.'
+import { ColumnProps, makeColumn } from '.'
 
-export const makeSelectColumn = <T extends unknown = string>(
+export const makeSelectColumn = <T extends DefaultOptionType>(
-    title: string,
+    title: ReactNode,
-    dataIndex: string,
+    key: Key,
-    options: DefaultOptionType[],
+    options: T[],
     defaultValue?: T,
-    other?: columnPropsOther,
+    other?: ColumnProps<T>,
     selectOther?: SelectProps<SelectValue>
-) => makeColumn(title, dataIndex, {
+) => makeColumn(title, key, {
     ...other,
     input: <Select options={options} {...selectOther}/>,
-    render: (value) => {
+    render: (value, dataset, index) => {
         const item = options?.find(option => String(option?.value) === String(value))
-        return other?.render?.(item?.value) ?? item?.label ?? defaultValue ?? value ?? '--'
+        return other?.render?.(item, dataset, index) ?? item?.label ?? defaultValue?.label ?? value?.label ?? '--'
     }
 })
 

src/components/Table/Columns/tag.tsx

@@ -4,7 +4,7 @@ import { Select, SelectProps, Tag } from 'antd'
 
 import type { OmitExtends } from '@utils/types'
 
-import { columnPropsOther, DataType, makeColumn } from '.'
+import { ColumnProps, DataType, makeColumn } from '.'
 
 export type TagInputProps<T extends DataType> = OmitExtends<{
     options: T[],
@@ -59,14 +59,14 @@ export const makeTagColumn = <T extends DataType>(
     options: T[],
     value_key: keyof DataType,
     label_key: keyof DataType,
-    other?: columnPropsOther,
+    other?: ColumnProps,
     tagOther?: TagInputProps<T>
 ) => {
     const InputComponent = makeTagInput<T>(value_key, label_key)
 
     return makeColumn(title, dataIndex, {
         ...other,
-        render: (item?: T[]) => item?.map((elm: T) => <Tag key={elm[label_key]} color={'blue'}>{other?.render?.(elm) ?? elm[label_key]}</Tag>) ?? '-',
+        render: (item: T[] | undefined, dataset, index) => item?.map((elm: T) => <Tag key={elm[label_key]} color={'blue'}>{other?.render?.(elm, dataset, index) ?? elm[label_key]}</Tag>) ?? '-',
         input: <InputComponent {...tagOther} options={options} />,
     })
 }

src/components/Table/Columns/text.tsx

@@ -1,8 +1,19 @@
 import { ColumnFilterItem } from 'antd/lib/table/interface'
-import { ReactNode } from 'react'
+import { Key, ReactNode } from 'react'
 
-import makeColumn, { columnPropsOther, DataType, RenderMethod, SorterMethod } from '.'
+import { ColumnProps, makeColumn, DataType, RenderMethod, SorterMethod } from '.'
-import { makeStringSorter } from '../sorters'
+import { getObjectByDeepKey } from '../Table'
+
+export const makeStringSorter = <T extends string>(key: Key): SorterMethod<T> => (a, b) => {
+    const vA = a ? getObjectByDeepKey(key, a) : null
+    const vB = b ? getObjectByDeepKey(key, b) : null
+
+    if (!vA && !vB) return 0
+    if (!vA) return 1
+    if (!vB) return -1
+
+    return String(vA).localeCompare(String(vB))
+}
 
 export const makeFilterTextMatch = <T extends unknown>(key: keyof DataType<T>) =>
     (filterValue: T, dataItem: DataType<T>) => dataItem[key] === filterValue
@@ -13,7 +24,7 @@ export const makeTextColumn = <T extends unknown = any>(
     filters?: ColumnFilterItem[],
     sorter?: SorterMethod<T>,
     render?: RenderMethod<T>,
-    other?: columnPropsOther
+    other?: ColumnProps
 ) => makeColumn(title, key, {
     filters,
     onFilter: filters ? makeFilterTextMatch(key) : undefined,

src/components/Table/Columns/time.tsx

@@ -1,25 +1,36 @@
-import { ReactNode } from 'react'
+import { Key, ReactNode } from 'react'
 
-import { formatTime } from '@utils'
+import { makeColumn, ColumnProps, SorterMethod } from '.'
+import { TimePickerWrapper, TimePickerWrapperProps, getObjectByDeepKey } from '..'
+import { formatTime, timeToMoment } from '@utils'
+import { TimeDto } from '@api'
 
-import { makeColumn, columnPropsOther } from '.'
+export const makeTimeSorter = <T extends TimeDto>(key: Key): SorterMethod<T> => (a, b) => {
-import { makeTimeSorter, TimePickerWrapper, TimePickerWrapperProps } from '..'
+    const vA = a ? getObjectByDeepKey(key, a) : null
+    const vB = b? getObjectByDeepKey(key, b) : null
 
-export const makeTimeColumn = (
+    if (!vA && !vB) return 0
+    if (!vA) return 1
+    if (!vB) return -1
+
+    return timeToMoment(vA).diff(timeToMoment(vB))
+}
+
+export const makeTimeColumn = <T extends TimeDto>(
     title: ReactNode,
     key: string,
     utc?: boolean,
     format?: string,
-    other?: columnPropsOther,
+    other?: ColumnProps,
     pickerOther?: TimePickerWrapperProps,
-) => makeColumn(title, key, {
+) => makeColumn<T>(title, key, {
     ...other,
     render: (time) => (
         <div className={'text-align-r-container'}>
             <span>{formatTime(time, utc, format) ?? '-'}</span>
         </div>
     ),
-    sorter: makeTimeSorter(key),
+    sorter: makeTimeSorter<T>(key),
     input: <TimePickerWrapper isUTC={utc} {...pickerOther} />,
 })
 

src/components/Table/Columns/timezone.tsx

@@ -1,11 +1,11 @@
-import { memo, ReactNode, useCallback, useEffect, useState } from 'react'
+import { Key, memo, ReactNode, useCallback, useEffect, useState } from 'react'
 import { Select, SelectProps } from 'antd'
 
 import { findTimezoneId, rawTimezones, TimezoneId } from '@utils'
 import type { OmitExtends } from '@utils/types'
 import { SimpleTimezoneDto } from '@api'
 
-import { columnPropsOther, makeColumn } from '.'
+import { ColumnProps, makeColumn } from '.'
 
 const makeTimezoneLabel = (id?: string | null, hours?: number) =>
     `UTC${hours && hours > 0 ? '+':''}${hours ? ('0' + hours).slice(-2) : '~??'} :: ${id ?? 'Неизвестно'}`
@@ -18,7 +18,7 @@ export const timezoneOptions = Object
         value: id,
     }))
 
-export const makeTimezoneRenderer = () => (timezone?: SimpleTimezoneDto) => {
+export const makeTimezoneRender = () => (timezone?: SimpleTimezoneDto) => {
     if (!timezone) return 'UTC~?? :: Неизвестно'
     const { hours, timezoneId } = timezone
     return makeTimezoneLabel(timezoneId, hours)
@@ -46,17 +46,17 @@ export const TimezoneSelect = memo<TimezoneSelectProps>(({ onChange, value, defa
     return (<Select {...other} onChange={onValueChanged} value={id} defaultValue={defaultTimezone} />)
 })
 
-export const makeTimezoneColumn = (
+export const makeTimezoneColumn = <T extends SimpleTimezoneDto>(
     title: ReactNode = 'Зона',
-    key: string = 'timezone',
+    key: Key = 'timezone',
-    defaultValue?: SimpleTimezoneDto,
+    defaultValue?: T,
     allowClear: boolean = true,
-    other?: columnPropsOther,
+    other?: ColumnProps<T>,
     selectOther?: TimezoneSelectProps
 ) => makeColumn(title, key, {
     width: 100,
     editable: true,
-    render: makeTimezoneRenderer(),
+    render: makeTimezoneRender(),
     input: (
         <TimezoneSelect
             key={key}

src/components/Table/EditableCell.tsx

@@ -1,44 +1,54 @@
-import { memo, ReactNode } from 'react'
+import { Key, memo, ReactNode, useMemo } from 'react'
+import { Rule } from 'rc-field-form/lib/interface'
 import { Form, Input } from 'antd'
-import { NamePath, Rule } from 'rc-field-form/lib/interface'
 
-type EditableCellProps = React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement> & {
+export type EditableCellProps = React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement> & {
-  editing?: boolean
+    editing?: boolean
-  dataIndex?: NamePath
+    dataIndex?: Key
-  input?: ReactNode
+    input?: ReactNode
-  isRequired?: boolean
+    isRequired?: boolean
-  title: string
+    formItemClass?: string
-  formItemClass?: string
+    formItemRules?: Rule[]
-  formItemRules?: Rule[]
+    children: ReactNode
-  children: ReactNode
+    initialValue: any
-  initialValue: any
 }
 
+const itemStyle = { margin: 0 }
+
 export const EditableCell = memo<EditableCellProps>(({
-  editing,
+    editing,
-  dataIndex,
+    dataIndex,
-  input,
+    input,
-  isRequired,
+    isRequired,
-  formItemClass,
+    formItemClass,
-  formItemRules,
+    formItemRules,
-  children,
+    children,
-  initialValue,
+    initialValue,
-  ...other
+    ...other
-}) => (
+}) => {
-  <td style={editing ? { padding: 0 } : undefined} {...other}>
+    const rules = useMemo(() => formItemRules || [{
-    {!editing ? children : (
+        required: isRequired,
-      <Form.Item
+        message: `Это обязательное поле!`,
-        name={dataIndex}
+    }], [formItemRules, isRequired])
-        style={{ margin: 0 }}
+
-        className={formItemClass}
+    const name = useMemo(() => dataIndex ? String(dataIndex).split('.') : undefined, [dataIndex])
-        rules={formItemRules ?? [{
+    const tdStyle = useMemo(() => editing ? { padding: 0 } : undefined, [editing])
-          required: isRequired,
+
-          message: `Это обязательное поле!`,
+    const edititngItem = useMemo(() => (
-        }]}
+        <Form.Item
-        initialValue={initialValue}
+            name={name}
-      >
+            style={itemStyle}
-        {input ?? <Input/>}
+            className={formItemClass}
-      </Form.Item>
+            rules={rules}
-    )}
+            initialValue={initialValue}
-  </td>
+        >
-))
+            {input ?? <Input />}
+        </Form.Item>
+    ), [name, rules, formItemClass, initialValue, input])
+
+    return (
+        <td style={tdStyle} {...other}>
+            {editing ? edititngItem : children}
+        </td>
+    )
+})

src/components/Table/Table.tsx

@@ -1,26 +1,65 @@
-import { memo, useCallback, useEffect, useState } from 'react'
+import { Key, memo, useCallback, useEffect, useState } from 'react'
 import { ColumnGroupType, ColumnType } from 'antd/lib/table'
 import { Table as RawTable, TableProps } from 'antd'
 
+import { RenderMethod } from './Columns'
+import { tryAddKeys } from './EditableTable'
+import TableSettingsChanger from './TableSettingsChanger'
 import type { OmitExtends } from '@utils/types'
 import { applyTableSettings, getTableSettings, setTableSettings, TableColumnSettings, TableSettings } from '@utils'
 
-import TableSettingsChanger from './TableSettingsChanger'
-import { tryAddKeys } from './EditableTable'
-
 import '@styles/index.css'
 
 export type BaseTableColumn<T> = ColumnGroupType<T> | ColumnType<T>
-export type TableColumns<T> = OmitExtends<BaseTableColumn<T>, TableColumnSettings>[]
+export type TableColumn<T> = OmitExtends<BaseTableColumn<T>, TableColumnSettings>
+export type TableColumns<T> = TableColumn<T>[]
 
 export type TableContainer<T> = TableProps<T> & {
-    columns: TableColumns<T>
+    columns: TableColumn<T>[]
     tableName?: string
     showSettingsChanger?: boolean
 }
 
-const _Table = <T extends object>({ columns, dataSource, tableName, showSettingsChanger, ...other }: TableContainer<T>) => {
+export interface DataSet<T, D = any> {
-    const [newColumns, setNewColumns] = useState<TableColumns<T>>([])
+    [k: Key]: DataSet<T> | T | D
+}
+
+export const getObjectByDeepKey = <T,>(key: Key | undefined, data: DataSet<T>): T | undefined => {
+    if (!key) return undefined
+    const parts = String(key).split('.')
+    let out = data
+    for (let i = 0; i < parts.length && out; i++) {
+        const key = parts[i]
+        if (!(key in out)) return undefined // Если ключ не найдем, считаем значение null
+        out = out[key] as DataSet<T> // Углубляемся внутрь объекта
+    }
+    return out as T
+}
+
+export const makeColumnRenderWrapper = <T extends DataSet<any>>(key: Key | undefined, render: RenderMethod<T, T> | undefined): RenderMethod<T, T> =>
+    (_: any, dataset: T, index: number) => {
+        const renderFunc: RenderMethod<T, T> = typeof render === 'function' ? render : (record) => String(record)
+        return renderFunc(getObjectByDeepKey<T>(key, dataset), dataset, index)
+    }
+
+
+const applyColumnWrappers = <T extends DataSet<any>>(columns: BaseTableColumn<T>[]): BaseTableColumn<T>[] => {
+    return columns.map((column) => {
+        if ('children' in column) {
+            return {
+                ...column,
+                children: applyColumnWrappers(column.children),
+            }
+        }
+        return {
+            ...column,
+            render: makeColumnRenderWrapper<T>(column.key, column.render),
+        }
+    })
+}
+
+function _Table<T extends DataSet<any>>({ columns, dataSource, tableName, showSettingsChanger, ...other }: TableContainer<T>) {
+    const [newColumns, setNewColumns] = useState<TableColumn<T>[]>([])
     const [settings, setSettings] = useState<TableSettings>({})
 
     const onSettingsChanged = useCallback((settings?: TableSettings | null) => {
@@ -31,7 +70,7 @@ const _Table = <T extends object>({ columns, dataSource, tableName, showSettings
 
     useEffect(() => setSettings(tableName ? getTableSettings(tableName) : {}), [tableName])
     useEffect(() => setNewColumns(() => {
-        const newColumns = applyTableSettings(columns, settings)
+        const newColumns = applyTableSettings(applyColumnWrappers(columns), settings)
         if (tableName && showSettingsChanger) {
             const oldTitle = newColumns[0].title
             newColumns[0].title = (props) => (

src/components/Table/TableSettingsChanger.tsx

@@ -1,11 +1,11 @@
 import { memo, useCallback, useEffect, useState } from 'react'
 import { ColumnsType } from 'antd/lib/table'
-import { Button, Modal, Switch, Table } from 'antd'
+import { Button, Modal, Switch } from 'antd'
 import { SettingOutlined } from '@ant-design/icons'
 
 import { TableColumnSettings, makeTableSettings, mergeTableSettings, TableSettings } from '@utils'
-import { TableColumns } from './Table'
+import { Table, TableColumns } from './Table'
-import { makeColumn } from '.'
+import { makeColumn, makeTextColumn } from '.'
 
 const parseSettings = <T extends object>(columns?: TableColumns<T>, settings?: TableSettings | null): TableColumnSettings[] => {
     const newSettings = mergeTableSettings(makeTableSettings(columns ?? []), settings ?? {})
@@ -46,8 +46,8 @@ const _TableSettingsChanger = <T extends object>({ title, columns, settings, onC
 
     useEffect(() => {
         setTableColumns([
-            makeColumn('Название', 'title'),
+            makeTextColumn<string>('Название', 'title'),
-            makeColumn(null, 'visible', {
+            makeColumn<any>(null, 'visible', {
                 title: () => (
                     <>
                         Показать
@@ -56,7 +56,7 @@ const _TableSettingsChanger = <T extends object>({ title, columns, settings, onC
                         </Button>
                     </>
                 ),
-                render: (visible: boolean, _?: TableColumnSettings, index: number = NaN) => (
+                render: (visible, _, index = NaN) => (
                     <Switch
                         checked={visible}
                         checkedChildren={'Отображён'}

src/components/Table/index.tsx

@@ -1,4 +1,3 @@
-export * from './sorters'
 export * from './EditableTable'
 export * from './DatePickerWrapper'
 export * from './TimePickerWrapper'

src/components/Table/sorters.ts

@@ -1,42 +0,0 @@
-import { timeToMoment } from '@utils'
-import { isRawDate } from '@utils'
-import { TimeDto } from '@api'
-
-import { DataType } from './Columns'
-import { CompareFn } from 'antd/lib/table/interface'
-
-export const makeNumericSorter = <T extends unknown>(key: keyof DataType<T>): CompareFn<DataType<T>> =>
-    (a: DataType<T>, b: DataType<T>) => Number(a[key]) - Number(b[key])
-
-export const makeNumericObjSorter = (key: [string, string]) =>
-    (a: DataType, b: DataType) => Number(a[key[0]][key[1]]) - Number(b[key[0]][key[1]])
-
-export const makeStringSorter = <T extends unknown>(key: keyof DataType<T>) => (a?: DataType<T> | null, b?: DataType<T> | null) => {
-    if (!a && !b) return 0
-    if (!a) return 1
-    if (!b) return -1
-
-    return String(a[key]).localeCompare(String(b[key]))
-}
-
-export const makeDateSorter = <T extends unknown>(key: keyof DataType<T>) => (a: DataType<T>, b: DataType<T>) => {
-    const adate = a[key]
-    const bdate = b[key]
-    if (!isRawDate(adate) || !isRawDate(bdate))
-        throw new Error('Date column contains not date formatted string(s)')
-
-    const date = new Date(adate)
-
-    return date.getTime() - new Date(bdate).getTime()
-}
-
-export const makeTimeSorter = <T extends TimeDto>(key: keyof DataType<T>) => (a: DataType<T>, b: DataType<T>) => {
-    const elma = a[key]
-    const elmb = b[key]
-
-    if (!elma && !elmb) return 0
-    if (!elma) return 1
-    if (!elmb) return -1
-
-    return timeToMoment(elma).diff(timeToMoment(elmb))
-}

src/pages/Well/WellOperations/WellDrillParams.jsx

@@ -1,88 +1,17 @@
 import { useState, useEffect, useCallback, memo, useMemo } from 'react'
-import { InputNumber } from 'antd'
 
 import { useWell } from '@asb/context'
 import {
     EditableTable,
     makeSelectColumn,
-    makeGroupColumn,
-    makeNumericRender,
     makeNumericSorter,
-    RegExpIsFloat,
+    makeNumericAvgRange,
 } from '@components/Table'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DrillParamsService, WellOperationService } from '@api'
 import { arrayOrDefault } from '@utils'
 
-import { makeNumericObjSorter } from '@components/Table/sorters'
-
-const makeNumericObjRender = (fixed, columnKey) => (value, obj) => {
-    let val = '-'
-    const isSelected = obj && columnKey && obj[columnKey[0]] ? obj[columnKey[0]][columnKey[1]] : false
-
-    if ((value ?? null) !== null && Number.isFinite(+value)) {
-        val = (fixed ?? null) !== null
-            ? (+value).toFixed(fixed)
-            : (+value).toPrecision(5)
-    }
-
-    return (
-        <div className={`text-align-r-container ${isSelected ? 'color-pale-green' : ''}`}>
-            <span>{val}</span>
-        </div>
-    )
-}
-
-const makeNumericColumnOptionsWithColor = (fixed, sorterKey, columnKey) => ({
-    editable: true,
-    initialValue: 0,
-    width: 100,
-    sorter: sorterKey ? makeNumericObjSorter(sorterKey) : undefined,
-    formItemRules: [{
-        required: true,
-        message: 'Введите число',
-        pattern: RegExpIsFloat,
-    }],
-    render: makeNumericObjRender(fixed, columnKey),
-})
-
-const makeNumericObjColumn = (
-    title,
-    dataIndex,
-    filters,
-    filterDelegate,
-    renderDelegate,
-    width,
-    other
-) => ({
-    title: title,
-    dataIndex: dataIndex,
-    key: dataIndex,
-    filters: filters,
-    onFilter: filterDelegate ? filterDelegate(dataIndex) : null,
-    sorter: makeNumericObjSorter(dataIndex),
-    width: width,
-    input: <InputNumber style={{ width: '100%' }}/>,
-    render: renderDelegate ?? makeNumericRender(),
-    align: 'right',
-    ...other
-})
-
-const makeNumericAvgRange = (
-    title,
-    dataIndex,
-    fixed,
-    filters,
-    filterDelegate,
-    renderDelegate,
-    width
-) => makeGroupColumn(title, [
-    makeNumericObjColumn('мин', [dataIndex, 'min'], filters, filterDelegate, renderDelegate, width, makeNumericColumnOptionsWithColor(fixed, [dataIndex, 'min'], [dataIndex, 'isMin'])),
-    makeNumericObjColumn('сред', [dataIndex, 'avg'], filters, filterDelegate, renderDelegate, width, makeNumericColumnOptionsWithColor(fixed, [dataIndex, 'avg'])),
-    makeNumericObjColumn('макс', [dataIndex, 'max'], filters, filterDelegate, renderDelegate, width, makeNumericColumnOptionsWithColor(fixed, [dataIndex, 'max'], [dataIndex, 'isMax']))
-])
-
 export const getColumns = async (idWell) => {
     let sectionTypes = await WellOperationService.getSectionTypes(idWell)
     sectionTypes = Object.entries(sectionTypes).map(([id, value]) => ({