Json To Table React

Posted on  by admin

A simple but flexible table react component to display JSON data. As simple as feeding it with an array of objects. No dependencies and in a UMD format. Customizable cell contents to show your data the way you need.

Callbacks for clicks on headers, rows or cells. Allows to add custom columns.

Enough className attributes to let you style it your own way. Pure rendering, no internal state, everything comes from the props.

Creating tables in react is a repetitive work:. Create the table wrapper. Create a wrapper also for every item.

For every row print all the cells. Add some classes to let styling. I also want to listen to clicks in the header of every column in order to sorting.

Hey, I forgot to add tags so it is not working! I don't want to do it ever again, JsonTable component will do that ugly stuff so on.

Using node package manager:. You can also use the built UMD files react-json-table.js(6KB) and react-json-table.min.js(3KB) if you want JsonTable globally or as an AMD package.

Half of the built version size is the code to create the UMD module. NPM version is really lightweight.

You can see the simplest example of use at the top of this page, but probably you would like to customize a bit the behaviour of the table to adapt it to your needs.

Have a look at the accepted component props. Using column definitions you can change the behaviour of the column easily. To do so you need to pass an array of the column definitions as the columns prop to the JsonTable:.

As you can see in the example, a column definition can be just a string with the name of the field to display or an object. But if an object is passed the customization can be much more.

A column definition can be an object with the following properties:. key: It is the internal name use for the column by JsonTable. It is added to the className of the cells and headers to apply styles to the column.

It is also passed as an argument for the click callbacks. If the column definition has no cell property, it also represent the property of the current row to be shown as cell content.

label: It is the content of the column header. You can use a string or a ReactComponent to show inside the header cell. cell: What is going to be displayed inside the column cells.

It can be a string or ReactComponent to show static contents, but tipically it is a function( rowData, columnKey ) that return the contents for the cell.

This way different contents are shown in the column for different rows. Using the prop settings we can customize some details that are not related to columns. It is an object with the following properties:. You can play with the table settings here.

It is always useful binding some callbacks when the user clicks on the table.Click callbacks can be added using the props onClickCell, onClickHeader and onClickRow.

In the next example we create a component using JsonTable where rows and cells are selected on click, and columns are sorted when the column header is clicked:.

Tests, tests, tests.. I need to add tests for the different settings in order to continue the developing of new features. Of course, issues reports, feature and pull requests are welcome.

If JsonTable can make you not to code a react table again I will be happy to help.

Modified4 years, 5 months ago.

I'm going to build a web with react js.