⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

Small modification, big benefits



Sorin Sfirlogea
  • profile picture
  • Member

Posted 18 January 2021 - 15:37 PM

I modified just a bit the code in the grocery-crud-2.8.7.xxxxxxxx.js file and I obtained a significant improvement in usability.

            columnsData.forEach(function (column) {

                columnData.push(_react2.default.createElement(
                    'td',
                    {
                        className: (0, _classnames2.default)({
                            'active': orderBy === column.name,
                            'table-active': orderBy === column.name
                        }, 'gc-data-container', column.name+'Field'), // added code: , column.name+'Field'
                        key: column.name
                    },
                    !column.value && _react2.default.createElement(
                        'span',
                        null,
                        '\xA0'
                    ),
                    column.value && !column.isHtml && _react2.default.createElement(
                        'div',
                        { className: 'gc-data-container-text' },
                        column.value
                    ),
                    column.value && column.isHtml && _react2.default.createElement('div', { className: 'gc-data-container-text', dangerouslySetInnerHTML: { __html: column.value } })
                ));
            });

It allows you to have additional styling on each column of the datagrid, as each td element will have a class named after its corresponding column (eg. amountField).

 

Maybe this is helpful for others too. 

Cheers.


cybersven
  • profile picture
  • Member

Posted 17 February 2021 - 16:24 PM

I was using callback to modify columns, but it can be very useful ! Many Thanks !!