You can achieve this using react js react-select options as below.


import { useEffect, useState } from "react";
import Select from "react-select";
function App(props) {
//const options = compliments;
const [state, setState] = useState({
rows: [
{
rowId: 0,
config: ""
}
],
id: 1
});
const [configOpts, setConfigOpts] = useState([]);
const configstyles = {
control: (styles, { isFocused, isSelected }) => ({
...styles,
backgroundColor: "white",
borderColor: isSelected ? "yellow" : "grey"
}),
option: (styles, { data, isDisabled, isFocused, isSelected }) => ({
...styles,
width: "auto"
}),
singleValue: (styles, { data }) => ({
...styles,
":before": {
borderRadius: 10,
content: data.label === "Test3" ? '"Red"' : '"Green"',
color: data.label === "Test3" ? "Red" : "Green",
display: "inline",
marginRight: 8,
height: 10,
width: 10
}
}),
menu: (styles) => ({
...styles,
width: "max-content",
minWidth: "100%"
})
// Input: (styles) => ({ ...styles, width: "auto" })
};
const handleAddRow = () => {
const newRow = {
rowId: state.id,
config: ""
};
setState({
...state,
rows: [...state.rows, newRow],
id: state.id + 1
});
};
const handleRemoveRow = (idx) => () => {
const rows = state.rows.filter((FilterdRow) => FilterdRow.rowId !== idx);
console.log("rows", rows);
setState({
...state,
rows
});
};
const handleConfigChange = (index) => (selectedOption) => {
console.log("SelectedOption: " + selectedOption.label);
const rows = state.rows.map((row) => {
if (row.id === index) {
return {
...row,
["config"]: selectedOption.label
};
}
return row;
});
setState({
...state,
rows
});
};
useEffect(() => {
setConfigOpts([
{ label: "Test11111111111111111111111111", value: "Test1" },
{ label: "Test2", value: "Test2" },
{ label: "Test3", value: "Test3" },
{ label: "Test4", value: "Test4" }
]);
}, []);
return (
<>
<table>
{state.rows.map((item, idx) => (
<tr key={item.rowId}>
<td>
<Select
options={configOpts}
onChange={handleConfigChange(item.rowId)}
styles={configstyles}
/>
</td>
<td>
<button onClick={handleRemoveRow(item.rowId)}>Remove</button>
</td>
</tr>
))}
</table>
<div>
<button onClick={handleAddRow}>Add</button>
</div>
</>
);
}
export default App;
CodeSandbox