Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added the ability to support single selection in the selection plugin. #1340

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

fabanc
Copy link

@fabanc fabanc commented Apr 2, 2023

The new code give the option to call the selection plugin so it supports either the selection of multiple rows, or one row at a time. The selection plugin expose three interfaces. One is for backward compatibility. They all share the same code base.

  • RowSelection: same old interface for backward compatibility. Uses RowSelectionMultiple under the hood.
  • RowSelectionSingle: new interface to support the selection of only one row at a time.
  • RowSelectionMultiple: new interface to support the initial behaviour, i.e selection of multiple rows.

Automated test cases have been updated. A live demo is available here.

Load the plugin to support the selection of multiple rows:

			let multipleSelection = gridjs.plugins.selection.RowSelection;
			let grid = new gridjs.Grid({
				columns: [
					{
						id: 'select',
						name: 'Select',
						plugin: {
							component: multipleSelection 
						}
					 },
					 {
						id: 'a',
						name: 'Column A'
					 },
					 {
						id: 'b',
						name: 'Column B'
					 },
					 {
						id: 'c',
						name: 'Column C'
					 }
					],
				data: [
					[1, 2, 3],
					[4, 5, 6],
					[7, 8, 9],
					[10, 11, 12],
				],
				}).render(document.getElementById("mygrid"));

Load the plugin to support only the selection of one row at a time:

			let singleSelection = gridjs.plugins.selection.RowSelectionSingle;
			let grid = new gridjs.Grid({
				columns: [
					{
						id: 'select',
						name: 'Select',
						plugin: {
							component: singleSelection
						}
					 },
					 {
						id: 'a',
						name: 'Column A'
					 },
					 {
						id: 'b',
						name: 'Column B'
					 },
					 {
						id: 'c',
						name: 'Column C'
					 }
					],
				data: [
					[1, 2, 3],
					[4, 5, 6],
					[7, 8, 9],
					[10, 11, 12],
				],
				}).render(document.getElementById("mygrid"));

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant