About: Passionate about technology and motivated to solve problems and optimize processes, always seeking to learn and improve
Hi everyone, this time I want to show you a simple component that I made in React JS to visualize and manage your data in a table.
It's inspired in the popular JQuery library DataTables
The next are the features that I added so far.
Now I have a developer blog, continue reading this post here: https://hhsm95.dev/blog/simple-react-datatable/
Thank you!
Yeah, I updated the component to support a function in the columns to customize the field. Example to insert an image and delete button:
const columns = [
{ title: 'Picture', format: (row) => (<img src={row.image} alt={row.title} />) },
{ title: 'Delete', format: (row) => (<button type="button" onClick={() => deleteImage(row.id)}>Delete</button>) },
];
const deleteImage = (id) => {
console.log(id);
}
I want to add 2 buttons in 1 column in data table. Please i need your help. I also wanted to comment, I have a problem when I try to add styles to a column, the filter stops working.
When after an update the number of records in data changes, the pagination element becomes an invalid range (end number of items might be negative for example). I worked around this by always removing the table before an update and after a timeout of 0.5 seconds showing the table again.
I want to add image in data table and add buttons
Pls help me