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.
