A simple and reusable table for React (Demo)
Server side table for React (Demo)
The package can be installed via NPM:
npm i micheg/reactjs-simple-table
Fork of SinaMAlizadeh/reactjs-simple-table but with but with the possibility of having a customized rendering element. useful for links, strong, etc. ex:
function App() {
const [list, setList] = useState([]);
useEffect(() => {
fetch(`https://jsonplaceholder.typicode.com/users`)
.then((response) => response.json())
.then((json) => setList(json));
}, []);
const myRender = (item, col) =>
{
if(col.field === 'email') return (
<a href={`mailto:${item[col.field]}`}>{item[col.field]}</a>
); else if(col.field === 'name') return (
<strong>{item[col.field]}</strong>
); else return (
<span>{item[col.field]}</span>
);
};
return (
<div className="App">
<SimpleTableComponent columns={columns} list={list} cellComponent={myRender}/>
</div>
);
}
export default App;Import SimpleTableComponent for usage :
import SimpleTableComponent from "reactjs-simple-table";Define your column with filed variable and header name :
const columns = [
{
field: "title",
headerName: "Title",
},
{
field: "number",
headerName: "Amount",
},
];Get your list from Api or define your list :
const list = [
{ title: "Michael", number: 1 },
{ title: "Lindsay", number: 10 },
{ title: "Tobias", number: 6 },
{ title: "Byron", number: 3 },
{ title: "George", number: 1 },
{ title: "Rachel", number: 10 },
{ title: "Lawson", number: 6 },
{ title: "Ferguson", number: 3 },
{ title: "Funke", number: 1 },
];The most basic use of the simple table can be described with:
<SimpleTableComponent columns={columns} list={list} />import SimpleTableComponent from "reactjs-simple-table";
const columns = [
{
field: "title",
headerName: "Title",
},
{
field: "number",
headerName: "Amount",
},
];
function App() {
const list = [
{ title: "Michael", number: 1 },
{ title: "Lindsay", number: 10 },
{ title: "Tobias", number: 6 },
{ title: "Byron", number: 3 },
{ title: "George", number: 1 },
{ title: "Rachel", number: 10 },
{ title: "Lawson", number: 6 },
{ title: "Ferguson", number: 3 },
{ title: "Funke", number: 1 },
];
return (
<div className="App">
<SimpleTableComponent columns={columns} list={list} />
</div>
);
}
export default App;Import SimpleTableComponent for usage :
import { ServerSimpleTableComponent } from "reactjs-simple-table";For server side , define function for get table pagation , sorting and number of items in per page parameters then update table by new data. each time you change any table feature like pagation,... onGetData will call and you can use table parameters :
import React, { useState } from "react";
import "./styles.css";
import { ServerSimpleTableComponent } from "reactjs-simple-table";
const columns = [
{
field: "id",
headerName: "id",
},
{
field: "name",
headerName: "name",
},
{
field: "username",
headerName: "username",
},
{
field: "email",
headerName: "email",
},
];
export default function App() {
const [list, setList] = useState([]);
//function fo get table parameters
const tableData = (item) => {
//fetch data by filter parameters from table
//item :
// {
// page : 1 ,
// numberPerPage : 10 ,
// order : "ascending" or "descending",
//orderby : "title" *name of the field ,
//}
fetch(
`https://yourServerUrl/users?page=${item.page}&pageSize=${item.numberPerPage}`
).then((response) => setList(json));
};
return (
<div className="App">
<ServerSimpleTableComponent
columns={columns}
list={list}
onGetData={tableData}
total={10}
serverSideFiltering={false}
/>
</div>
);
}| Prop name | Description | Default value | Example values |
|---|---|---|---|
| total | Total of list , for using sever side table is required | list.length() | 100 |
| numberPerPage | number of row in each page | 10 | 5 , 10 , 20 , 50 , 100 |
| isRtl | for support rtl language | false | true or false |
| numberPageOfText | for change 'of' text in pagation | 'of' | 'from' or 'از' |
| tableClassName | you can use your own class for table style , in this case you can add boostrap or other css file in your app and use table class name and change table style | 'myTable' | 'table table-bordered' |
| serverSideFiltering | you can handle server side sorting by receive 'order' and 'orderby' parameters from changes of table features , if you want sorting one page data you can set serverSideFiltering to 'true' and sorting data without server call | false | true or false |
For using boostrap table class you can add boostrap css to Index.js or App.js , then add tableClassName property in SimpleTableComponent and use your table class :
npm i bootstrap
import SimpleTableComponent from "reactjs-simple-table";
import "bootstrap/dist/css/bootstrap.min.css";
const columns = [
{
field: "title",
headerName: "Title",
},
{
field: "number",
headerName: "Amount",
},
];
function App() {
const list = [
{ title: "Michael", number: 1 },
{ title: "Lindsay", number: 10 },
{ title: "Tobias", number: 6 },
{ title: "Byron", number: 3 },
{ title: "George", number: 1 },
{ title: "Rachel", number: 10 },
{ title: "Lawson", number: 6 },
{ title: "Ferguson", number: 3 },
{ title: "Funke", number: 1 },
];
return (
<div className="App">
<SimpleTableComponent
columns={columns}
list={list}
tableClassName={"table table-bordered"}
/>
</div>
);
}
export default App;You can use table-responsive :
<div class="table-responsive">
<SimpleTableComponent
columns={columns}
list={list}
tableClassName={"table table-bordered"}
>
...
</SimpleTableComponent>
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent