npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-data-table-modify

v1.1.3

Published

React DataTable with enhanced capabilities to replace jQuery datatable

Downloads

10

Readme

react-data-table-modify

A simple-to-use React table library with interesting features

  • Capability to be configured to display arrays of objects with simple columns configuration
  • Multi-criterias sort, including typechecking (dates, numbers & strings).
  • Locale display

Short term evolution

  • add cell editing (2.0)

NPM JavaScript Style Guide

:mag_right: Preview

image

Live demo

https://olivierbussier.github.io/react-data-table-modify/

data for this live demo have been created using faker

Install

npm install react-data-table-modify

Usage

import React, { Component } from 'react'

import {Datatable} from 'react-data-table-modify'

const App = () => {

    return <DataTable formatCols={} data={} curPage={} nbPerPage={} />

}

Description of props

FormatCols

This prop is used to explain to DataTable the structure of data to display. The structure understood by DataTable is an array of objects, each object describe a row of the data.

Consider you want to display an array of objects having the following data structure:

const data = [
  {
    xName: "Calin",
    dateOfBirth: "Thu Feb 11 2020",
    description: "First pet of my wife"
  },
  ...
]

The corresponding 'formatCols' prop will be :

const format = [
  {
    name: "Name of the animal", // Header name of the column
    data: "xName",              // name of the property in the data object
    type: "string"              // Type of the col here 'string'
  },
  {
    name: "Birth Date",
    data: "dateOfBirth" ,
    type: "date"                // Type of the col, here 'date'
  },
  {
    name: "Description",
    data: "description",
    type: "string"
  }
]

And finally, for these data, you will use DataTable this way


  <DataTable formatCols={format} data={data}>

Pagination

DataTable comes with a Pagination companion component. In this case, you could send to Datatable component whole data and specify by props which part of these data you want to display

The props used to doing that are :

  • nbPerPage : Number of items to display
  • curPage : The page you want to display (0 to n)

You could maintain a state variable for curPage in your App (with your pagination component) and pass this variable as props to DataTable

Usage of DataTable with Pagination component

At least, you have to declare state variables:

  • First one to maintain the value of the current page.
  • Second one for the number of items per page if you want this to be dynammicly changed

import {DataTable, Pagination} from 'react-data-table-modify'

const App = () => {
  const nbPerPage = 10
  const [curPage, setCurPage] = useState(0)

  data = ...fetch / Array...

  return (
    <div>
      <DataTable
        formatCols={formatCols}
        data={data}
        curPage={curPage}
        nbPerPage={nbPerPage}
      />
      <Pagination
        nbItems={data.length}
        nbPerPage={nbPerPage}
        curPage={curPage}
        onPageChange={(page) => setCurPage(page)}
      />
    </div>
  )
}

Sorting capabilities

Datatable is able to sort data with 3 colums, ascending/descending

  • If you click on a column header you will sort data using this column. If you click again on the same column, this will inverse the sens of sorting.
  • If you maintain 'shift key' when you click on header cols, you will preserve previous sort choices (max 3)
  • If you have already 3 sort cols selected and you click with shift key pressed, then you erase previous sort choices

Columns are sorted depending of their types, meaning that dates are sorted correctly

CSS Structure

Display of DataTable component could be customised easily using css overriding, hereafter the structure of scss in place

.data-table {
    // Container of whole DataTable component
    th {
        position: relative;  // Origin of children's absolute
        background-image: url(/* Caret up&down*/);
        &.asc {
            background-image: url(/* caret up */);
        }
        &.desc {
            background-image: url(/* caret dpwn */);
        }
        &.sort-col-0 {
            &:after {
                position: absolute;
                content: '1';
            }
        }
        &.sort-col-1 {
            &:after {
                position: absolute;
                content: '2';
            }
        }
        &.sort-col-2 {
            &:after {
                position: absolute;
                content: '3';
            }
        }
    }
    tbody tr {
        background: white;
        &:nth-child(2n+1) {
            background-color: /* color of odd rows */
        }
    }
    tr:nth-child(2n+1) {
        .sort-col-0, .sort-col-1, .sort-col-2 {
            background-color: /* color of odd rows */
        }
    }
    tr:nth-child(2n+2) {
        .sort-col-0, .sort-col-1, .sort-col-2 {
            background-color: /* color of even rows
        }
    }

}

And for Pagination component

.app-pagination {
    // Container of whole Pagination component
    .active {
        // Active button
        &:hover {
          // Active button hovered
        }
    }

    button {
      // Buttons
        &.left-btn {
            //Left Button
        }
        &.middle-btn {
            // Middle Buttons (other than left & right)
        }
        &.right-btn {
            //Right Button
        }
        &:hover {
          // Hovered Buttons
        }
    }
}

License

MIT © olivierbussier