# Limiting fields shown in the array table layout

**URL:** <https://jsonforms.discourse.group/t/limiting-fields-shown-in-the-array-table-layout/782>\
**Category:** General\
**Created:** [May 24, 2022, 4:14am UTC](https://jsonforms.discourse.group/t/limiting-fields-shown-in-the-array-table-layout/782 "2022-05-24T04:14:05Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![rbluer](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/rbluer/32/285_2.png) [@rbluer](https://jsonforms.discourse.group/u/rbluer)\
**Post date:** [May 24, 2022, 4:14am UTC](https://jsonforms.discourse.group/t/limiting-fields-shown-in-the-array-table-layout/782/1 "2022-05-24T04:14:05Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [May 24, 2022, 7:17am UTC](https://jsonforms.discourse.group/t/limiting-fields-shown-in-the-array-table-layout/782/2 "2022-05-24T07:17:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rbluer](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/rbluer/32/285_2.png) [@rbluer](https://jsonforms.discourse.group/u/rbluer)\
**Post date:** [May 24, 2022, 3:18pm UTC](https://jsonforms.discourse.group/t/limiting-fields-shown-in-the-array-table-layout/782/3 "2022-05-24T15:18:48Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [May 25, 2022, 9:41am UTC](https://jsonforms.discourse.group/t/limiting-fields-shown-in-the-array-table-layout/782/4 "2022-05-25T09:41:36Z")

</div>

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`](https://github.com/eclipsesource/jsonforms/blob/44070b325121ad7173082fdf33be079f42ef96c4/packages/material/src/complex/MaterialArrayControlRenderer.tsx). The entry point for the non-table array renderer is the [`MaterialArrayLayoutRenderer`](https://github.com/eclipsesource/jsonforms/blob/44070b325121ad7173082fdf33be079f42ef96c4/packages/material/src/layouts/MaterialArrayLayoutRenderer.tsx).

---

<div class="post-metadata">

**Author:** ![rbluer](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/rbluer/32/285_2.png) [@rbluer](https://jsonforms.discourse.group/u/rbluer)\
**Post date:** [May 25, 2022, 2:21pm UTC](https://jsonforms.discourse.group/t/limiting-fields-shown-in-the-array-table-layout/782/5 "2022-05-25T14:21:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![edlacer](https://avatars.discourse-cdn.com/v4/letter/e/71e660/32.png) [@edlacer](https://jsonforms.discourse.group/u/edlacer)\
**Post date:** [April 11, 2024, 5:15pm UTC](https://jsonforms.discourse.group/t/limiting-fields-shown-in-the-array-table-layout/782/6 "2024-04-11T17:15:54Z")

</div>

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](https://github.com/eclipsesource/jsonforms/blob/44070b325121ad7173082fdf33be079f42ef96c4/packages/material/src/complex/MaterialArrayControlRenderer.tsx) 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

```auto
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

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [April 12, 2024, 12:57pm UTC](https://jsonforms.discourse.group/t/limiting-fields-shown-in-the-array-table-layout/782/7 "2024-04-12T12:57:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![edlacer](https://avatars.discourse-cdn.com/v4/letter/e/71e660/32.png) [@edlacer](https://jsonforms.discourse.group/u/edlacer)\
**Post date:** [April 12, 2024, 1:09pm UTC](https://jsonforms.discourse.group/t/limiting-fields-shown-in-the-array-table-layout/782/8 "2024-04-12T13:09:23Z")

</div>

Hello @sdirix, thanks for the reply.

I believe so.

```auto
"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](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/2X/2/2b7f0e29a1395a4e4bbc914db23b6b543eafd60d.png)

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