React Data Table Component Tutorial Practico

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>
  )

Recursos

• https://www.npmjs.com/package/react-data-table-component