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-jquery-datatables

v1.0.0

Published

React, DataTables.net (aka jQuery DataTables), fork of https://github.com/carlosrocha/react-data-components

Downloads

1,258

Readme

Jquery DataTables (DataTables.net) with React

From popular demand I have made this somewhat more understandable with a jsfiddle demo. https://jsfiddle.net/alecperkey/69z2wepo/94908/

I don't know much about making NPM packages, so the minified bundle is ~500kb. Enabling DataTables.net plugins (various themes, buttons, pdfmaker, etc) as configuration options would be great, but I have other stuff to do for now. Hopefully someone will make pure react components with all the features DataTables.net provides

*** Work in progress PRs encouraged *** proof of concept

Most of the time you should stay within React's "faked browser" world since it's more performant and easier to reason about. However, sometimes you simply need to access the underlying API, perhaps to work with a third-party library like a jQuery plugin. React provides escape hatches for you to use the underlying DOM API directly.

(ref: https://facebook.github.io/react/docs/working-with-the-browser.html)

How it works: the React Lifecyle approach for jQuery DataTables

see Table.js if you want to understand the internals.

Basically each column can have a unique renderer for full cell customization, and each row can have unique classNames. Internally, Table.js uses ReactDOM.renderToStaticMarkup to make the table, and then jQuery.DataTable is a function which jQuerifies it. If any rows have classnames of pushState or dtClickAction, the cells in those rows will have handlers attached to them after the jQuerification of the table.

pushState classed cells with anchor tags will have their default href anchor tag behavior prevented, and instead use {push} from 'react-router-redux' to navigate around (if you can use react-router-redux) without the whole page refreshing like a normal anchor tag would.

dtClickAction allows more flexibility. The DataTable accepts a prop clickHandler: if this is present, datatable will look for any rows with the class .dtClickAction. If any of the cells has an anchor tag with data-<foo> attribute(s), and is clicked, then it will pass back to the clickHandler the values of such dataAttrs. Different cells might have different dataAttrs, and so the clickHandler in the jsfiddle shows a switch statement approach for handling multiple dtClickAction types.

  1. componentWillMount | get data from source & set it to the state variable with setState
  2. initial render | generate table markup using the props you provided
  3. componentDidMount | initialise as jQuery DataTable here -- Not invoked on the server-rendering? ( SSR may needs some solution. Suggestions? )
  4. optional: componentShouldUpdate | logic to determine if you do/don't want to re-render depending on differences changes in props and state.
  5. componentWillUpdate -- (a) persist any config which might be lost from DataTable instance (What might this be? Not sure yet.) -- (b) destroy table
  6. Re-render is called, same as step 2
  7. componentDidUpdate, initialize the new table created in step 6, potentially with persisted DataTables-specific config from 5(a)
  8. componentWillUnmount, destroy table

###Warning

Many have warned jQuery DataTables and React shouldn't be used together as both are trying to manipulate the DOM and it can cause conflicts.

If you understand React lifecycle hook methods & are not changing the underlying data too often (i.e. not inline editing like its Google sheets, polling async data sources etc), it might not be a problem.

Still, if the underlying data is constantly being updated with many rows, it will probably be a performance bottleneck for these use cases.

Angular DataTables is quite nice as an alternative.

react-jquery-datatables

Build Status

Getting started

npm install react-jquery-datatables --save

Styles (tbd)

If you are using Webpack and the css-loader you can also require the css with require('react-jquery-datatables/css/datatables.min.css'). I'm not sure how to include the styles in this package properly, as each user may prefer different styles and use different bundling methods.

Using the default implementation

Forked from (React Data Components)[https://github.com/carlosrocha/react-data-components]

The default implementation includes a filter for case insensitive global search, pagination and page size.