Simple Table component in UI Kit

Forge Forge UI Kit and Custom UI
1

Hi all,

I’m working on a Forge based macro addon using the latest UI Kit. I’m in need of a simple Table component to output some results. However, the only Table like component that I can find is DynamicTable . The original Table component seems to have been deprecated .

Am I missing something? What is the recommendation to format some simple output?

Thanks.
Michael

2

Hey @MichaelWan1,

That’s right, the original table component available in UI kit 1 has been retired and the Dynamic table has been provided in its place.

I think the recommendation for formatting simple output will depend on your specific needs. The Dynamic table is certainly available to you, or you could now use a combination of Box, Inline and Stack elements to create a simple table instead!

Here’s an example I put together to help:

import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Box, xcss, Inline, Stack, Code, Heading, Link, Strong, Text } from '@forge/react';
import { invoke, view } from '@forge/bridge';

const App = () => {
  
  const tableStyle = xcss({
    width: '50%',
  });

  const cellStyle = xcss({
    width: '50%',
  });

  function Head(data) {
    return (
      <>
        <Box xcss={cellStyle}>
            <Text><Strong>{data}</Strong></Text>
        </Box>
      </>
    )
  }
  function Cell(data) {
    return (
      <>
        <Box xcss={cellStyle}>
            <Text>{data}</Text>
        </Box>
      </>
    )
  }

  return (
    <>
      <Heading as="h3">Simple Table</Heading>
      <Box xcss={tableStyle}>
        <Inline alignBlock="start">
          {Head("Issue Key")}
          {Head("Staus")}
        </Inline>
        <Inline alignBlock="start">
          {Cell("XEN-1")}
          {Cell("In Progress")}
        </Inline>
        <Inline alignBlock="start">
        {Cell("XEN-2")}
        {Cell("To Do")}
        </Inline>
        <Inline alignBlock="start">
        {Cell("XEN-3")}
        {Cell("Done")}
        </Inline>
      </Box>
    </>
  );
};

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

Which will display

Screenshot 2024-11-13 at 5.35.44 PM
Screenshot 2024-11-13 at 5.35.44 PM1100×318 7.82 KB

From here, you can further customise the look of your table with XCSS as required, I’ve just done the basics.

If this solves your problem, please do click on the solution button and if you have further questions don’t hesitate to ask.

Hope this helps!

Cheers!
Mel

3

Thank you @mpaisley . This is very helpful for a simple table like output.

1 Like