Below is the table column configuration I am working with, where notes are rendered using a custom function:
fieldDefs: (results, isJsonData) => [
{
title: 'Notes',
name: 'notesHTML',
table: {
render: SectionNotes,
searchable: true,
width: 200,
style: { maxHeight: 300, overflowY: 'auto'} // attempted this but didn't work as expected
}
}]
Here's the SectionNotes method:
const SectionNotes = notes => {
if (!notes) return '';
/* eslint-disable react/no-danger */
return notes.map((note, index) => (
<div key={note} style={{ maxHeight: 300, overflowY: 'auto'}}>
<span style={{ fontWeight: 'bold' }}>
{index + 1}.{' '}
</span>
<span dangerouslySetInnerHTML={{ __html: sanitizer(note) }} />
</div>
));
/* eslint-enable react/no-danger */
};
In this implementation, each note within the cell is styled with
style={{ maxHeight: 300, overflowY: 'auto'}}The desired outcome is to apply the same styles to the entire cell data, rather than each individual note. This can be seen in the example image below: https://i.sstatic.net/9Fxfg.png
If anyone knows how to achieve this by applying styles for the entire cell or even the entire column, please help me out. I am utilizing the Ant Design table for rendering purposes.