plain-design 0.0.97 → 1.0.0-beta.2

package/src/packages/createUseTableOption/use/setting/use.setting.tsx

@@ -1,127 +0,0 @@
-import React from "react";
-import useDialog, {DialogServiceFormatOption, DialogServiceOption} from "../../../useDialog";
-import {tTableOptionHooks} from "../use.hooks";
-import {tTableOptionMethods} from "../use.methods";
-import {tPlc} from "../../../PlTable/plc/utils/plc.type";
-import {classnames, reactive} from "plain-design-composition";
-import {tTableOptionSort} from "../use.sort.state";
-import {iTableOptionSettingConfig, iTableOptionSettingInnerUser} from "./use.setting.utils";
-import {useTableOptionSettingSort} from "./use.setting.sort";
-import './use.setting.scss'
-import {useTableOptionSettingSeniorFilter} from "./use.setting.filter.senior";
-import {useTableOptionSettingConfig} from "./use.setting.config";
-import {useTableOptionSettingImport} from "./use.setting.import";
-import {useTableOptionSettingExport} from "./use.setting.export";
-import {useTableOptionSettingAllFilter} from "./use.setting.filter.all";
-import {tTableOptionFilter} from "../use.filter.state";
-import {tTableOptionCache} from "../use.cache";
-import {useTableOptionSettingCache} from "./use.setting.cache";
-import {tTableOptionCheck} from "../check/use.check";
-import {iTableOptionState} from "../../createUseTableOption.utils";
-
-export function useTableOptionSetting({hooks, methods, sortState, filterState, cache, check, tableState}: {
-    hooks: tTableOptionHooks,
-    methods: tTableOptionMethods,
-    sortState: tTableOptionSort,
-    filterState: tTableOptionFilter,
-    cache: tTableOptionCache,
-    check: tTableOptionCheck,
-    tableState: iTableOptionState,
-}) {
-
-    const $dialog = useDialog()
-
-    const state = reactive({
-        settingConfigs: [] as iTableOptionSettingConfig[],
-        getSourceFlatPlcList: () => [] as tPlc[],
-        activeKey: null as null | string,
-        closeSetting: null as null | (() => void),
-    })
-
-    const getSourceFlatPlcList = () => state.getSourceFlatPlcList()
-
-    hooks.onCollectPlcData.use(plcData => {state.getSourceFlatPlcList = () => plcData.sourceFlatPlcList.filter(i => !!i.props.field)})
-
-    const useTableOptionSettingInner: iTableOptionSettingInnerUser = (config) => {state.settingConfigs.push(config)}
-
-    const openSetting = async (key: string) => {
-
-        const settingConfigs = state.settingConfigs.sort((a, b) => a.seq - b.seq)
-        state.activeKey = key
-        const showConfig = state.settingConfigs.find(i => i.key === key)
-        !!showConfig && showConfig.beforeOpen && (await showConfig.beforeOpen())
-
-        const dlgOpt: DialogServiceOption = {
-            status: null,
-            dialogProps: {
-                wrapperPadding: false,
-                horizontal: 'end',
-                fullHeight: true,
-                transition: 'pl-transition-dialog-right',
-                width: null as any,
-                /*
-                *  设置为false，读取不了宽度，会导致表格渲染不出来，设置为true，会导致在显示表单的时候过渡动画异常。
-                */
-                destroyOnClose: false,
-                footAlign: 'flex-start',
-                contentPadding: false,
-            },
-            title: '设置',
-            render: () => {
-                return (
-                    <div className="pl-table-pro-setting">
-                        <div className="pl-table-pro-setting-nav">
-                            {[null, ...settingConfigs, null].map((item, index) => (
-                                <div className={classnames([
-                                    'pl-table-pro-setting-nav-item',
-                                    {
-                                        'pl-table-pro-setting-nav-item-active': !!item && item.key === state.activeKey,
-                                        'pl-table-pro-setting-nav-item-prev': !!settingConfigs[index] && settingConfigs[index].key === state.activeKey,
-                                        'pl-table-pro-setting-nav-item-next': !!settingConfigs[index - 2] && settingConfigs[index - 2].key === state.activeKey,
-                                    }
-                                ])} key={index} onClick={async () => {
-                                    if (!item) {return}
-                                    !!item.beforeOpen && (await item.beforeOpen())
-                                    state.activeKey = item.key
-                                }}>
-                                    <div className="pl-table-pro-setting-nav-item-inner">
-                                        {item?.title}
-                                    </div>
-                                </div>
-                            ))}
-                        </div>
-                        {(() => {
-                            const r = settingConfigs.find(i => i.key === state.activeKey)
-                            const content = !!r && !!r.render && r.render()
-                            return (
-                                <div className={classnames(['pl-table-pro-setting-content', {'pl-table-pro-setting-content-pending': !!r && r.contentPending !== false}])}>
-                                    {content}
-                                </div>
-                            )
-                        })()}
-                    </div>
-                )
-            },
-            cancelButton: true,
-            cancelButtonText: '关闭',
-        }
-        $dialog(dlgOpt)
-        state.closeSetting = () => (dlgOpt as DialogServiceFormatOption).close()
-
-        return {openSetting}
-    }
-
-    const closeSetting = () => state.closeSetting && state.closeSetting()
-
-    useTableOptionSettingAllFilter({useTableOptionSettingInner, filterState})
-    useTableOptionSettingSeniorFilter({useTableOptionSettingInner, getSourceFlatPlcList, methods, hooks, cache, filterState})
-    useTableOptionSettingSort({hooks, sortState, getSourceFlatPlcList, useTableOptionSettingInner})
-    useTableOptionSettingConfig({useTableOptionSettingInner, getSourceFlatPlcList, cache, hooks})
-    useTableOptionSettingCache({useTableOptionSettingInner, cache})
-    useTableOptionSettingImport({useTableOptionSettingInner, getSourceFlatPlcList, methods, closeSetting})
-    useTableOptionSettingExport({useTableOptionSettingInner, closeSetting, check, getSourceFlatPlcList, tableState, hooks})
-
-    return {openSetting, closeSetting}
-}
-
-export type tTableOptionSetting = ReturnType<typeof useTableOptionSetting>

package/src/packages/createUseTableOption/use/setting/use.setting.utils.tsx

@@ -1,24 +0,0 @@
-import {ReactNode} from "react";
-
-export interface iTableOptionSettingConfig {
-    key: eTableOptionSettingView,
-    title: string,
-    seq: number,
-    render: () => ReactNode,
-    beforeOpen?: () => void | Promise<void>,
-    contentPending?: boolean,
-}
-
-export interface iTableOptionSettingInnerUser {
-    (config: iTableOptionSettingConfig): void
-}
-
-export enum eTableOptionSettingView {
-    seniorFilter = 'seniorFilter',
-    allFilter = 'allFilter',
-    sort = 'sort',
-    config = 'config',
-    cache = 'cache',
-    import = 'import',
-    export = 'export',
-}

package/src/packages/createUseTableOption/use/use.base-table.tsx

@@ -1,64 +0,0 @@
-import {tTableOptionHooks} from "./use.hooks";
-import PlTable from "../../PlTable";
-import {TableNode} from "../../PlTable/table/use/useTableNode";
-import {tPlcType} from "../../PlTable/plc/utils/plc.type";
-import React from "react";
-import {PlcIndex} from "../../PlcIndex";
-import {iTableOptionState, tTableOptionConfig} from "../createUseTableOption.utils";
-import {tTablePagination} from "./use.paginaiton";
-import {tTableOptionSort} from "./use.sort.state";
-import {tTableOptionCache} from "./use.cache";
-
-export function useTableOptionBaseTable(
-    {
-        config,
-        tableState,
-        hooks,
-        pagination,
-        sortState,
-        cache,
-    }: {
-        config: tTableOptionConfig,
-        tableState: iTableOptionState,
-        hooks: tTableOptionHooks,
-        pagination: tTablePagination,
-        sortState: tTableOptionSort,
-        cache: tTableOptionCache,
-    }) {
-    const refTable = (table: typeof PlTable.use.class | null | undefined) => {
-        hooks.onRefTable.exec(table!)
-    }
-    const handler = {
-        onClickCell: (node: TableNode) => {hooks.onClickCell.exec(node)},
-        onDblClickCell: (node: TableNode) => {hooks.onDblClickCell.exec(node)},
-        onClickHead: (plc: tPlcType, e: React.MouseEvent) => hooks.onClickHead.exec({plc, e})
-    }
-
-    hooks.onTableRender.use(prev => [
-        ...prev,
-        {
-            seq: 10,
-            render: () => (
-                <PlTable
-                    ref={refTable}
-                    showRows={config.showRows}
-                    className="pl-table-pro-base-table"
-                    bodyRowHeight={config.bodyRowHeight}
-                    headRowHeight={config.headRowHeight}
-                    data={tableState.list}
-                    defaultEditingWhenAddRow={tableState.editingWhenAddRow}
-                    currentKey={tableState.currentKey || undefined}
-                    keyField={config.keyField}
-                    config={cache.tablePropsConfig}
-                    onClickRow={handler.onClickCell}
-                    onDblclickCell={handler.onDblClickCell}
-                    onClickHead={handler.onClickHead}
-                    sort={sortState.sortQueryData.value}
-                    onCollectPlcData={hooks.onCollectPlcData.exec}
-                >
-                    {hooks.onColumns.exec([])}
-                </PlTable>
-            )
-        }
-    ])
-}

package/src/packages/createUseTableOption/use/use.buttons.tsx

@@ -1,417 +0,0 @@
-import React from "react";
-import PlButton from "../../PlButton";
-import PlDropdownOption from "../../PlDropdownOption";
-import {tTableOptionMethods} from "./use.methods";
-import {eTableProEditType, iTableOptionButton, iTableOptionButtonInner, iTableOptionButtonOuter, tTableOptionConfig} from "../createUseTableOption.utils";
-import {toArray} from "../../../utils/toArray";
-import {tTableOptionHooks} from "./use.hooks";
-import {tTableOptionCommand} from "./use.command";
-import {tTableOptionSetting} from "./setting/use.setting";
-import {TableNode} from "../../PlTable/table/use/useTableNode";
-import {tTableOptionPermit} from "./use.permit";
-import {computed} from "plain-design-composition";
-import {deepcopy} from "plain-utils/object/deepcopy";
-import PlDropdown from "../../PlDropdown";
-import PlIcon from "../../PlIcon";
-import PlDropdownMenu from "../../PlDropdownMenu";
-import PlButtonGroup from "../../PlButtonGroup";
-import {eTableProStatus, tTableOptionConfirm} from "./use.confirm";
-import PlcOperator from "../../PlcOperator";
-import {eTableOptionSettingView} from "./setting/use.setting.utils";
-
-
-const DefaultSeq = {
-    insert: 5,
-    update: 10,
-    delete: 15,
-    other: 20,
-}
-
-export function useTableOptionButtons({hooks, methods, command, setting, config, permit, confirm}: { hooks: tTableOptionHooks, methods: tTableOptionMethods, command: tTableOptionCommand, setting: tTableOptionSetting, permit: tTableOptionPermit, config: tTableOptionConfig, confirm: tTableOptionConfirm }) {
-
-    const state = {selectNode: undefined as undefined | null | TableNode}
-    hooks.onSelectChange.use(selectNode => state.selectNode = selectNode)
-
-    const utils = {
-        getSeq: (btn: iTableOptionButton) => btn.seq == null ? DefaultSeq[btn.type] : btn.seq,
-        createButton: (btn: iTableOptionButton) => {
-            if (btn.position !== 'in' && !!btn.command) {
-                toArray(btn.command).forEach(name => command.on(name, (e) => !!btn.handler && btn.handler(e)))
-            }
-            return btn
-        },
-    }
-
-    const standardButtons = {
-        /*外置新建*/
-        insertOut: utils.createButton({
-            label: '新建',
-            icon: 'el-icon-document-add',
-            position: 'out',
-            code: 'insert',
-            type: 'insert',
-            handler: () => methods.editMethods.insert(),
-            seq: 2,
-        }),
-        /*外置赋值*/
-        copyOut: utils.createButton({
-            label: '复制',
-            icon: 'el-icon-document-copy',
-            position: 'out',
-            code: 'copy',
-            type: 'insert',
-            handler: () => methods.editMethods.copy(deepcopy(state.selectNode?.data)),
-            seq: 3,
-            // show: () => config.hideButton['copy'] === false || config.hideButton['copy-out'] === false,
-        }),
-        /*行内复制*/
-        copyIn: utils.createButton({
-            label: '复制',
-            position: 'in',
-            code: 'copy',
-            type: 'insert',
-            seq: 3,
-            handler: (node) => methods.editMethods.copy(deepcopy(node.data)),
-            // show: () => config.hideButton['copy'] === false || config.hideButton['copy-in'] === false,
-        }),
-        /*外置删除*/
-        deleteOut: utils.createButton({
-            label: "删除",
-            icon: 'el-icon-document-remove',
-            position: 'out',
-            code: 'delete',
-            type: 'delete',
-            seq: 4,
-            handler: () => methods.editMethods.delete(state.selectNode),
-        }),
-        /*行内删除*/
-        deleteIn: utils.createButton({
-            label: '删除',
-            position: 'in',
-            code: 'delete',
-            type: 'delete',
-            seq: 4,
-            handler: (node) => methods.editMethods.delete(node),
-        }),
-        /*行内编辑*/
-        editIn: utils.createButton({
-            label: '编辑',
-            position: 'in',
-            code: 'update',
-            type: 'update',
-            seq: 2,
-            handler: node => methods.editMethods.update(node)
-        }),
-
-        /*外置-表单编辑*/
-        formEdit: utils.createButton({
-            label: '表单编辑',
-            icon: 'el-icon-document',
-            type: 'update',
-            code: 'update-form',
-            position: 'more',
-            command: 'alt+e',
-            handler: () => methods.editMethods.update(undefined, eTableProEditType.form),
-        }),
-        /*外置-批量新建*/
-        batchInsert: utils.createButton({
-            label: '批量新建',
-            icon: 'el-icon-document-add',
-            type: 'insert',
-            code: 'inset-batch',
-            position: 'more',
-            command: 'alt+i',
-            handler: () => methods.editMethods.batchInsert(),
-        }),
-        /*外置-批量编辑*/
-        batchUpdate: utils.createButton({
-            label: '批量编辑',
-            icon: 'el-icon-edit-outline',
-            type: 'update',
-            code: 'update-batch',
-            position: 'more',
-            command: 'alt+u',
-            handler: () => methods.editMethods.batchUpdate(),
-        }),
-        /*外置-批量删除*/
-        batchDelete: utils.createButton({
-            label: '批量删除',
-            icon: 'el-icon-document-remove',
-            type: 'delete',
-            code: 'delete-batch',
-            position: 'more',
-            command: 'alt+d',
-            handler: () => methods.editMethods.batchDelete(),
-        }),
-        /*外置-批量修改*/
-        batchModify: utils.createButton({
-            label: '批量修改',
-            icon: 'el-icon-edit',
-            type: 'update',
-            code: 'update-modify',
-            position: 'more',
-            command: 'alt+m',
-            handler: () => methods.editMethods.batchModify(),
-        }),
-        allFilter: utils.createButton({
-            label: '所有筛选',
-            icon: 'el-icon-brush',
-            type: 'other',
-            code: 'senior-filter',
-            position: 'more',
-            command: 'alt+t',
-            handler: () => {setting.openSetting(eTableOptionSettingView.allFilter)}
-        }),
-        seniorFilter: utils.createButton({
-            label: '高级筛选',
-            icon: 'el-icon-brush',
-            type: 'other',
-            code: 'senior-filter',
-            position: 'more',
-            command: 'alt+f',
-            handler: () => {setting.openSetting(eTableOptionSettingView.seniorFilter)}
-        }),
-        seniorSort: utils.createButton({
-            label: '高级排序',
-            icon: 'el-icon-sort',
-            type: 'other',
-            code: 'senior-sort',
-            position: 'more',
-            command: 'alt+g',
-            handler: () => {setting.openSetting(eTableOptionSettingView.sort)}
-        }),
-        setting: utils.createButton({
-            label: '个性设置',
-            icon: 'el-icon-setting',
-            type: 'other',
-            code: 'setting',
-            position: 'more',
-            command: 'alt+r',
-            handler: () => {setting.openSetting(eTableOptionSettingView.config)}
-        }),
-        cacheSetting: utils.createButton({
-            label: '缓存设置',
-            icon: 'el-icon-star-off',
-            type: 'other',
-            code: 'cache-setting',
-            position: 'more',
-            command: 'alt+b',
-            handler: () => {setting.openSetting(eTableOptionSettingView.cache)}
-        }),
-        importData: utils.createButton({
-            label: '导入数据',
-            icon: 'el-icon-download',
-            type: 'other',
-            code: 'import',
-            position: 'more',
-            command: 'alt+j',
-            handler: () => {setting.openSetting(eTableOptionSettingView.import)}
-        }),
-        exportData: utils.createButton({
-            label: '导出数据',
-            icon: 'el-icon-upload1',
-            type: 'other',
-            code: 'export',
-            position: 'more',
-            command: 'alt+k',
-            handler: () => {setting.openSetting(eTableOptionSettingView.export)}
-        }),
-    }
-
-    command.on('esc', () => methods.editMethods.cancel())
-    command.on('alt+s', () => methods.editMethods.save())
-    command.on('up', () => methods.pageMethods.selectPrevRow())
-    command.on('down', () => methods.pageMethods.selectNextRow())
-    command.on('left', () => methods.pageMethods.prev())
-    command.on('right', () => methods.pageMethods.next())
-
-    const outerButtons = computed(() => {
-        return [...Object.values(standardButtons), ...config.buttons || []]
-            .filter(i => i.position !== 'in')
-            .map(item => {
-                const btn = item as iTableOptionButtonOuter
-                const {code, type, position} = btn
-                let label = typeof btn.label === "function" ? btn.label() : btn.label
-                let icon = typeof btn.icon === "function" ? btn.icon() : btn.icon
-                let show = typeof btn.show === "function" ? btn.show() : btn.show
-                let disabled = typeof btn.disabled === "function" ? btn.disabled() : btn.disabled
-                let seq = utils.getSeq(btn)
-
-                if (show == null) {show = true}
-                if (disabled == null) {disabled = false}
-
-                if (config.hideButton[code] || config.hideButton[`${code}-${position}`]) {show = false}
-                if (type !== 'other') {
-                    if (!permit[type]) {
-                        show = false
-                    }
-                }
-
-                return {...btn, label, icon, show, disabled, seq,}
-            })
-            .filter(i => i.show)
-            .sort((a, b) => utils.getSeq(a) - utils.getSeq(b))
-    })
-
-    hooks.onButtons.use((prev) => {
-        let {out, more} = outerButtons.value.reduce((prev, btn) => {
-            prev[btn.position].push(btn)
-            return prev
-        }, {out: [], more: []} as { out: typeof outerButtons.value, more: typeof outerButtons.value })
-        let [_1, _2, _3, ...left] = out
-        more = [...more, ...left]
-
-        return <>
-            {prev}
-            <PlButtonGroup>
-                {[_1, _2, _3]
-                    .filter(Boolean)
-                    .map(({render, icon, disabled, handler, seq, label}, index) => (
-                        !!render ? render() : <PlButton
-                            key={index}
-                            icon={icon}
-                            disabled={disabled}
-                            onClick={handler}
-                            label={label}
-                            style={{order: String(seq)}}
-                        />
-                    ))}
-                {more.length > 0 && <>
-                    <PlDropdown placement="bottom-end" width={null as any} height={null as any}>
-                        {{
-                            reference: ({open}) => (
-                                <PlButton>
-                                    <span>更多</span>
-                                    <PlIcon icon={'el-icon-arrow-down'} style={{
-                                        transition: 'transform 200ms linear',
-                                        transform: `rotateX(${open ? 180 : 0}deg)`,
-                                    }}/>
-                                </PlButton>
-                            ),
-                            popper: () => (
-                                <PlDropdownMenu>
-                                    {more.map(({label, icon, disabled, handler, seq, command, render}, index) => (
-                                        !!render ? render() : <PlDropdownOption
-                                            key={index}
-                                            label={label + (!command ? '' : `[${toArray(command!).map(i => i.toUpperCase()).join(',')}]`)}
-                                            icon={icon || undefined}
-                                            disabled={disabled}
-                                            onClick={handler}
-                                        />
-                                    ))}
-                                </PlDropdownMenu>
-                            )
-                        }}
-                    </PlDropdown>
-                </>}
-            </PlButtonGroup>
-        </>
-    })
-
-    const innerButtons = computed(() => [...Object.values(standardButtons), ...config.buttons || []]
-        .filter(i => i.position === 'in') as iTableOptionButtonInner[]);
-
-    /*渲染in buttons*/
-    hooks.onColumns.use(content => {
-        if (config.hideOperation || innerButtons.value.length === 0) {return content}
-        const show = (() => {
-            let btns = deepcopy(innerButtons.value)
-            if (!permit.insert) {btns = btns.filter(btn => btn.type !== 'insert')}
-            if (!permit.update) {btns = btns.filter(btn => btn.type !== 'update')}
-            if (!permit.delete) {btns = btns.filter(btn => btn.type !== 'delete')}
-            if (!!config.hideButton) {
-                btns = btns.filter(({code, position}) => !config.hideButton[code] && !config.hideButton[`${code}-${position}`])
-            }
-            return btns.length > 0
-        })()
-        if (!show) {return content}
-        return <>
-            {content}
-            <PlcOperator>
-                {{
-                    default: ({node}) => {
-                        if (node.edit) {
-                            return <>
-                                <PlButtonGroup mode="text" size="mini">
-                                    <PlButton onClick={methods.editMethods.cancel} label={'取消'}/>
-                                    <PlButton onClick={methods.editMethods.save} label={'保存'}/>
-                                </PlButtonGroup>
-                            </>
-                        }
-                        const buttons = innerButtons.value.map(btn => {
-                            const {code, type, position} = btn
-                            let label = typeof btn.label === "function" ? btn.label(node) : btn.label
-                            let icon = typeof btn.icon === "function" ? btn.icon(node) : btn.icon
-                            let show = typeof btn.show === "function" ? btn.show(node) : btn.show
-                            let disabled = typeof btn.disabled === "function" ? btn.disabled(node) : btn.disabled
-                            let seq = utils.getSeq(btn)
-                            if (show == null) {show = true}
-                            if (disabled == null) {disabled = false}
-                            if (config.hideButton[code] || config.hideButton[`${code}-${position}`]) {show = false}
-                            if (type !== 'other') {
-                                if (!permit[type]) {
-                                    show = false
-                                }
-                            }
-                            return {...btn, label, icon, show, disabled, seq,}
-                        }).filter(i => i.show).sort((a, b) => utils.getSeq(a) - utils.getSeq(b))
-                        let dropdownButtons: typeof buttons = []
-                        const maxButtons = 4
-                        if (buttons.length > maxButtons) {
-                            dropdownButtons = buttons.splice(maxButtons - 1)
-                        }
-                        return <PlButtonGroup mode="text" size="mini">
-                            {buttons.map(({render, icon, disabled, handler, seq, label}, index) => (
-                                !!render ? render(node) : <PlButton
-                                    disabled={disabled}
-                                    key={index}
-                                    label={label}
-                                    icon={icon}
-                                    onClick={e => {
-                                        e.preventDefault()
-                                        !disabled && !!handler && handler(node, e)
-                                    }}
-                                    style={{order: String(seq) as any}}
-                                />
-                            ))}
-                            {dropdownButtons.length > 0 && (
-                                <PlDropdown placement="bottom-end" height={null as any} width={120}>
-                                    {{
-                                        reference: ({open}) => (
-                                            <PlButton>
-                                                <span>更多</span>
-                                                <PlIcon icon={'el-icon-arrow-down'} style={{
-                                                    transition: 'transform 200ms linear',
-                                                    transform: `rotateX(${open ? 180 : 0}deg)`,
-                                                }}/>
-                                            </PlButton>
-                                        ),
-                                        popper: () => (
-                                            <PlDropdownMenu>
-                                                {dropdownButtons.map(({label, icon, disabled, handler, seq, render}, index) => (
-                                                    !!render ? render(node) : <PlDropdownOption
-                                                        key={index}
-                                                        label={label}
-                                                        icon={icon || undefined}
-                                                        disabled={disabled}
-                                                        onClick={(e) => !!handler && handler(node, e)}
-                                                        align="center"
-                                                    />
-                                                ))}
-                                            </PlDropdownMenu>
-                                        )
-                                    }}
-                                </PlDropdown>
-                            )}
-                        </PlButtonGroup>
-                    }
-                }}
-            </PlcOperator>
-        </>
-    })
-
-    /*双击编辑*/
-    hooks.onDblClickCell.use((selectNode) => {confirm.state.status !== eTableProStatus.select && !config.hideButton.update && permit.update && methods.editMethods.update(selectNode)})
-}
-
-export type TabelOptionButtons = ReturnType<typeof useTableOptionButtons>