https://github.com/sinamalizadeh/reactjs-simple-table
reactjs simple table
https://github.com/sinamalizadeh/reactjs-simple-table
bootsrap-table react react-boostrap-table react-table reactjs-simple-table server-side server-side-reactja-table table table-comp
Last synced: 8 months ago
JSON representation
reactjs simple table
- Host: GitHub
- URL: https://github.com/sinamalizadeh/reactjs-simple-table
- Owner: SinaMAlizadeh
- Created: 2021-03-31T19:18:32.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-04-08T13:18:38.000Z (almost 5 years ago)
- Last Synced: 2025-05-18T15:13:27.712Z (8 months ago)
- Topics: bootsrap-table, react, react-boostrap-table, react-table, reactjs-simple-table, server-side, server-side-reactja-table, table, table-comp
- Language: JavaScript
- Homepage:
- Size: 235 KB
- Stars: 3
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Simple Table
A simple and reusable table for React ([Demo](Https://Codesandbox.Io/S/Reactjs-Simple-Table-Pokzv "Demo"))
Server side table for React ([Demo](https://codesandbox.io/s/reactjs-simple-table-server-side-rul9w "Demo"))
## Installation
The package can be installed via NPM:
```
npm i reactjs-simple-table
```
## Usage
Import SimpleTableComponent for usage :
```js
import SimpleTableComponent from "reactjs-simple-table";
```
Define your column with filed variable and header name :
```js
const columns = [
{
field: "title",
headerName: "Title",
},
{
field: "number",
headerName: "Amount",
},
];
```
Get your list from Api or define your list :
```js
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:
```js
```
```js
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 (
);
}
export default App;
```
## Server Side Table
Import SimpleTableComponent for usage :
```js
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 :
```js
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 (
);
}
```
## User guide
| 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 |
## Using Bootsrap
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
```
```js
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 (
);
}
export default App;
```
You can use _table-responsive_ :
```js
...
```