In pxp-ui, in a table how can I show the description field instead of the Id

user_1404522 0
Viewed 28

I have a table in pxp-ui and have this column:

subsystemId: {
                    type: 'AutoComplete',
                    isSearchable: true,
                    label: 'Subsystem Id',
                    variant: 'outlined',
                    grid: true,
                    form: true,
                    store: {
                        dataReader,
                        method: 'GET',
                        url: `pxp/Subsystem/list`,
                        idDD: 'subsystemId',
                        descDD: 'name',
                        parFilters: 'name',
                        params: {
                            sort: 'name',
                            start: '0',
                            limit: '50',
                            dir: 'DESC',
                            sort: 'subsystemId',
                          },
                        renderOption: (option) => (<span>
                            <b>{option.name}</b> <br />
                        </span>)                        
                    }
                    validate: {
                    shape: Yup.string().required(' es requerido'),
                    },

At this moment it is only showing the id and not the name of the subsystem

enter image description here

How can I do to show the name instead of the id?

reactjs javascript
1 Answers

you need to use renderColumn for render the data that you want to render

renderColumn: (row) => {
          return (
            <div>
              <Typography variant="body2" color="inherit">
                <b>data1:</b>
                {row.someDataInRow1}
              </Typography>
              <Label color="success">
                <b>data2:</b>
                {row.someDataInRow2}
              </Label>
            </div>
          );
        },

with your example will be this

subsystemId: {
        type: 'AutoComplete',
        isSearchable: true,
        label: 'Subsystem Id',
        variant: 'outlined',
        grid: true,
        form: true,
        store: {
          dataReader,
          method: 'GET',
          url: `pxp/Subsystem/list`,
          idDD: 'subsystemId',
          descDD: 'name',
          parFilters: 'name',
          params: {
            start: '0',
            limit: '50',
            dir: 'DESC',
            sort: 'subsystemId', // only you need 1 sort,
          },
          renderOption: (option) => (
            <span>
              <b>{option.name}</b> <br />
            </span>
          ),
        },
        validate: {
          shape: Yup.string().required(' es requerido'),
        },
        renderColumn: (row) => {
          return (
            <div>
              <Typography variant="body2" color="inherit">
                <b>data1:</b>
                {row.someDataInRow1}
              </Typography>
              <Label color="success">
                <b>data2:</b>
                {row.someDataInRow2}
              </Label>
            </div>
          );
        },
      },
user_50164360
Related