In the app I am currently working on, there is a "Description" column which I would like to have rich text. This would be stored in my database in Markdown format. Is there anyway when using react-table to have cells contain content in another component, in this case so the content could be rendered by react-markdown?
Before implementing react-table I was able to parse the markdown in the description cells with <td><ReactMarkdown>{item.description}</ReactMarkdown></td>, but I'm not seeing a way to accomplish this with react-table.
This is the code in question: https://github.com/TechValleyCenterOfGravity/STUFF/blob/main/src/App.js
I missed a capital C - Cell: props => <ReactMarkdown>{ props.value }</ReactMarkdown> did the trick
Related
Hi Im getting text data from react markdown ,
const exampleMarkDown=
`<ol>
<li>example1</li>
<li>example2</li>
<li>example3</li>
</ol>`
and the output is
1.example1
2.example2
3.example2
and I would like to add material ui icon right next to
1. example <ICON HERE>
in react component.
so is there's any way I can do that??
You can use string literals and include the component next to the string.
const exampleMarkDown=
`<ol>
<li>example1 ${<Icon>}</li>
<li>example2 ${<Icon>}</li>
<li>example3 ${<Icon>}</li>
</ol>
`
EDIT: Ah, i just noticed you said you're using react markdown, sorry about that. I haven't used that library before, the only thing I can think of is adding the icon in the markdown before you receive it.
I'm using Material UI table together with Table Pagination, and I'm trying to display the current page together with the 3 leading pages and the 3 prior pages, instead of showing the count amount.
I added the following to TablePagination
<TablePagination labelRowsPerPage='' ...OtherSettings />
but I still get the same results. How can I change the text in the image above so that it shows the pages instead of the amount of rows?
As far as Material Design goes, it is designed to show rows (as mentioned in the Material Design Table Behaviour on the Pagination section).
But nevertheless, you can try using the labelDisplayedRows prop of the TablePagination component to modify the text shown for the rows by default and instead show the number of the pages depending on your row data. It would be something like this:
<TablePagination
...OtherSettings,
labelDisplayedRows={() => {
return `${page}-${Math.floor(rows.length / rowsPerPage)}`;
}}
/>
Additionally, a working sandbox demo and the relevant prop documentation for the TablePagination component: documentation.
I'm looking to conditionally add a button to my React Table, and for it to display to the right of the row size selector in the PaginationTop section.
The project is currently using react-table 6.9.2.
Currently the table simply uses showPaginationTop as an argument in the ReactTable component, resulting in this header after some custom css:
With a custom element displaying, I'm looking for it to appear as:
Does anyone know if this is possible without changing the react-table source for PaginationTop?
My bad, this can be done with component overriding as mentioned in the documentation here:
https://github.com/tannerlinsley/react-table/tree/v6#component-overrides
For my solution this involved making a new component and setting it as the default:
Object.assign(ReactTableDefaults, {
PaginationComponent: Pagination,
...
Im filtering using remote mode in the Material-Table component, but after each filtered, and Material-Table rendered, it delete the text or selection from the filter section.
So I would like to understand if there is a way in the table to keep this values, because it is necessary that the user have reference of what he is seeing in the table.
Im using the last version, 1.32
This is the component https://github.com/mbrn/material-table
Best Regards and thanks in advance for your time in my case
Move your columns object to a state.
Make a state var,
const [materialColumn] = useState([{title: "Name",field: "name"}]);
Then on your material table
<MaterialTable
columns={materialColumnObj}
/>
This will solve the problem. The filter text will stay. Cheers!
How to integrate mui-datatable with admin-on-rest?
Need the following options in the list view :
move around ordering of columns
show/hide columns
change the number of rows for display
print preview of table
Mui-datatable has these features. According to admin-on-rest documentation, we can use custom Datagrid. Can anyone explain how to do it?
Say you are making a custom-datagrid component 'MyIterator'. This component has to just make use two props that will 'auto-magically' be available to the child of 'List' component. One prop is ids and another is data.
The ids prop is an array of id of currently displayable data-items. And the data is an object containing the data for all the items displayable.
Something like this should do the part of making a custom-datagrid -
const MyIterator = ({ids, data}) => ids.map(id=><div key={id}><span>Label</span><span>{data[id].label}</span></div>)
Above example presumed the data-item object to have a property of 'label'.
And this is how a custom-datagrid can be made.