littlebeeper/tabulator-multi-value-edit.html

## tabulator-multi-value-edit.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Tabulator multivalue edit</title>
        <link href="https://unpkg.com/tabulator-tables@4.6.2/dist/css/tabulator.min.css" rel="stylesheet">
        <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.6.2/dist/js/tabulator.min.js"></script>
    </head>
    <body>
        <div id="example-table"></div>
    </body>
    <script type="text/javascript">
        const cellClickFn = (e,cell)=>{

            if (e.shiftKey) {
                shiftKeyPressedCount++;

                if (shiftKeyPressedCount % 2 == 1) {
                    selectStartCellFn(e, cell);
                }

                if (shiftKeyPressedCount % 2 == 0) {
                    updateSelectedCellsFn(e, cell);
                }

            } else {
                copyCellValueFn(e, cell);
            }

        }

        const selectStartCellFn = (e,cell)=>{
            start = cell.getRow().getIndex();
            console.log("Selected with first shiftKey press: " + start);
        }

        const updateSelectedCellsFn = (e,cell)=>{
            // cell.getColumn().getField() use for dynamic field generation?
            let end = cell.getRow().getIndex();
            console.log("Update cells with data: " + cellData + " starting from row: " + start + " ending at: " + end);
            for (let i = start; i <= end; i++) {
                console.log(i);
                table.updateRow(i, {
                    cities: cellData
                });
            }
        }

        const copyCellValueFn = (e,cell)=>{
            cellData = cell.getValue();
            console.log("Selected with Click. \nValue has been copied:" + cellData);
        }

        //define cell context menu
        const cellContextMenu = [{
            label: "Copy Value",
            action: copyCellValueFn
        }, {
            label: "Select start cell",
            action: selectStartCellFn
        }, {
            label: "Duplicate in between",
            action: updateSelectedCellsFn
        }, ]

        let cellData;
        let shiftKeyPressedCount = 0
        let start;

        let table = new Tabulator("#example-table",{
            layout: "fitColumns",
            height: "500px",
            selectable: true,
            columns: [{
                title: "Name",
                field: "name"
            }, {
                title: "Favorite Cities",
                field: "cities",
                contextMenu: cellContextMenu,
                cellClick: cellClickFn,

            }, {
                title: "Favourite Color",
                field: "color"
            }],
            data: [{
                id: 1,
                name: "Person 1",
                cities: ["Berlin", "Detroit"],
                color: "red"
            }, {
                id: 2,
                name: "Person 2",
                cities: ["Manhattan"],
                color: "yellow"
            }, {
                id: 3,
                name: "Person 3",
                cities: ["San Diego", ],
                color: "purple"
            }, {
                id: 4,
                name: "Person 4",
                cities: ["Dubai", "London"],
                color: "orange"
            }, {
                id: 5,
                name: "Person 5",
                cities: ["Istanbul", "Paris"],
                color: "orange"
            }]
        });
    </script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Tabulator multivalue edit</title>
	<link href="https://unpkg.com/tabulator-tables@4.6.2/dist/css/tabulator.min.css" rel="stylesheet">
	<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.6.2/dist/js/tabulator.min.js"></script>
	</head>
	<body>
	<div id="example-table"></div>
	</body>
	<script type="text/javascript">
	const cellClickFn = (e,cell)=>{

	if (e.shiftKey) {
	shiftKeyPressedCount++;

	if (shiftKeyPressedCount % 2 == 1) {
	selectStartCellFn(e, cell);
	}

	if (shiftKeyPressedCount % 2 == 0) {
	updateSelectedCellsFn(e, cell);
	}

	} else {
	copyCellValueFn(e, cell);
	}

	}

	const selectStartCellFn = (e,cell)=>{
	start = cell.getRow().getIndex();
	console.log("Selected with first shiftKey press: " + start);
	}

	const updateSelectedCellsFn = (e,cell)=>{
	// cell.getColumn().getField() use for dynamic field generation?
	let end = cell.getRow().getIndex();
	console.log("Update cells with data: " + cellData + " starting from row: " + start + " ending at: " + end);
	for (let i = start; i <= end; i++) {
	console.log(i);
	table.updateRow(i, {
	cities: cellData
	});
	}
	}

	const copyCellValueFn = (e,cell)=>{
	cellData = cell.getValue();
	console.log("Selected with Click. \nValue has been copied:" + cellData);
	}

	//define cell context menu
	const cellContextMenu = [{
	label: "Copy Value",
	action: copyCellValueFn
	}, {
	label: "Select start cell",
	action: selectStartCellFn
	}, {
	label: "Duplicate in between",
	action: updateSelectedCellsFn
	}, ]

	let cellData;
	let shiftKeyPressedCount = 0
	let start;

	let table = new Tabulator("#example-table",{
	layout: "fitColumns",
	height: "500px",
	selectable: true,
	columns: [{
	title: "Name",
	field: "name"
	}, {
	title: "Favorite Cities",
	field: "cities",
	contextMenu: cellContextMenu,
	cellClick: cellClickFn,

	}, {
	title: "Favourite Color",
	field: "color"
	}],
	data: [{
	id: 1,
	name: "Person 1",
	cities: ["Berlin", "Detroit"],
	color: "red"
	}, {
	id: 2,
	name: "Person 2",
	cities: ["Manhattan"],
	color: "yellow"
	}, {
	id: 3,
	name: "Person 3",
	cities: ["San Diego", ],
	color: "purple"
	}, {
	id: 4,
	name: "Person 4",
	cities: ["Dubai", "London"],
	color: "orange"
	}, {
	id: 5,
	name: "Person 5",
	cities: ["Istanbul", "Paris"],
	color: "orange"
	}]
	});
	</script>
	</html>