Use mui's collapsible-table component in retool

App Building
1

Hello, I found a topic here successfully use nestlist of mui in retool.

But I want to use CollapsibleTable of mui in retool

Any help? thanks in advance.
@Kabirdas @anyone

2

Hey @AnsonHwang!

I've attached an example of an MUI Collapsible Table in a custom component. The code is primarily lifted directly from the docs you linked with a couple adjustments:

Instead of the various import statements used, the app imports the necessary components directly from an MUI variable as follows:

const { Box, Collapse, IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, Paper, Icon} = MaterialUI;

The MaterialUI variable itself is imported with the following script tag:

<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js"></script>

You might notice that none of the icons are imported that way, this is because it doesn't look like a UMD package for the icon library exists. Instead, the component uses these fonts along with the MUI Icon component. In the code that means writing

{ open ? <Icon>expand_less</Icon> : <Icon>expand_more</Icon> }

Instead of {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />} and then also included the following stylesheet:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Lastly, you'll want the boilerplate for Retool:

  // This is the entrypoint for the React component.
  const ConnectedComponent = Retool.connectReactComponent(CollapsibleTable)
  const container = document.getElementById('react')
  const root = ReactDOM.createRoot(container)
  root.render(<ConnectedComponent />)

This allows for the model property to be passed to CollapsibleTable meaning it's possible to pull the table data from Retool, with the following:

function CollapsibleTable({model}){
  const { rows } = model;
  /* ... */
}

In the example app the component model looks like this:

{
 rows: {{tableData.data}}
}

And the createData function along with the row data lives in a JavaScript query (tableData) but you should be able to replace that with your own data source, adjusting the table to display the data appropriately.

Hopefully, this helps!
mui_collapsible_table (2).json

3

It work, It so detail, thanks much.
With custom component, it seem I can do anything using Retool.

I think I should learn React and TypeScript Now :joy: