Config Menu

// prepare options
const options = React.useMemo(
  () => [
    { label: 'Employee', value: 'employee', disabled: true },
    { label: 'Email address', value: 'email-address' },
    { label: 'Phone number', value: 'phone-number' },
    { label: 'Address', value: 'address' },
  ],
  []
);
// initialise toggle state
const [value, setValue] = useState(() =>
  options.slice(0, 2).map((opt) => opt.value)
);
return (
  <ConfigMenu
    trigger="Columns"
    hasValue={value.length > 0}
    selectionCount={value.length}
  >
    <ConfigMenuGroup
      title="Manage table properties"
      onChange={setValue}
      options={options}
      value={value}
    />
  </ConfigMenu>
);

// initialise option state (for ordering)
const [options, setOptions] = useState(() => [
  { label: 'Employee', value: 'employee', disabled: true },
  { label: 'Email address', value: 'email-address' },
  { label: 'Phone number', value: 'phone-number' },
  { label: 'Address', value: 'address' },
]);
// initialise toggle state
const [value, setValue] = useState(() =>
  options.slice(0, 2).map((opt) => opt.value)
);
return (
  <ConfigMenu
    trigger="Columns"
    hasValue={value.length > 0}
    selectionCount={value.length}
  >
    <ConfigMenuGroup
      title="Manage table properties"
      onChange={setValue}
      onReorder={setOptions}
      options={options}
      value={value}
    />
  </ConfigMenu>
);

// prepare options
const columnOptions = React.useMemo(
  () => [
    { label: 'Employee', value: 'employee', disabled: true },
    { label: 'Email address', value: 'email-address' },
    { label: 'Phone number', value: 'phone-number' },
    { label: 'Address', value: 'address' },
  ],
  []
);
const configOptions = React.useMemo(
  () => [{ label: 'Wrap text in table cells', value: 'wrap-text' }],
  []
);
// initialise toggle state
const [columnValue, setColumnValue] = useState(() =>
  columnOptions.slice(0, 2).map((opt) => opt.value)
);
const [configValue, setConfigValue] = useState([]);
return (
  <ConfigMenu
    trigger="Table configuration"
    hasValue={columnValue.length > 0}
    selectionCount={columnValue.length}
  >
    <ConfigMenuGroup
      title="Show or hide columns"
      onChange={setColumnValue}
      options={columnOptions}
      value={columnValue}
    />
    <ConfigMenuGroup
      title="Other options"
      onChange={setConfigValue}
      options={configOptions}
      value={configValue}
    />
  </ConfigMenu>
);

const data = [
  {
    name: 'Lando Norris',
    email: 'lando@reckon.com',
    phone: '0400123456',
  },
  {
    name: 'Daniel Ricciardo',
    email: 'dan@reckon.com',
    phone: '0401234567',
  },
  {
    name: 'Don Matingly',
    email: 'don@reckon.com',
    phone: '0401234567',
  },
  {
    name: 'Some Body',
    email: 'some@reckon.com',
    phone: '0401234567',
  },
];
const config = {
  name: {
    label: 'Employee',
    render: (index) => (
      <Inline alignItems="center" gap="small">
        <UserAvatar name={data[index].name} size="xsmall" />
        <Text size="xsmall" marginLeft="small">
          {data[index].name}
        </Text>
      </Inline>
    ),
  },
  email: {
    label: 'Email address',
    render: (index) => <Text size="xsmall">{data[index].email}</Text>,
  },
  phone: {
    label: 'Phone number',
    render: (index) => <Text size="xsmall">{data[index].phone}</Text>,
  },
};
const [options, setOptions] = useState(() =>
  Object.entries(config).map(([value, { label }]) => ({
    label,
    value,
  }))
);
const [value, setValue] = useState(Object.keys(config));
const columns = options.reduce((obj, opt) => {
  if (value.includes(opt.value)) {
    obj[opt.value] = {
      label: opt.label,
      render: config[opt.value].render,
    };
  }
  return obj;
}, {});
return (
  <div>
    <ConfigMenu
      trigger="Columns"
      hasValue={value.length > 0}
      selectionCount={value.length}
    >
      <ConfigMenuGroup
        title="Manage table properties"
        onChange={setValue}
        onReorder={setOptions}
        options={options}
        value={value}
      />
    </ConfigMenu>
    <DataTable rowCount={data.length} columns={columns} />
  </div>
);