React-bootstrap-table2: Custom content in cells

[saifulss]

How do we add custom content to cells, like newlines (to have contents of same cell break into 2 lines) or to have buttons (or any other React component) in cells?

[philohelp]

There's a formatter prop, maybe that's what you're looking for (example below is for a column which contains a "remove" button :

const deleteFormatter = (cell, row, rowIndex, formatExtraData) => { const { deleteMe } = props; const rowId = row.id; return ( <Button icon labelPosition='left' onClick={() => deleteMe(rowIndex, rowId)}> <Icon name='remove' /> Remove </Button> ); }

const enhancedColumns = [...columns, { dataField: 'edit', text: '', editable: false, align: "center", headerStyle: { width: 120 }, formatter: deleteFormatter }

[saifulss]

Thanks, @philohelp! I solved it via the same way as you suggested. Made a function that returns a component I made just for that column's cells. Cheers.

[AllenFang]

@philohelp thanks!!

[SureshBanala]

There's a formatter prop, maybe that's what you're looking for (example below is for a column which contains a "remove" button :

const deleteFormatter = (cell, row, rowIndex, formatExtraData) => { const { deleteMe } = props; const rowId = row.id; return ( <Button icon labelPosition='left' onClick={() => deleteMe(rowIndex, rowId)}> <Icon name='remove' /> Remove </Button> ); }

const enhancedColumns = [...columns, { dataField: 'edit', text: '', editable: false, align: "center", headerStyle: { width: 120 }, formatter: deleteFormatter }