I want to add a Toggle to each row of the DynamicTable

I am using the latest version of the UI Kit. I understand that I can’t use the previous table in the latest UI Kit, and I have to use the DynamicTable. https://developer.atlassian.com/platform/forge/ui-kit/upgrade-to-ui-kit-latest/

How should I add a Toggle to each row of the DynamicTable?

Here is the sample code before adding the Toggle.

“C:\Forge\TestForm\src\resolvers\index.js”

import Resolver from '@forge/resolver';
import { Toggle } from '@forge/react';

const resolver = new Resolver();

resolver.define('getText', (req) => {
  console.log(req);
  return 'Please check';
});

export const handler = resolver.getDefinitions();

const createKey = (input) => {
  return input ? input.replace(/^(the|a|an)/, "").replace(/\s/g, "") : input;
}

export const presidents = [
  {
    id: 1,
    name: "name1",
    party: "party1",
    term: "2000-2010",
  },
  {
    id: 2,
    name: "name2",
    party: "party2",
    term: "2000-2010",
  },
  {
    id: 3,
    name: "name3",
    party: "party3",
    term: "2000-2010",
  },
  {
    id: 4,
    name: "name4",
    party: "party4",
    term: "2000-2010",
  },
  {
    id: 5,
    name: "name5",
    party: "party5",
    term: "2000-2010",
  },
  {
    id: 6,
    name: "name6",
    party: "party6",
    term: "2000-2010",
  },
  {
    id: 7,
    name: "name7",
    party: "party7",
    term: "2000-2010",
  },
  {
    id: 8,
    name: "name8",
    party: "party8",
    term: "2000-2010",
  },
  {
    id: 9,
    name: "name9",
    party: "party9",
    term: "2000-2010",  },
  {
    id: 10,
    name: "name10",
    party: "party10",
    term: "2000-2010",
  }
];

export const rows = presidents.map((president, index) => ({
  key: `row-${index}-${president.name}`,
  cells: [
    {
      key: createKey(president.name),
      content: president.name,
    },
    {
      key: createKey(president.party),
      content: president.party,
    },
    {
      key: president.id,
      content: president.term,
    }
  ],
}));

export const head = {
  cells: [
    {
      key: "name",
      content: "name",
      isSortable: true,
    },
    {
      key: "party",
      content: "party",
      shouldTruncate: true,
      isSortable: true,
    },
    {
      key: "term",
      content: "term",
      shouldTruncate: true,
      isSortable: true,
    },
  ],
};

resolver.define('getHead', (req) => {
  console.log(req);
  return head;
});

resolver.define('getRows', (req) => {
  console.log(req);
  return rows;
});

“C:\Forge\TestForm\src\frontend\index.jsx”

import React, { useEffect, useState } from 'react';
import ForgeReconciler, {Text, DynamicTable, Toggle , Stack ,Button, ButtonGroup} from '@forge/react';
import { invoke } from '@forge/bridge';

const App = () => {
  const [data, setData] = useState(null);
  const [gethead, setHead] = useState(null);
  const [getrows, setRows] = useState(null);
  useEffect(() => {
    invoke('getText', { example: 'my-invoke-variable' }).then(setData);
    invoke('getHead', { example: 'my-invoke-variable' }).then(setHead);
    invoke('getRows', { example: 'my-invoke-variable' }).then(setRows);

  }, []);
  
  return (
    <>
      <Text>{data ? data : 'Loading...'}</Text>
      <DynamicTable
      caption="Checklist"
      head={gethead}
      rows={getrows}
      rowsPerPage={5}
      highlightedRowIndex={[0,2,4]}
      />
      <Toggle id="toggle-default" />
      <Stack space="space.050" alignInline="end">
        <ButtonGroup label="Default button group">
          <Button>Cancel</Button>
          <Button appearance="primary">Submit</Button>
        </ButtonGroup>
      </Stack>
    </>
  );
  
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

1 Like