Saya punya meja di PXP-UI dan memiliki kolom ini:

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'),
                    },

Pada saat ini hanya menunjukkan ID dan bukan nama subsistem

enter image description here

Bagaimana saya bisa menunjukkan nama bukan ID?

2
Jaime Rivera 29 Mei 2021, 00:30

1 menjawab

Jawaban Terbaik

Anda perlu menggunakan rendercolumn untuk membuat data yang ingin Anda 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>
          );
        },

Dengan contoh Anda akan menjadi ini

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>
          );
        },
      },
2
finguerr 28 Mei 2021, 21:40