React Data Table Component
React Data Table Component es un paquete de npm para React que permiten generar una tabla personalizable con estilos y logica de Javascript ya incluidos por defecto
Instalación de paquetes
npm install react-data-table-component
Ejemplo basico
import DataTable from "react-data-table-component";
function App() {
const columns = [
{
name: "Name",
selector: (row) => row.name,
},
{
name: "Lastname",
selector: (row) => row.lastname,
},
{
name: "age",
selector: (row) => row.age,
},
];
const data = [
{
name: "John",
lastname: "Doe",
age: 25,
},
{
name: "Jane",
lastname: "Doe",
age: 24,
},
{
name: "John",
lastname: "Smith",
age: 30,
},
{
name: "Jane",
lastname: "Smith",
age: 28,
},
{
name: "John",
lastname: "Johnson",
age: 35,
},
];
return (
<div>
<DataTable columns={columns} data={data} />
</div>
);
}
export default App;
Columnnas Ordenables
const columns = [
{
name: "Name",
selector: (row) => row.name,
sortable: true,
},
...
]
Filas Seleccionables
<DataTable selectableRows columns={columns} data={data} />
Fila Fija
<DataTable selectableRows fixedHeader columns={columns} data={data} />
Pagination
<DataTable
columns={columns}
data={data}
pagination
paginationPerPage={4}
/>
Filtrar Filas
const [records, setRecords] = useState(data)
const handleFilter = (e) => {
const filteredRecords = data.filter((record) => {
return record.name.toLowerCase().includes(e.target.value.toLowerCase())
})
setRecords(filteredRecords)
}
return (
<div>
<input type="text"
onChange={handleFilter}
/>
<DataTable
selectableRows
fixedHeader
columns={columns}
data={records}
pagination
paginationPerPage={4}
fil
/>
</div>
)