How to use the dash-table/derived/cell/cellProps.makeCell function in dash-table

export const handleClick = (propsFn: () => ICellFactoryProps, idx: number, i: number, e: any) => {
    const {
        selected_cells,
        active_cell,
        setProps,
        viewport,
        virtualized,
        visibleColumns
    } = propsFn();

    const row = idx + virtualized.offset.rows;
    const col = i + virtualized.offset.columns;

    const clickedCell = makeCell(row, col, visibleColumns, viewport);

    // clicking again on the already-active cell: ignore
    if (active_cell && row === active_cell.row && col === active_cell.column) {
        return;
    }

    e.preventDefault();

    /*
     * In some cases this will initiate browser text selection.
     * We've hijacked copying, so while it might be nice to allow copying part
     * of a cell, currently you'll always get the whole cell regardless of what
     * the browser thinks is selected.
     * And when you've selected multiple cells the browser selection is
     * completely wrong.
     */

: [R.max(0, row - 1), column];
                break;

            case KEY_CODES.ARROW_DOWN:
            case KEY_CODES.ENTER:
                nextCoords = restrictToSelection
                    ? selectionCycle([row + 1, column], selected_cells)
                    : [R.min(viewport.data.length - 1, row + 1), column];
                break;

            default:
                throw new Error(
                    `Table.getNextCell: unknown navigation keycode ${e.keyCode}`
                );
        }
        return makeCell(nextCoords[0], nextCoords[1], visibleColumns, viewport);
    }

const finalSelected = makeSelection(
            { minRow, maxRow, minCol, maxCol },
            visibleColumns, viewport
        );

        const newProps: Partial = {
            is_focused: false,
            end_cell: makeCell(endRow, endCol, visibleColumns, viewport),
            selected_cells: finalSelected
        };

        const newStartRow = endRow === minRow ? maxRow : minRow;
        const newStartCol = endCol === minCol ? maxCol : minCol;

        if (startRow !== newStartRow || startCol !== newStartCol) {
            newProps.start_cell = makeCell(
                newStartRow,
                newStartCol,
                visibleColumns,
                viewport
            );
        }

        setProps(newProps);
    }

} else if (minCol > 0) {
                minCol--;
                endCol = minCol;
            }
        } else {
            return;
        }

        const finalSelected = makeSelection(
            { minRow, maxRow, minCol, maxCol },
            visibleColumns, viewport
        );

        const newProps: Partial = {
            is_focused: false,
            end_cell: makeCell(endRow, endCol, visibleColumns, viewport),
            selected_cells: finalSelected
        };

        const newStartRow = endRow === minRow ? maxRow : minRow;
        const newStartCol = endCol === minCol ? maxCol : minCol;

        if (startRow !== newStartRow || startCol !== newStartCol) {
            newProps.start_cell = makeCell(
                newStartRow,
                newStartCol,
                visibleColumns,
                viewport
            );
        }

        setProps(newProps);

export const handleDoubleClick = (propsFn: () => ICellFactoryProps, idx: number, i: number, e: any) => {
    const {
        is_focused,
        setProps,
        viewport,
        virtualized,
        visibleColumns
    } = propsFn();

    const c = visibleColumns[i];

    if (!c.editable) {
        return;
    }

    const newCell = makeCell(
        idx + virtualized.offset.rows,
        i + virtualized.offset.columns,
        visibleColumns, viewport
    );

    if (!is_focused) {
        e.preventDefault();
        const newProps = {
            selected_cells: [newCell],
            active_cell: newCell,
            start_cell: newCell,
            end_cell: newCell,
            is_focused: true
        };
        setProps(newProps);
    }