() => {
  const [options, setOptions] = React.useState([
    { id: '1', label: 'Label', text: 'optional text 1', isToggleSelected: true, isDisabled: false },
    { id: '2', label: 'Label', text: 'optional text 2', isToggleSelected: false, isDisabled: false },
    { id: '3', label: 'Label', text: 'optional text 3', isToggleSelected: true, isDisabled: true },
    { id: '4', label: 'Label', text: 'optional text 4', isToggleSelected: false, isDisabled: false },
    { id: '5', label: 'Label', text: 'optional text 5', isToggleSelected: false, isDisabled: false },
  ]);

  const setSelectedLists = () => {
    return options.filter(item => item.isToggleSelected).map(item => item.id);
  };

  const handleChangeValue = (selected, orderedList) => {
    return [selected, orderedList];
  };

  const handleInitialLoad = (selected, orderedList) => {
    return [selected, orderedList];
  };

  return (
    <DraggableRows
      variant="settings"
      onChangeValue={handleChangeValue}
      onInitialLoad={handleInitialLoad}
      options={options}
      setOptions={setOptions}
      primaryTextKey="label"
      secondaryTextKey="text"
      rowId="id"
      setSelectedLists={setSelectedLists}
    >
    <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center' }}>
        <Button variant="text" onClick={() => alert('Button clicked!')}>Click Me</Buton>
      </div>
      </DraggableRows>
  );
};

() => {
  const [options, setOptions] = React.useState([
    {
      id: '1',
      label: 'Label',
      text: 'optional text 1',
      tagName: 'Success',
      tagVariant: 'success',
      isDisabled: false,
    },
    {
      id: '2',
      label: 'Label',
      text: 'optional text 2',
      tagName: 'Info',
      tagVariant: 'info',
      isDisabled: false,
    },
    {
      id: '3',
      label: 'Label',
      text: 'optional text 3',
      tagName: 'Danger',
      tagVariant: 'error',
      isDisabled: true,
    },
  ]);

  const [state, setState] = React.useState(false);

  const handleChange = (e) => {
    setState((state) => (state ? false : e.currentTarget));
  };

  const updateOrder = (list) => {
    const optionIdMap = {};
    options.forEach((option) => {
      optionIdMap[option.id] = option;
    });
    const updatedOptions = list.map((id) => optionIdMap[id]);
    setOptions(updatedOptions);
  };

  return (
    <DraggableRows variant="flexible" updateOrder={updateOrder}>
      {options.map((item, index) => (
        <Box
          id={item.id} // id is compulsory for draggable rows to work drag and drop
          key={item.id}
          isDisabled={item.isDisabled}
          sx={{
            display: 'flex',
            alignItems: 'center',
            width: '100%',
          }}
        >
          <Box
            sx={{
              marginRight: '8px',
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            }}
          >
            <Typography>{item.label}</Typography>
          </div>
          <Box
            sx={{
              flex: '0 1 20%',
              minWidth: '20%',
              marginRight: '24px',
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            }}
          >
            <Tag
              variant={item.tagVariant}
              onClick={handleChange}
              open={Boolean(state)}
              hasMenu={item.tagVariant === 'info'}
            >
              {item.tagName}
            </Tag>
            <Menu
              anchorEl={state}
              open={Boolean(state)}
              onClose={handleChange}
              anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
              transformOrigin={{ horizontal: 'left', vertical: 'top' }}
            >
              <MenuItem onClick={handleChange}>Item 1</MenuItem>
              <MenuItem onClick={handleChange}>Item 2</MenuItem>
              <MenuItem onClick={handleChange}>Item 3</MenuItem>
            </Menu>
          </div>

          <Box
            sx={{
              flex: '1 1 auto',
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            }}
          >
            <Typography> {item.text}</Typography>
          </div>

          <Box
            sx={{
              flex: '0 0 auto',
              marginLeft: 'auto',
              display: 'flex',
              alignItems: 'center',
            }}
          >
            <Switch />
          </div>
        </div>
      ))}
    </DraggableRows>
  );
};