react-advanced-datatable
v2.1.4
Published
Made with create-react-library
Downloads
10
Readme
Getting Started with react-advanced-datatable
`npm install react-advanced-datatable`
Usage
- Import the DataTable component, the necessary CSS styles, and Axios for making API requests:
import DataTable from 'react-advanced-datatable';
import axios from 'axios';
- Define the state for the DataTable component, including the data, current page, rows per page, and total pages:
const [state, setState] = useState({
rowsPerPage: 3,
data: [],
currentPage: 2,
totalPages: 0,
});
- Create a function to fetch the data from the API using Axios, and update the state with the results:
const fetchData = async () => {
await axios
.get(`http://localhost:3001/api/books/page=${state.currentPage}&total=${state.rowsPerPage}`)
.then(res => {
setState({ ...state, data: res.data.data, totalPages: res.data.total });
console.log(res.data);
});
};
- Use the useEffect hook to fetch the data when the component mounts:
<DataTable
className={'striped table-bordered package-table'}
hideColumns={["age","location3"]}
state={state}
backendPagination={true}
setState={setState}
tableOptions={[
{
column: '#',
appearAs: '#',
width: '10px',
frozen: true,
render: (object, value) => (
<>
<input type="checkbox" className="m-auto" />
</>
),
},
{
column: 'age',
appearAs: 'Age',
width: '180px',
frozen: true,
render: null,
},
{
column: 'name',
appearAs: 'Name',
width: '180px',
frozen: false,
render: null,
},
{
column: 'location3',
appearAs: 'Location 3',
width: '201px',
frozen: false,
render: (object, value) => (
<>
{value}
<button className="btn btn-sm btn-outline-danger p-0 px-2 ms-auto" onClick={() => console.log(value)}>
view
</button>
</>
),
},
{
column: 'location4',
appearAs: 'Location 4',
width: '50px',
frozen: false,
render: (object, value) => (
<button className="btn btn-sm btn-outline-danger p-0 px-2 ms-auto">{value}</button>
),
},
]}
/>
Props
The DataTable component accepts the following props:
- className: The class name for the table. Optional.
- backendPagination: controls whether you want to paginate data from the server or not. By default the package paginates from the client side.
- state: An object that defines the state of the table, including the data, current-page, rows-per-page, and total-pages. Required.
- setState: A function to update the state of the table. Required.
- tableOptions: An array of objects that define the columns of the table, including their name, appearance, width, and rendering function. Required.