devweb13-libraries-react

Library of different useful React components:

• DataTableReact: A flexible, dynamic and easy-to-use table to search and sort this data.

Made with

Measures SonarCloud

| summary | score | to do | | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | | | | | | | | | | | | | | |

Deployment

To deploy this project run

  npm i devweb13-libraries-react

Run DataTableReact

After installing the library

import { DataTableReact } from 'devweb13-libraries-react';

• The array takes a single required parameter, an array of objects with all the same properties. The first property will be the first column of the table and so on…

• The pagination of the table is managed automatically according to the number of entries displayed on the screen.

• Special feature!!: Properties starting with a "_" are not displayed on the screen.

Usage/Examples

import { DataTableReact } from 'devweb13-libraries-react';

function App() {
  const arrayOfObjects = [
    {
      _id: 1,
      id: 1,
      name: 'John Doe',
      age: '30',
      salary: 20000,
    },
    {
      _id: 2,
      id: 2,
      name: 'Jane Doe',
      age: '25',
      salary: 25000,
    },
    {
      _id: 3,
      id: 3,
      name: 'Joe Doe',
      age: '35',
      salary: 30000,
    },
    {
      _id: 4,
      id: 4,
      name: 'Jack Doe',
      age: '40',
      salary: 40000,
    },
    {
      _id: 5,
      id: 5,
      name: 'Jill Doe',
      age: '45',
      salary: 50000,
    },
    {
      _id: 6,
      id: 6,
      name: 'Juan Doe',
      age: '50',
      salary: 60000,
    },
    {
      _id: 7,
      id: 7,
      name: 'Juan Doe',
      age: '55',
      salary: 70000,
    },
    {
      _id: 8,
      id: 8,
      name: 'Juan Doe',
      age: '60',
      salary: 80000,
    },
    {
      _id: 9,
      id: 9,
      name: 'Juan Doe',
      age: '65',
      salary: 90000,
    },
    {
      _id: 10,
      id: 10,
      name: 'Juan Doe',
      age: '70',
      salary: 100000,
    },
    {
      _id: 11,
      id: 11,
      name: 'Juan Doe',
      age: '75',
      salary: 110000,
    },
  ];
  return;
  <div>
    <DataTableReact arrayOfObjects={arrayOfObjects} />
  </div>;
}

Result

Documentation

Documentation

Hi, I'm DevWeb13! 👋

🚀 About Me

I'm a full stack developer...

🔗 Links

🛠 Skills

Javascript, React, Sass...

License

MIT

Authors

• @DevWeb13