将样式应用到 antd 表列

Question

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.

Answer 1

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
  }
}]