Dynamic table and horizontal scroll

Forge Forge UI Kit and Custom UI
1

My table is a bit wider than the screen, and the left part is not showing.

Is there a way to add horizontal scrolling to a dynamic table? E.g., with CSS?

2

Hi @kim ,

I’ve created a test case to reproduce this and have confirmed the DynamicTable component does not scroll the table content horizontally. I’ll check with the team about whether we want to change this behaviour. In parallel though, would it be possible for you to investigate the redesign the UI of your app such that it doesn’t rely on a large amount of horizontal content in the table because I personally believe this may lead to a better user experience.

Dugald

3

Hi Dugald,

Thank you for taking the time to look into this.

I completely agree with you, but I also think that users should be able to use a very narrow browser every now and then.

In the Design System, you can do magic with CSS. See this example from Atlassian Design. I’ve tried that but can’t get it to work.

Looking forward to hearing what you find out.

Best regards,

4

Hi @dmorrow

Any news about this?

Regards,

5

Hi @dmorrow! Can you provide any updates?

6

While this is an old post, I stumbled across it while searching for a solution for this and wanted to give a workaround for how I was able to do this using UI Kit in case it helps anyone else.

In my use case my Dynamic Table was placed inside the modal provided when using the Jira Service Management portal user menu action module, but should still work in other modules.

Basically, you just put the Dynamic Table component inside a Box component and add width and overflow xcss to it.

Don’t forget to add Box and xcss to your forge/react import

Component would look like this:

const ScrollableTable = ({ head, rows }) => {
  return (
    <Box xcss={xcss({ width: "100%", overflowX: "auto" })}>
      <DynamicTable
        head={head}
        rows={rows}
        rowsPerPage={20}
        emptyView={"Nothing to see here!"}
        sortOrder="ASC"
      />
    </Box>
  );
};
7

Thank you @pseudonym!

Regarding your comment:

It does indeed. I just tried it on a jira:adminPage.

Caterina