Limiting fields shown in the array table layout

General
1

When I have an array of objects, such as a customer has an array of addresses, is it possible while using the array table layout to omit, or select, which fields are included in that table view? For example if an address object has a field customer_id and address_id, how could those fields be suppressed?

I tried to use options.detail.elements and it would only revert the table view to a non-table grouping. Are there any options available to the table view?
Thanks!

2

Hi @rbluer,

Our table renderer is very primitive and therefore does not support filtering or ordering of columns. Of course you can always use a custom table renderer and implement it yourself.

3

OK, thanks for that information.

I have not tried to extend the capability of your components before, so which two components are used for the table renderer? Is it the src/complex/TableToolbar.tsx for the grid, and src/layouts/MaterialLayoutRenderer.tsx for the non-matrix version of array object handling? I’m just looking at these for the first time right now, so it’s all kind of new to me. lol

Also, is there any existing docs available that covers pointers, tips, etc on how to work with these renderers when extending them, or designing new ones?

Thanks for your help!

4

The easiest way to go would be to just copy the existing renderer (and all used components), modify it to your needs and register it with a higher priority than the existing one.

The entry point for the table-like array renderer is the MaterialArrayControlRenderer. The entry point for the non-table array renderer is the MaterialArrayLayoutRenderer.

5

Thanks, that will help a great deal knowing where to start. :slight_smile:

6

Hello.
I’ve been using jsonforms for a while now. I was wondering if you could elaborate further on this.
I copied the code from the MaterialArrayControlRenderer but when the render is being rendered i’m missing a few props.

This is the error im getting

Uncaught TypeError: props.translations is undefined

export const TableRender = (props: ArrayLayoutProps ) => {
  const [open, setOpen] = useState(false);
  const [path, setPath] = useState(undefined);
  const [rowData, setRowData] = useState(undefined);
  const { removeItems, visible } = props;

  const openDeleteDialog = useCallback(
    (p: string, rowIndex: number) => {
      setOpen(true);
      setPath(p);
      setRowData(rowIndex);
    },
    [setOpen, setPath, setRowData]
  );
  const deleteCancel = useCallback(() => setOpen(false), [setOpen]);
  const deleteConfirm = useCallback(() => {
    const p = path.substring(0, path.lastIndexOf('.'));
    removeItems(p, [rowData])();
    setOpen(false);
  }, [setOpen, path, rowData]);
  const deleteClose = useCallback(() => setOpen(false), [setOpen]);

  return (
    <Hidden xsUp={!visible}>
      <MaterialTableControl {...props} openDeleteDialog={openDeleteDialog} />
      <DeleteDialog
        open={open}
        onCancel={deleteCancel}
        onConfirm={deleteConfirm}
        onClose={deleteClose}
        acceptText={props.translations.deleteDialogAccept}
        declineText={props.translations.deleteDialogDecline}
        title={props.translations.deleteDialogTitle}
        message={props.translations.deleteDialogMessage}
      />
    </Hidden>
  );
};

export const TableControlTester: RankedTester = rankWith(
  5,
  or(isObjectArrayControl, isPrimitiveArrayControl)
);

export default withJsonFormsArrayLayoutProps(TableRender);

Any help would be appreciated

7

Hi @edlacer,

Are all of your JSON Forms dependencies on the same version? The versions need to match exactly, otherwise there might be problems with expectations between them.

8

Hello @sdirix, thanks for the reply.

I believe so.

"dependencies": {
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@jsonforms/core": "^3.2.1",
    "@jsonforms/material-renderers": "^3.2.1",
    "@jsonforms/react": "^3.2.1",

Alternatively i would like to know if i can send the row data to a custom cell in some way.
To add some context i’ve made a custom cell to render text as SVG

imagen
imagen1311×267 6.18 KB

And im looking for a way to send to the output cell data from the condition cell for example