A library to render HTML tables in React from a array of objects, simply and quickly.
- With NPM
npm install --save react-tablefy- With Yarn
yarn add react-tablefyLet's say you have an array of objects and you want to display this into a table
- data.json
[
{
"displayImage": "https://vignette.wikia.nocookie.net/gameofthrones/images/1/1f/Night_King_BTW.jpg/revision/latest?cb=20171013162809",
"name": "Night King",
"age": 10000,
"location": "Beyond the wall"
},
{
"displayImage": "https://vignette.wikia.nocookie.net/gameofthrones/images/4/4c/JonSnowTheBells.PNG/revision/latest/scale-to-width-down/329?cb=20190513080305",
"name": "Jon Snow",
"age": 23,
"location": "The Wall"
}
]import React, { Component } from "react";
import Table from "react-tablefy";
import data from "./data.json";
class SimpleTableExample extends Component {
render() {
return <Table data={data} />;
}
}This will output:
But... The field displayName is an image, and it's rendering as an String, let's say you want to display an image component to this field.
-
1: Create a config object.
-
1.1: Create a components object inside config.
-
1.2: Inside components object set the key you want to display a custom Component (in our example, displayImage).
-
1.3: We want to show the value of key (displayImage) for each table row inside the Image Component src prop. We need to say that prop src gets a value of displayImage using tablefy variables (tablefy understands that the variables are within parentheses. You can access the value of any key in a table row, using paranteses).
-
1.3.1: variable (self) DEFAULT returns the current value for the key you are customizing. In this example, it takes the value of displayImage key for that table row and places it inside src prop.
-
1.3.2: variable (name) will get the value of name key for this table row and place inside alt prop.
-
2: Set this object to config prop.
import React, { Component } from "react";
import data from "./data.json";
import Table from "react-tablefy";
import Image from "./any-image-component";
class TableWithCustomComponents extends Component {
render() {
// Step 1
const tableConfig = {
// Step 1.1
components: {
// Steps 1.2, 1.3, 1.3.1 & 1.3.2
displayImage: <Image src="(self)" alt="(name)" />
}
};
// Step 2
return <Table data={data} config={tableConfig} />;
}
}This will output:
You can pass functions to custom Components, argument names has to be the same as the keys you want to get the value.
1 - Create a function with argument names same as the key values you want to get.
1.1 - In this example, we will print the name of the character present in the table row on the console.
1.2 - Tablefy will search for the key name in the row and pass it to your function.
import React, { Component } from "react";
import data from "./data.json";
import Table from "react-tablefy";
import Image from "./any-image-component";
class TableWithActions extends Component {
handleClickTableImage(name) {
console.log(name);
}
render() {
const tableConfig = {
components: {
displayImage: (
<Image onClick={handleClickTableImage} src="(self)" alt="(name)" />
)
}
};
return <Table data={data} config={tableConfig} />;
}
}Let's say you want to perform an action by clicking on a row in the table.
1 - add a key called onClickRow to your configuration object assigning to it the function you want to call, using the same parameter principles described in the above example.
1.1 - The function will search for a key call name present on the table row and set this value as parameter on your function.
import React, { Component } from "react";
import data from "./data.json";
import Table from "react-tablefy";
import Image from "./any-image-component";
class TableWithRowAction extends Component {
handleClickOnTableRow(name) {
console.log(name);
}
render() {
const tableConfig = {
components: {
displayImage: <Image src="(self)" alt="(name)" />
},
// Step 1
onClickRow: handleClickOnTableRow
};
return <Table data={data} config={tableConfig} />;
}
}const tableConfig = {
components: {
// Custom components for a given key
displayImage: <Image src="(self)" />
},
// Custom names to table head keys
labels: {
displayImage: "Image"
},
// If you don't want to show all data set object keys
// you can choose which fields you want to show
// just add their names on the keys array
keys: ["displayName", "age"]
// This will show only displayName and age on table
};import styled from "styled-components";
import Table from "react-tablefy";
const StyledTable = styled(Table)`
// Your custom styles
tr {
background: red;
}
`;
class WithStyledComponent extends Component {
render() {
return <StyledTable data={data} />;
}
}import React, { Component } from "react";
import Table from "react-tablefy";
class WithInlineCSS extends Component {
render() {
// Step 1
const tableConfig = {
styles: {
// Available styles
root: {},
head: {},
headRow: {},
headRowCell: {},
body: {},
bodyRow: {},
bodyRowCell: {}
}
};
// Step 2
return <Table data={data} config={tableConfig} />;
}
}import React, { Component } from "react";
import Table from "react-tablefy";
import styles from './styles.css'
class WithInlineCSS extends Component {
render() {
return <Table
className={styles.customClass}
data={data}
/>;
};
}
}- Improve writing of this documentation (my english sucks haha)
- Tests
MIT © paesvitor