Row selection functionality

Project.toml

@@ -4,6 +4,7 @@ authors = ["Benjamin Lungwitz <benj.lung@googlemail.com> and contributors"]
 version = "0.1.2"
 
 [deps]
+CSV = "336ed68f-0bac-5ca0-87d4-7b16caf5d00b"
 DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
 HypertextLiteral = "ac1192a8-f4b3-4bfe-ba22-af5b92cd3ab2"
 Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"

src/PlutoGrid.jl

@@ -29,10 +29,10 @@ Shows a non-editable table in Pluto.
 `height`: vertical size of the table in Pluto in pixel (default: 600)
 
 """
-function readonly_table(df:: DataFrame; filterable:: Bool=true, kwargs...)
+function readonly_table(df:: DataFrame; filterable:: Bool=true, selectable_rows::Bool = false, pagination::Bool = false, kwargs...)
 	column_defs = _make_col_defs(df; filterable)
 	data = _prepare_data(df)
-    return _create_table(column_defs, data; filterable, kwargs...)
+    return _create_table(column_defs, data; filterable, selectable_rows, pagination, kwargs...)
 end
 
 readonly_table(df; kwargs...) = readonly_table(DataFrame(df); kwargs...)
@@ -57,10 +57,10 @@ Shows an editable table in Pluto. In case of user edits in the table,
 `height`: vertical size of the table in Pluto in pixel (default: 600)
 
 """
-function editable_table(df:: DataFrame, editable_cols:: AbstractVector{<: AbstractString}=collect(names(df)); filterable:: Bool=true, return_only_modified:: Bool=false, kwargs...)
+function editable_table(df:: DataFrame, editable_cols:: AbstractVector{<: AbstractString}=collect(names(df)); filterable:: Bool=true, selectable_rows::Bool = false, return_only_modified:: Bool=false, kwargs...)
 	column_defs = _make_col_defs(df; filterable, editable_cols)
 	data = _prepare_data(df)
-	return _create_table(column_defs, data; editable=true, filterable, kwargs...)
+	return _create_table(column_defs, data; editable=true, filterable, selectable_rows, kwargs...)
 end
 
 editable_table(df, editable_cols; kwargs...) = editable_table(DataFrame(df), editable_cols; kwargs...)
@@ -69,7 +69,7 @@ editable_table(df; kwargs...) = editable_table(DataFrame(df); kwargs...)
 
 function _create_table(column_defs:: AbstractVector{<: AbstractDict}, data:: AbstractVector; 
 	sortable=true, filterable=true, resizable=true, pagination=false, height:: Integer=600,
-	editable=false, insert=true, delete=true, auto_confirm=false)
+	editable=false, insert=true, delete=true, auto_confirm=false, selectable_rows = false)
 
 	edit_button = @htl("""
 		<button  
@@ -133,6 +133,22 @@ function _create_table(column_defs:: AbstractVector{<: AbstractDict}, data:: Abs
 		})
 	""")
 
+	# select_button = @htl("""
+	# 	<button
+	# 	id="select_rows"
+	# 	type="button">
+	# 		Confirm Selection
+	# 	</button>
+	# """)
+
+	# select_button_callback = JavaScript("""
+    # div.querySelector("button#select_rows").addEventListener("click", (e) => {
+    #     const selectedRows = gridOptions.api.getSelectedRows();
+    #     div.value = selectedRows;
+    #     div.dispatchEvent(new CustomEvent("input"));
+    # })
+    # """)
+
 	checkbox_renderer = JavaScript("""
 	// source: https://stackoverflow.com/a/62173238/14693778
 	function CheckboxRenderer() {}
@@ -169,6 +185,7 @@ $(editable ? edit_button : "")
 $((editable && insert) ? insert_button : "")
 $((editable && delete) ? delete_button : "")
 
+
 <script src="https://unpkg.com/ag-grid-community@$(AG_GRID_VERSION)/dist/ag-grid-community.min.js"></script>
 <script>
 
@@ -193,6 +210,8 @@ $((editable && delete) ? delete_row_callback : JavaScript(""))
 const gridOptions = {
   columnDefs: columnDefs,
   rowData: rowData,
+  rowSelection: $(selectable_rows ? "multiple" : "none"),
+  rowMultiSelectWithClick: true,
   components: { checkboxRenderer: CheckboxRenderer },
   defaultColDef: {
     filter: $(sortable),
@@ -210,6 +229,7 @@ const gridOptions = {
     },
   },
   pagination: $(pagination),
+  paginationPageSize: 20,
   undoRedoCellEditing: true,
   onCellValueChanged: (params) => {
 		if (params.oldValue === params.newValue) {
@@ -229,6 +249,11 @@ const gridOptions = {
 			div.querySelector("button#update_grid").click();
 		}
 	},
+	onSelectionChanged: (params) => {
+            const selectedRows = params.api.getSelectedRows();
+            div.value = selectedRows;
+            div.dispatchEvent(new CustomEvent("input"));
+        },
 };
 new agGrid.Grid(div, gridOptions);
 
@@ -243,6 +268,13 @@ function _make_col_defs(df; filterable=true, editable_cols=String[])
 	setdiff(editable_cols, names(df)) == [] || error("not all columns defined as editable are in input data")
 
 	column_defs = Dict[]
+	#checkbox rendering in table
+	push!(column_defs, Dict(
+    	"headerCheckboxSelection" => true,   
+        "checkboxSelection" => true,        
+        "width" => 40,
+        "pinned" => "left"
+    ))
 	for c in names(df)
 		col_dict = Dict{String, Any}("field" => c)