I have below table column configuration where i am rendering notes with custom function
fieldDefs: (results, isJsonData) => [
{
title: 'Notes',
name: 'notesHTML',
table: {
render: SectionNotes,
searchable: true,
width: 200,
style: { maxHeight: 300, overflowY: 'auto'} // tried with this but not working this way
}
}]
And the below is 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 */
};
here what i am doing is i will be looping through the notes and applying styles style={{ maxHeight: 300, overflowY: 'auto'}}
to each note if it has minimum width then scrollbar applies.
and it is appearing like as in below image
But i would like to apply same styles for entire cell data and not on each note inside cell.
Could any one please let me know how can i achieve this? applying styles for entire cell or entire column as well.
I am using Ant Design
table to render the data.
I have fixed with the below code
export const SectionNotes = notes => {
if (!notes) return '';
/* eslint-disable react/no-danger */
return notes.map((note, index) => (
<div key={note}>
<span style={{ fontWeight: 'bold' }}>
{index + 1}.{' '}
</span>
<span dangerouslySetInnerHTML={{ __html: sanitizer(note) }} />
</div>
));
/* eslint-enable react/no-danger */
};
export const renderSectionNotes = text => {
return <div style={{ maxHeight: 250, overflowY: 'auto' }}>{SectionNotes(text)}</div>;
};
and then I am using like this as below
fieldDefs: (results, isJsonData) => [
{
title: 'Notes',
name: 'notesHTML',
table: {
render: renderSectionNotes,
searchable: true,
width: 200
}
}]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.