[v8] Single Row Selection

[Ref-Bit]

Hi, I'm trying to achieve single-row selection using a radio element, but it's not working. My simple approach is when selecting a row, it will be checked with the getIsSelected() method of Row API. If true (selected), no change will take effect. Else, the current row will be selected and the previous one will be deselected.

I made a minified example of the intended feature. Please check the example and help.

Code Example

[Ref-Bit]

I updated the onChange method on the selected row as follows:

onChange: () => {
  const selected = row.getIsSelected(); // get selected status of current row.
  table.toggleAllRowsSelected(false); // deselect all.
  row.toggleSelected(!selected); // reverse selected status of current row.
}

Also, I extracted the radio input to its component to match the checkbox component provided in the examples section. Feel free to view the completed code example for reference.

[fdmmarshall]

Hello, I'm trying to implement this exact action, using a regular button component, but haven't been successful. My main issue is that the row.getIsSelected does not change from false to true, even though the row is selected. When I include row.toggleSelected() as a prop I keep getting an infinite loop. Do you have any advice you could give me? Thanks!

		id: "actions",
		header: "actions",
		cell: ({ row }) => (
			<div className="text-center">
				<RowAction
					selected={row.getIsSelected()}
					setRow_id={setRow_id}
					row_id={row_id}
					toggleSelectedHandler={row.getToggleSelectedHandler()}
                                          selectionToggle={row.toggleSelected()}
				/>
			</div>
		),
		size: 70,
		maxSize: 80,
	}

	<IconButton
	         innerRef={btnRef}
	         IconComponent={EllipsisHorizontalCircleIcon}
	         className="rotate-90 border-none"
	         onClick={(e) => {
	         buttonClickHandler(e);
	          setOpen(!open); }}
	/>

	const buttonClickHandler = (
		e: React.MouseEvent<HTMLButtonElement, MouseEvent>
	) => {
		if (btnRef.current && selected === false) {
			toggleSelectedHandler(e);
			selectionToggle(!selected)
			console.log(selected);
		}
	};

[vholik]

Thanks. Save a lot of time

[Ref-Bit]

Hi @fdmmarshall, could provide a sandbox for your app?