react-light-table
v1.1.1
Published
a light weight react table with sorting and pagination features
Downloads
68
Maintainers
Readme
React Light Table
Overview
React Light Table
is a customizable React component designed for creating tables with sorting, pagination, and other features. It offers a clean and straightforward interface for rendering data in a tabular format, providing flexibility and ease of use.
Features
- Sorting: Enable sorting on columns by clicking the column headers. The table supports ascending, descending, and neutral sort indicators.
- Pagination: Implement pagination to navigate through large datasets with ease. The component includes a pagination control at the bottom of the table.
- Clickable Rows: Customize the table to handle row clicks, providing interactive functionality.
- Loading Spinner: Display a loading spinner while data is being fetched or processed.
- Customizable Styles: Tailor the appearance of the table with customizable styles for headers, cells, and more.
Installation
To use React Light Table
in your React project, follow these steps:
Install the package using your package manager of choice:
npm install react-light-table
or
yarn add react-light-table
Import the component in your React file:
import { ReactLightTable } from 'react-light-table';
- Import the css file:
import "react-light-table/style.css";
Usage
The React Light Table
component accepts a variety of props to customize its behavior. Here's a basic example of how to use it:
import { ReactLightTable } from 'react-light-table';
import "react-light-table/style.css";
const MyTable = () => {
// Define your data, columns, and other configuration
const columns = [
{ key: 'name', title: 'Name', sortable: true },
{ key: 'age', title: 'Age', sortable: true },
// Add more columns as needed
];
const data = [
{ name: 'John Doe', age: 30 },
{ name: 'Jane Doe', age: 25 },
// Add more data items as needed
];
return (
<ReactLightTable
id="my-table"
columns={columns}
data={data}
sortable={true}
hasPagination={true}
/>
);
};
export default MyTable;
Props
- id: Unique identifier for the table.
- columns: Array of column configurations.
- data Array of data items to be displayed in the table.
- sortable Enable or disable column sorting.
- hasPagination Enable or disable pagination.
- ... (and more)
Refer to the Props documentation for a detailed list of available props.
License
This project is licensed under the MIT License.
Contributing
We welcome contributions! Feel free to open issues, submit pull requests, or provide feedback