2.0.1 • Published 3 years ago
react-multiuse-table v2.0.1
Install
$ npm install react-multiuse-table
Basic Usage
import ReactMultiuseTable from 'react-multiuse-table';
const headers = [
{ key: 'first_name', label: "Full Name", listed: true },
{ key: 'mobile', label: "Phone", listed: true }
]
const data = [
{ age: 28, gender: "Male", mobile: "234546673453", first_name: "john", last_name: 'snow', email: "john@gmail.com" },
{ age: 56, gender: "Female", mobile: "346724354564", first_name: "Suzen", last_name: 'parker', email: "suzen@hotmail.com" },
{ age: 34, gender: "Male", mobile: "345567345678", first_name: "Ricky", last_name: 'sen', email: "ricky@rediff.com" },
{ age: 23, gender: "Male", mobile: "443567656766", first_name: "Messi", last_name: 'lobo', email: "messi@gmail.com" },
{ age: 45, gender: "Female", mobile: "978954364563", first_name: "Arial", last_name: 'oscorb', email: "arial@gmail.com" }
]
<ReactMultiuseTable
rmtClass="table"
rmtHeaders={headers}
rmtData={data}
/>
Advance Header
const headers = [
{
key: ['first_name', 'last_name'],
label: "Full Name",
cellStyle: { textTransform: "capitalize" },
listed: true,
},
{
key: 'mobile',
label: "Phone",
listed: true,
cellStyle: { textAlign: "right", display: "block", color: "#aaa", fontSize: "10px" }
},
{
key: 'gender',
label: "Gender",
listed: true,
selectOptions: ["Male", "Female"]
},
{
key: 'age',
label: "Age",
listed: true,
cellStyle: { textAlign: "right", display: "block", color: "#666" }
},
{
key: 'email',
label: "Mail Id",
listed: true,
cellStyle: { color: "blue" }
},
{
key: ['age', 'gender'],
label: "Seprator",
listed: true,
seprator: "-"
}
]
Pagination
<ReactMultiuseTable
rmtPaginateSelection={[5, 10, 100]}
rmtRecordPerPage={10}
rmtPageLimit={5}
/>
Server side Data
You need to specify total number of records. Make sure the rmtServer flag is true.
<ReactMultiuseTable
rmtServer={true}
rmtTotalrecord={100}
rmtQueryParams={queryParams}
/>
Props
<ReactMultiuseTable
rmtHeading="Heading"
rmtSubHeading="SubHeading"
rmtToolbar={true}
rmtColumnSearch={true}
rmtGlobalSearch={true}
rmtResetData={false}
rmtFullScreenMode={true}
rmtArrangeHead={true}
/>
1.1.0
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.0
3 years ago
0.3.1
3 years ago
0.3.0
3 years ago
0.2.2
3 years ago
0.2.1
3 years ago
0.1.27
3 years ago
0.1.28
3 years ago
0.2.0
3 years ago
0.1.24
3 years ago
0.1.25
3 years ago
0.1.26
3 years ago
0.1.23
3 years ago
0.1.22
3 years ago
0.1.21
3 years ago
0.1.20
3 years ago
0.1.19
3 years ago
0.1.18
3 years ago
0.1.17
3 years ago
0.1.16
3 years ago
0.1.15
3 years ago
0.1.14
3 years ago
0.1.13
3 years ago
0.1.11
3 years ago
0.1.10
3 years ago
0.1.9
3 years ago
0.1.8
3 years ago
0.1.7
3 years ago
0.1.6
3 years ago
0.1.5
3 years ago
0.1.4
3 years ago
0.1.3
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago