+export const LoaderPortal: React.FC = ({ className, show, fade = true, children, spinnerProps, ...other }) => (
+
= memo(({ title = 'Мониторинг', isAdmin, children, ...other }) => (
-
-
-
- 
-
- {children}
-
-
-))
+export const PageHeader: React.FC = memo(({ title = 'Мониторинг', isAdmin, children, ...other }) => {
+ const location = useLocation()
+
+ return (
+
+
+
+
+
+ )
+})
export default PageHeader
diff --git a/src/components/Poprompt.tsx b/src/components/Poprompt.tsx
new file mode 100644
index 0000000..74f36b5
--- /dev/null
+++ b/src/components/Poprompt.tsx
@@ -0,0 +1,50 @@
+import { memo, ReactNode, useCallback, useState } from 'react'
+import { Button, ButtonProps, Form, FormProps, Popover, PopoverProps } from 'antd'
+
+export type PopromptProps = PopoverProps & {
+ children?: ReactNode
+ footer?: ReactNode
+ text?: string
+ onDone?: (values: any) => void
+ formProps?: FormProps
+ buttonProps?: ButtonProps
+}
+
+export const Poprompt = memo(({ formProps, buttonProps, footer, children, onDone, text, ...other }) => {
+ const [visible, setVisible] = useState(false)
+
+ const onFormFinish = useCallback((values: any) => {
+ setVisible(false)
+ onDone?.(values)
+ }, [onDone])
+
+ return (
+
+ {children}
+
+ {footer ?? (
+
+
+ )}
+ trigger={'click'}
+ {...other}
+ visible={visible}
+ onVisibleChange={(visible) => setVisible(visible)}
+ >
+
+
+ )
+})
+
+export default Poprompt
diff --git a/src/components/Private/PrivateContent.tsx b/src/components/Private/PrivateContent.tsx
index 8e9369d..d565985 100644
--- a/src/components/Private/PrivateContent.tsx
+++ b/src/components/Private/PrivateContent.tsx
@@ -1,13 +1,14 @@
-import React from 'react'
+import { memo, ReactElement } from 'react'
import { isURLAvailable } from '@utils/permissions'
export type PrivateContentProps = {
absolutePath: string
- children?: React.ReactElement
+ children?: ReactElement
}
-export const PrivateContent: React.FC = ({ absolutePath, children = null }) =>
+export const PrivateContent = memo(({ absolutePath, children = null }) =>
isURLAvailable(absolutePath) ? children : null
+)
export default PrivateContent
diff --git a/src/components/Private/PrivateDefaultRoute.tsx b/src/components/Private/PrivateDefaultRoute.tsx
index 6e9ef08..0154875 100644
--- a/src/components/Private/PrivateDefaultRoute.tsx
+++ b/src/components/Private/PrivateDefaultRoute.tsx
@@ -1,5 +1,5 @@
import { memo } from 'react'
-import { Redirect, Route, RouteProps } from 'react-router-dom'
+import { Redirect, Route, RouteProps, useLocation } from 'react-router-dom'
import { getUserId } from '@utils/storage'
import { isURLAvailable } from '@utils/permissions'
@@ -9,10 +9,17 @@ export type PrivateDefaultRouteProps = RouteProps & {
elseRedirect?: string
}
-export const PrivateDefaultRoute = memo(({ elseRedirect, urls, ...other }) => (
-
- isURLAvailable(url)) ?? elseRedirect ?? (getUserId() ? '/access_denied' : '/login') }} />
-
-))
+export const PrivateDefaultRoute = memo(({ elseRedirect, urls, ...other }) => {
+ const location = useLocation()
+
+ return (
+
+ isURLAvailable(url)) ?? elseRedirect ?? (getUserId() ? '/access_denied' : '/login'),
+ state: { from: location.pathname },
+ }} />
+
+ )
+})
export default PrivateDefaultRoute
diff --git a/src/components/Private/PrivateMenuItem.tsx b/src/components/Private/PrivateMenuItem.tsx
index 16dd34b..fd48ee9 100644
--- a/src/components/Private/PrivateMenuItem.tsx
+++ b/src/components/Private/PrivateMenuItem.tsx
@@ -3,7 +3,7 @@ import { Menu, MenuItemProps } from 'antd'
import { memo, NamedExoticComponent } from 'react'
import { isURLAvailable } from '@utils/permissions'
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
export type PrivateMenuItemProps = MenuItemProps & {
root: string
@@ -16,11 +16,14 @@ export type PrivateMenuLinkProps = MenuItemProps & {
title: string
}
-export const PrivateMenuItemLink = memo(({ root = '', path, title, ...other }) => (
-
- {title}
-
-))
+export const PrivateMenuItemLink = memo(({ root = '', path, title, ...other }) => {
+ const location = useLocation()
+ return (
+
+ {title}
+
+ )
+})
export const PrivateMenuItem: NamedExoticComponent & {
Link: NamedExoticComponent
diff --git a/src/components/Private/PrivateRoute.tsx b/src/components/Private/PrivateRoute.tsx
index 366aaa4..901a0b6 100644
--- a/src/components/Private/PrivateRoute.tsx
+++ b/src/components/Private/PrivateRoute.tsx
@@ -14,7 +14,7 @@ export type PrivateRouteProps = RouteProps & {
}
export const defaultRedirect = (location?: Location) => (
- (({ root = '', path, component, children, redirect = defaultRedirect, ...other }) => {
diff --git a/src/components/Table/Columns/index.ts b/src/components/Table/Columns/index.ts
new file mode 100644
index 0000000..fd0b327
--- /dev/null
+++ b/src/components/Table/Columns/index.ts
@@ -0,0 +1,62 @@
+import { ReactNode } from 'react'
+import { Rule } from 'antd/lib/form'
+import { ColumnProps } from 'antd/lib/table'
+
+export {
+ RegExpIsFloat,
+ makeNumericRender,
+ makeNumericColumn,
+ makeNumericColumnOptions,
+ makeNumericColumnPlanFact,
+ makeNumericStartEnd,
+ makeNumericMinMax,
+ makeNumericAvgRange
+} from './numeric'
+export { makeColumnsPlanFact } from './plan_fact'
+export { makeSelectColumn } from './select'
+export { makeTagColumn, makeTagInput } from './tag'
+export { makeFilterTextMatch, makeTextColumn } from './text'
+export {
+ timezoneOptions,
+ TimezoneSelect,
+ makeTimezoneColumn,
+ makeTimezoneRenderer
+} from './timezone'
+
+export type { TagInputProps } from './tag'
+
+export type DataType = Record
+export type RenderMethod = (value: T, dataset?: DataType, index?: number) => ReactNode
+export type SorterMethod = (a?: DataType | null, b?: DataType | null) => number
+
+/*
+other - объект с дополнительными свойствами колонки
+поддерживаются все базовые свойства из описания https://ant.design/components/table/#Column
+плю дополнительные для колонок EditableTable: */
+export type columnPropsOther = ColumnProps & {
+ // редактируемая колонка
+ editable?: boolean
+ // react компонента редактора
+ input?: ReactNode
+ // значение может быть пустым
+ isRequired?: boolean
+ // css класс для
+}
+
+export const makeColumn = (title: ReactNode, key: string, other?: columnPropsOther) => ({
+ title: title,
+ key: key,
+ dataIndex: key,
+ ...other,
+})
+
+export const makeGroupColumn = (title: ReactNode, children: object[]) => ({ title, children })
+
+export default makeColumn
diff --git a/src/components/Table/Columns/numeric.tsx b/src/components/Table/Columns/numeric.tsx
new file mode 100644
index 0000000..1b2ed3b
--- /dev/null
+++ b/src/components/Table/Columns/numeric.tsx
@@ -0,0 +1,111 @@
+import { InputNumber } from 'antd'
+import { ReactNode } from 'react'
+
+import { makeNumericSorter } from '../sorters'
+import { columnPropsOther, makeGroupColumn, RenderMethod } from '.'
+
+export const RegExpIsFloat = /^[-+]?\d+\.?\d*$/
+
+export const makeNumericRender = (fixed?: number): RenderMethod => (value) => {
+ let val = '-'
+ if ((value ?? null) !== null && Number.isFinite(+value)) {
+ val = (fixed ?? null) !== null
+ ? (+value).toFixed(fixed)
+ : (+value).toPrecision(5)
+ }
+
+ return (
+ (
+ title: string,
+ dataIndex: string,
+ options: DefaultOptionType[],
+ defaultValue?: T,
+ other?: columnPropsOther,
+ selectOther?: SelectProps
+) => makeColumn(title, dataIndex, {
+ ...other,
+ input: ,
+ render: (value) => {
+ const item = options?.find(option => option?.value === value)
+ return other?.render?.(item?.value) ?? item?.label ?? defaultValue ?? value ?? '--'
+ }
+})
+
+export default makeSelectColumn
diff --git a/src/components/Table/Columns/tag.tsx b/src/components/Table/Columns/tag.tsx
new file mode 100644
index 0000000..d2a9f6b
--- /dev/null
+++ b/src/components/Table/Columns/tag.tsx
@@ -0,0 +1,74 @@
+import { memo, ReactNode, useCallback, useEffect, useState } from 'react'
+import { Select, SelectProps, Tag } from 'antd'
+import { DefaultOptionType, SelectValue } from 'antd/lib/select'
+
+import { OmitExtends } from '@utils'
+
+import { columnPropsOther, DataType, makeColumn } from '.'
+
+export type TagInputProps = OmitExtends<{
+ options: T[],
+ value?: T[],
+ onChange?: (values: T[]) => void,
+}, SelectProps>
+
+export const makeTagInput = (value_key: string, label_key: string) =>
+ memo>(({ options, value, onChange, ...other }) => {
+ const [selectOptions, setSelectOptions] = useState([])
+ const [selectedValue, setSelectedValue] = useState([])
+
+ useEffect(() => setSelectOptions(options.map((elm) => ({
+ value: String(elm[value_key]),
+ label: elm[label_key],
+ }))), [options])
+
+ useEffect(() => {
+ setSelectedValue(value?.map((elm) => String(elm[value_key])) ?? [])
+ }, [value])
+
+ const onSelectChange = useCallback((rawValues?: SelectValue) => {
+ let values: any[] = []
+ if (typeof rawValues === 'string')
+ values = rawValues.split(',')
+ else if (Array.isArray(rawValues))
+ values = rawValues
+
+ const objectValues: T[] = values.reduce((out: T[], value: string) => {
+ const res = options.find((option) => String(option[value_key]) === String(value))
+ if (res) out.push(res)
+ return out
+ }, [])
+
+ onChange?.(objectValues)
+ }, [onChange, options])
+
+ return (
+
+ )
+})
+
+export const makeTagColumn = (
+ title: ReactNode,
+ dataIndex: string,
+ options: T[],
+ value_key: keyof DataType,
+ label_key: keyof DataType,
+ other?: columnPropsOther,
+ tagOther?: TagInputProps
+) => {
+ const InputComponent = makeTagInput(value_key, label_key)
+
+ return makeColumn(title, dataIndex, {
+ ...other,
+ render: (item?: T[]) => item?.map((elm: T) => {other?.render?.(elm) ?? elm[label_key]} ) ?? '-',
+ input: (key: keyof DataType) =>
+ (filterValue: T, dataItem: DataType) => dataItem[key] === filterValue
+
+export const makeTextColumn = (
+ title: ReactNode,
+ dataIndex: string,
+ filters: object[],
+ sorter?: SorterMethod,
+ render?: RenderMethod,
+ other?: columnPropsOther
+) => ({
+ title: title,
+ dataIndex: dataIndex,
+ key: dataIndex,
+ filters: filters,
+ onFilter: filters ? makeFilterTextMatch(dataIndex) : null,
+ sorter: sorter ?? makeStringSorter(dataIndex),
+ render: render,
+ ...other
+})
+
+export default makeTextColumn
diff --git a/src/components/Table/Columns/timezone.tsx b/src/components/Table/Columns/timezone.tsx
new file mode 100644
index 0000000..affae17
--- /dev/null
+++ b/src/components/Table/Columns/timezone.tsx
@@ -0,0 +1,75 @@
+import { memo, ReactNode, useCallback, useEffect, useState } from 'react'
+import { Select, SelectProps } from 'antd'
+
+import { OmitExtends } from '@utils'
+import { findTimezoneId, rawTimezones, TimezoneId } from '@utils/datetime'
+import { SimpleTimezoneDto } from '@api'
+
+import { columnPropsOther, makeColumn } from '.'
+
+const makeTimezoneLabel = (id?: string | null, hours?: number) =>
+ `UTC${hours && hours > 0 ? '+':''}${hours ? ('0' + hours).slice(-2) : '~??'} :: ${id ?? 'Неизвестно'}`
+
+export const timezoneOptions = Object
+ .entries(rawTimezones)
+ .sort((a, b) => a[1] - b[1])
+ .map(([id, hours]) => ({
+ label: makeTimezoneLabel(id, hours),
+ value: id,
+ }))
+
+export const makeTimezoneRenderer = () => (timezone?: SimpleTimezoneDto) => {
+ if (!timezone) return 'UTC~?? :: Неизвестно'
+ const { hours, timezoneId } = timezone
+ return makeTimezoneLabel(timezoneId, hours)
+}
+
+export type TimezoneSelectProps = OmitExtends<{
+ onChange?: ((value?: SimpleTimezoneDto | null) => void) | null
+ value?: SimpleTimezoneDto | null
+ defaultValue?: SimpleTimezoneDto | null
+}, SelectProps>
+
+export const TimezoneSelect = memo(({ onChange, value, defaultValue, ...other }) => {
+ const [id, setId] = useState(null)
+ const [defaultTimezone, setDefaultTimezone] = useState(null)
+
+ useEffect(() => setDefaultTimezone(defaultValue ? findTimezoneId(defaultValue) : null), [defaultValue])
+ useEffect(() => setId(value ? findTimezoneId(value) : null), [value])
+
+ const onValueChanged = useCallback((id: TimezoneId | null) => {
+ console.log(id)
+ onChange?.({
+ timezoneId: id,
+ hours: id ? rawTimezones[id] : 0,
+ isOverride: false,
+ })
+ }, [onChange])
+
+ return ()
+})
+
+export const makeTimezoneColumn = (
+ title: ReactNode = 'Зона',
+ key: string = 'timezone',
+ defaultValue?: SimpleTimezoneDto,
+ allowClear: boolean = true,
+ other?: columnPropsOther,
+ selectOther?: TimezoneSelectProps
+) => makeColumn(title, key, {
+ width: 100,
+ editable: true,
+ render: makeTimezoneRenderer(),
+ input: (
+ & {
+ value: RangeValue,
+ isUTC?: boolean
+}
+
+const normalizeDates = (value: RangeValue, isUTC?: boolean): RangeValue => value && [
+ value[0] ? (isUTC ? moment.utc(value[0]).local() : moment(value[0])) : null,
+ value[1] ? (isUTC ? moment.utc(value[1]).local() : moment(value[1])) : null,
+]
+
+export const DateRangeWrapper = memo(({ value, isUTC, ...other }) => (
+ , HTMLTableDataCellElement> & {
editing?: boolean
dataIndex?: NamePath
input?: React.Component
@@ -13,7 +14,7 @@ type EditableCellProps = {
initialValue: any
}
-export const EditableCell = ({
+export const EditableCell = memo(({
editing,
dataIndex,
input,
@@ -22,8 +23,9 @@ export const EditableCell = ({
formItemRules,
children,
initialValue,
-}: EditableCellProps) => (
-
+ ...other
+}) => (
+
{!editing ? children : (
)}
-)
+))
diff --git a/src/components/Table/EditableTable.jsx b/src/components/Table/EditableTable.jsx
index d12992c..ff2378d 100644
--- a/src/components/Table/EditableTable.jsx
+++ b/src/components/Table/EditableTable.jsx
@@ -1,9 +1,10 @@
-import { Form, Table, Button, Popconfirm } from 'antd'
+import { memo, useCallback, useState, useEffect } from 'react'
+import { Form, Button, Popconfirm } from 'antd'
import { EditOutlined, SaveOutlined, PlusOutlined, CloseCircleOutlined, DeleteOutlined } from '@ant-design/icons'
-import { useState, useEffect } from 'react'
import { invokeWebApiWrapperAsync } from '@components/factory'
+import { Table } from '.'
import { EditableCell } from './EditableCell'
const newRowKeyValue = 'newRow'
@@ -42,7 +43,7 @@ export const tryAddKeys = (items) => {
return items.map((item, index) => ({...item, key: item.key ?? item.id ?? index }))
}
-export const EditableTable = ({
+export const EditableTable = memo(({
columns,
dataSource,
onChange, // Метод вызывается со всем dataSource с измененными элементами после любого действия
@@ -62,14 +63,14 @@ export const EditableTable = ({
setData(tryAddKeys(dataSource))
}, [dataSource])
- const isEditing = (record) => record?.key === editingKey
+ const isEditing = useCallback((record) => record?.key === editingKey, [editingKey])
- const edit = (record) => {
+ const edit = useCallback((record) => {
form.setFieldsValue({...record})
setEditingKey(record.key)
- }
+ }, [form])
- const cancel = () => {
+ const cancel = useCallback(() => {
if (editingKey === newRowKeyValue) {
const newData = [...data]
const index = newData.findIndex((item) => newRowKeyValue === item.key)
@@ -77,9 +78,9 @@ export const EditableTable = ({
setData(newData)
}
setEditingKey('')
- }
+ }, [data, editingKey])
- const addNewRow = async () => {
+ const addNewRow = useCallback(async () => {
let newRow = {
...form.initialValues,
key:newRowKeyValue
@@ -88,9 +89,9 @@ export const EditableTable = ({
const newData = [newRow, ...data]
setData(newData)
edit(newRow)
- }
+ }, [data, edit, form.initialValues])
- const save = async (record) => {
+ const save = useCallback(async (record) => {
try {
const row = await form.validateFields()
const newData = [...data]
@@ -121,8 +122,7 @@ export const EditableTable = ({
}
try {
- if (onChange)
- onChange(newData)
+ onChange?.(newData)
} catch (err) {
console.log('callback onChange fault:', err)
}
@@ -130,9 +130,9 @@ export const EditableTable = ({
} catch (errInfo) {
console.log('Validate Failed:', errInfo)
}
- }
+ }, [data, editingKey, form, onChange, onRowAdd, onRowEdit])
- const deleteRow = (record) =>{
+ const deleteRow = useCallback((record) => {
const newData = [...data]
const index = newData.findIndex((item) => record.key === item.key)
@@ -140,10 +140,8 @@ export const EditableTable = ({
setData(newData)
onRowDelete(record)
-
- if (onChange)
- onChange(newData)
- }
+ onChange?.(newData)
+ }, [data, onChange, onRowDelete])
const operationColumn = {
width: buttonsWidth ?? 82,
@@ -180,7 +178,7 @@ export const EditableTable = ({
),
}
- const handleColumn = (col) => {
+ const handleColumn = useCallback((col) => {
if (col.children)
col.children = col.children.map(handleColumn)
@@ -197,13 +195,13 @@ export const EditableTable = ({
input: col.input,
isRequired: col.isRequired,
title: col.title,
- dataType: col.dataType,
+ datatype: col.datatype,
formItemClass: col.formItemClass,
formItemRules: col.formItemRules,
initialValue: col.initialValue,
}),
}
- }
+ }, [isEditing])
const mergedColumns = [...columns.map(handleColumn), operationColumn]
@@ -221,4 +219,4 @@ export const EditableTable = ({
/>
)
-}
+})
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
new file mode 100644
index 0000000..17116cb
--- /dev/null
+++ b/src/components/Table/Table.tsx
@@ -0,0 +1,58 @@
+import { memo, useCallback, useEffect, useState } from 'react'
+import { ColumnGroupType, ColumnType } from 'antd/lib/table'
+import { Table as RawTable, TableProps } from 'antd'
+
+import { OmitExtends } from '@utils'
+import { getTableSettings, setTableSettings } from '@utils/storage'
+import { applySettings, ColumnSettings, TableSettings } from '@utils/table_settings'
+
+import TableSettingsChanger from './TableSettingsChanger'
+import { tryAddKeys } from './EditableTable'
+
+import '@styles/index.css'
+
+export type BaseTableColumn = ColumnGroupType | ColumnType
+export type TableColumns = OmitExtends, ColumnSettings>[]
+
+export type TableContainer = TableProps & {
+ columns: TableColumns
+ dataSource: any[]
+ tableName?: string
+ showSettingsChanger?: boolean
+}
+
+export const Table = memo(({ columns, dataSource, tableName, showSettingsChanger, ...other }) => {
+ const [newColumns, setNewColumns] = useState([])
+ const [settings, setSettings] = useState({})
+
+ const onSettingsChanged = useCallback((settings?: TableSettings | null) => {
+ if (tableName)
+ setTableSettings(tableName, settings)
+ setSettings(settings ?? {})
+ }, [tableName])
+
+ useEffect(() => setSettings(tableName ? getTableSettings(tableName) : {}), [tableName])
+ useEffect(() => setNewColumns(() => {
+ const newColumns = applySettings(columns, settings)
+ if (tableName && showSettingsChanger) {
+ const oldTitle = newColumns[0].title
+ newColumns[0].title = (props) => (
+ (({ title, columns, settings, onChange }) => {
+ const [visible, setVisible] = useState(false)
+ const [newSettings, setNewSettings] = useState(parseSettings(columns, settings))
+ const [tableColumns, setTableColumns] = useState>([])
+
+ const onVisibilityChange = useCallback((index: number, visible: boolean) => {
+ setNewSettings((oldSettings) => {
+ const newSettings = [...oldSettings]
+ newSettings[index].visible = visible
+ return newSettings
+ })
+ }, [])
+
+ const toogleAll = useCallback((show: boolean) => {
+ setNewSettings((oldSettings) => oldSettings.map((column) => {
+ column.visible = show
+ return column
+ }))
+ }, [])
+
+ useEffect(() => {
+ setTableColumns([
+ makeColumn('Название', 'title'),
+ makeColumn(null, 'visible', {
+ title: () => (
+ <>
+ Показать
+
+
+ ),
+ render: (visible: boolean, _?: ColumnSettings, index: number = NaN) => (
+ onVisibilityChange(index, visible)}
+ />
+ )
+ }),
+ ])
+ }, [toogleAll, onVisibilityChange])
+
+ useEffect(() => setNewSettings(parseSettings(columns, settings)), [columns, settings])
+
+ const onModalOk = useCallback(() => {
+ onChange(unparseSettings(newSettings))
+ setVisible(false)
+ }, [newSettings, onChange])
+
+ const onModalCancel = useCallback(() => {
+ setNewSettings(parseSettings(columns, settings))
+ setVisible(false)
+ }, [columns, settings])
+
+ return (
+ <>
+
+
+
+
{children}
{show && fade && }
- {show &&
)
diff --git a/src/components/PageHeader.tsx b/src/components/PageHeader.tsx
index 6af290c..12ab867 100644
--- a/src/components/PageHeader.tsx
+++ b/src/components/PageHeader.tsx
@@ -1,11 +1,12 @@
import { memo } from 'react'
+import { Link, useLocation } from 'react-router-dom'
import { Layout } from 'antd'
-import { Link } from 'react-router-dom'
+import { BasicProps } from 'antd/lib/layout/layout'
-import logo from '@images/logo_32.png'
import { headerHeight } from '@utils'
import { UserMenu } from './UserMenu'
-import { BasicProps } from 'antd/lib/layout/layout'
+
+import Logo from '@images/Logo'
export type PageHeaderProps = BasicProps & {
title?: string
@@ -13,17 +14,21 @@ export type PageHeaderProps = BasicProps & {
children?: React.ReactNode
}
-export const PageHeader: React.FC{title}
-{title}
+
+
+
+
+ )}
+
+ {val}
+
+ )
+}
+
+export const makeNumericColumnOptions = (fixed?: number, sorterKey?: string): columnPropsOther => ({
+ editable: true,
+ initialValue: 0,
+ width: 100,
+ sorter: sorterKey ? makeNumericSorter(sorterKey) : undefined,
+ formItemRules: [{
+ required: true,
+ message: 'Введите число',
+ pattern: RegExpIsFloat,
+ }],
+ render: makeNumericRender(fixed),
+})
+
+export const makeNumericColumn = (
+ title: ReactNode,
+ dataIndex: string,
+ filters: object[],
+ filterDelegate: (key: string | number) => any,
+ renderDelegate: (_: any, row: object) => any,
+ width: string,
+ other?: columnPropsOther
+) => ({
+ title: title,
+ dataIndex: dataIndex,
+ key: dataIndex,
+ filters: filters,
+ onFilter: filterDelegate ? filterDelegate(dataIndex) : null,
+ sorter: makeNumericSorter(dataIndex),
+ width: width,
+ input:
+
+
+ )
+ }
+ return newColumns
+ }), [settings, columns, onSettingsChanged, showSettingsChanger, tableName])
+
+ return (
+ {typeof oldTitle === 'function' ? oldTitle(props) : oldTitle}
+