carlosrocha/react-data-components

React components for sorting, filtering and pagination of data.

react-data-components's Issues

css dependencies

css dependencies (font-awesome, bootstrap?) should be added to the build, or at least documented.

Filter Column wise

Say table has 4 columns, is there a way to have a filter for each column? Is there's a patch already attempted for this?

Need one example of the following...

Need an html file react-data-components with static json or html data with following

1. Read only grid as above without edit, delete and save option.
2. The grid with many export options - pdf, csv, excel, word etc.,
3. When the pagination is enabled - goto page option to navigate to particular page
4. Copy to clipboard and print option
5. Support quickest rendering for alteast 5,000 rows with page size as 10, 100, 500, 1000, 5000
6. Search all columns or individual columns
7. Export selected or all columns

Example grid

http://institut-de-genomique.github.io/Ultimate-DataTable/
https://w3lessons.info/2015/07/13/export-html-table-to-excel-csv-json-pdf-png-using-jquery/

Reference

1. http://2.bp.blogspot.com/-yTiytux2848/Vcj-b5FjyUI/AAAAAAAAdQk/8rzPAsyU4Dw/s1600/jQuery%2Bdatatables%2Bexport%2Bto%2Bpdf.png
   2 . https://www.phpflow.com/wp-content/uploads/2015/09/export-table-data-toexcel-png-pdf.png
2. https://i.stack.imgur.com/XeCzz.png
3. https://stackoverflow.com/questions/45901407/static-data-grid-10k-records-with-search-pagination-export-options
4. https://datatables.net/extensions/scroller/examples/initialisation/large_js_source.html

Can use with material-ui?

How could I use react-data-components with a table like this.

Global Search ER?

Global search is doing a great job except that it is kind of "overkill".
To an end user's point of view, global means the visual columns on the data table, so I think it makes sense to provide such a option to only search for the tags under the visual columns, your thoughts?

Currently the search would go against all the data tags no matter if it is shown on the table or not.

Printing to page as well as export table content as CSV and PDF

I enjoy the simplicity and yet powerful features of react-data-components. Great Job!
I wish to know if it is possible to print or export table content into different format. I need some guidance on this.

Thanks

npm start error

I had this error message when start the project

C:\Users\shadi\Documents\Shadi\react-data-components\example>npm start

[email protected] start C:\Users\shadi\Documents\Shadi\react-data-components
webpack-dev-server -d --config example/webpack.config.js

× ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration has an unknown property 'mode'. These properties are valid:
  object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
  For typos: please correct them.
  For loader options: webpack 2 no longer allows custom properties in configuration.
  Loaders should be updated to allow passing options via loader options in module.rules.
  Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
  plugins: [
  new webpack.LoaderOptionsPlugin({
  // test: /.xxx$/, // may apply this only for some modules
  options: {
  mode: ...
  }
  })
  ]

Documentation and Customization

Is this plugin provide some customization for table? I can't find documentation for that

Way to disable pagination

Hi,

I wonder whether it's configurable for pagination?

currentlyl, I am using it in this way

initialData={this._getDataTableData()}
initialPageLength={this._getDataTableData().length}

thanks!

Redux - Key data

Would you be open to accepting a PR that keys the data that's being loaded on the datatable? To better support having multiple tables rendered at once.

How to add Numbering Column at first column?

Does somebody can tell me the best way to add the numbering column (1,2,3,4 ... ) at the first column?

There is an error on sort function when sortByValues is undefined

For my quick fixing:
function sort(sortByValues, data) {
var sortedData = sortBy(data, sortByValues ? sortByValues.prop ? sortByValues.prop : '' : '' );
if (sortByValues ? sortByValues.order ? sortByValues.order : '' : '' === 'descending') {
sortedData.reverse();
}
return sortedData;
}

Action Column

Is there anyway I can insert the action column? "Edit", "Delete" etc.

<a href="/edit/{uid}">Edit</a>
<a href="/edit/{uid}">Delete</a>

I added those HTML code to the feed but it outputs the html code not link.

Thanks.

How can I recompile your proyect??

Hello...... I need modify your styles and compile your project... How can I do??? please help me thank you bye

header rendering

I need custom header rendering. I patched it in here:

BD2KGenomics@fe11fdc

Would you want a pull request?

Demo does not work

https://jsbin.com/ziyawu/9/edit?js,output

Gives:

2https://rawgit.com/carlosrocha/react-data-components/master/dist/react-data-components.min.js Failed to load resource: the server responded with a status of 404 ()
runner-3.39.14.min.js:1 ReferenceError: ReactDataComponents is not defined
at ziyawu.js:1:828
ziyawu.js:37 Uncaught ReferenceError: ReactDataComponents is not defined

on Chrome browser OSX

Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by `Table`.

I am getting that warning in console:

Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by `Table`.

I am not sure if that is the reason buttons to change pages are not showing. Any advice?

I am using react 0.14.8.

My code:

let DataTable = require('react-editable-table').DataTable;

let columns = [
  { title: 'Site', prop: 'site'  },
  { title: 'Country', prop: 'country' },
  { title: 'Domain', prop: 'domain', validation: /^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+$/ },
  { title: 'Phone', prop: 'phone', editable: false }
];

let data = [
  { site: 'google1', country: 'USA', domain: 'google1.com', phone: 'phone value' },
  { site: 'google2', country: 'USA', domain: 'google2.com', phone: 'phone value' },
  { site: 'google3', country: 'USA', domain: 'google3.com', phone: 'phone value' },
  { site: 'google4', country: 'USA', domain: 'google4.com', phone: 'phone value' },
  { site: 'google5', country: 'USA', domain: 'google5.com', phone: 'phone value' },
  { site: 'google6', country: 'USA', domain: 'google6.com', phone: 'phone value' },
  { site: 'google7', country: 'USA', domain: 'google7.com', phone: 'phone value' },
  { site: 'google8', country: 'USA', domain: 'google8.com', phone: 'phone value' },
  { site: 'google9', country: 'USA', domain: 'google9.com', phone: 'phone value' },
  { site: 'google10', country: 'USA', domain: 'google10.com', phone: 'phone value' },
  { site: 'google11', country: 'USA', domain: 'google11.com', phone: 'phone value' },
  { site: 'google12', country: 'USA', domain: 'google12.com', phone: 'phone value' },
  { site: 'google13', country: 'USA', domain: 'google13.com', phone: 'phone value' },
  { site: 'google14', country: 'USA', domain: 'google14.com', phone: 'phone value' }
  // It also supports arrays 
  // [ 'name value', 'city value', 'address value', 'phone value' ] 
];


render((
    <DataTable
      className="container"
      keys={[ 'site' ]}
      columns={columns}
      initialData={data}
      initialPageLength={5}
      initialSortBy={{ prop: 'site', order: 'descending' }}
      pageLengthOptions={[ 5, 20, 50 ]}
      className=''
    />
  ), document.getElementById('selected-node'));

Regards.

Customize labels "Search" and "Page Size" with props.

The both labels in DataTable component, 'Search' and 'Page Size' is not editable, so you can not customize for your application by text or language. So I just add in the props of the component 'searchText' and 'pagesizeText' to make it editable for whatever the user wants. #46

Is it possible to deactivate search field and/or pagination?

Hello,

i would like to know if and how it is possible to deactivate search field and/or pagination?

Thanks in advance

programmatically sorting or reset sorting

Is there a way to programmatically sorting the table?
or reset the sorting programmatically?

Thanks, Adri

Could not hide pagination bar...

Can any one tell me how hide to pagination bar !!!

CSS is not working

Hi I'm using the SCSS loader in my react app.

I tried this example https://github.com/carlosrocha/react-data-components/blob/master/example/table/main.js

I'm using the react-tool-box which have container class css already.

Functionality is working but without css.

Please let me know How I can use the CSS.

how to get to know that on which page number user clicks in pagination?

i wanted to write custom function to fetch api every time when user clicks on page number(basically to append it to the api), im asking this cause our api's are designed in such a way that api's will fetch the data based on page Number the user selects to avoid fetching thousands of data at the initial time.
any help is greatly appreciated.
thank you.

className not being applied to table

I'm writing this:

<DataTable
    keys="name"
    className="table table-stripped tickets-table dataTable no-footer"
    columns={[]}
    initialData={[]}
    useShowHideColumns={true}
    initialPageLength={10}
    initialSortBy={{ prop: 'name', order: 'descending' }}
    pageLengthOptions={[10, 25, 50, 100]}
/>

It's rendering this:

 <div class="container"><div class="row"><div class="col-xs-4"><div><label for="page-menu">Page size:</label><select id="page-menu"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select></div><div><label for="search-field">Search:</label><input type="search" id="search-field" value=""></div></div><div class="col-xs-8"></div></div><table class="table table-bordered"><caption class="sr-only" role="alert" aria-live="polite">Sorted by name: descending order</caption><thead><tr></tr></thead><tbody><tr><td colspan="0" class="text-center">No data</td></tr></tbody></table></div>

Using this:
"react-data-components": "^1.2.0",

Custom cell?

Hi.
I need to add custom component to table box.
Example:

var columns = [
  { title: "name", prop: "name", component: Name }
]

Can i do it?

Page didn't display data correctly when we filter on page which is not first page

Steps:

• Open https://carlosrocha.github.io/react-data-components/
• Select to the last page
• Key in X in search box

Expected:
That the page will display data correctly

Actual:
The page didn't show any data.
But it will be ok after we change the page.

How do you update table data?

I see you can specify initialData but when the data changes how would you update it in a DataTable component?

How to move pagination and pagelength dropdown to bottom of the datatable?

Pagination and the pagelength dropdown is appearing at the top of the datatable by default. How can I move the pagination and pagelength dropdown and the move the search box to the top-right corner (current position of pagination)?

npm install : does not satisfy its siblings' peerDependencies requirements!

I can't install this component using npm install react-data-components --save-dev :

npm install react-data-components --save-dev
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "D:\\nodejs\\node.exe" "D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "react-data-components" "--save-dev"
npm ERR! node v4.0.0
npm ERR! npm  v2.14.2
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@^0.13.0
npm ERR! peerinvalid Peer [email protected] wants [email protected]
npm ERR! peerinvalid Peer [email protected] wants react@~0.12.2

npm ERR! Please include the following file with any support request:
    npm ERR!     L:\backoffice\npm-debug.log

from package.json

var version = {
  "react": "^0.13.3",
  "react-mixin": "^1.7.0",
  "react-router": "^0.13.3"
}

Customize row css class

How could i customize a specific row with a css class, changing the <tr> class?
The object/data that i use returns a boolean that can control the condition of the class render.

I have tried something with buildRowOptions, but have no success since there´s no documentation for this attribute.

Remote data

Does the table support remote data source? If so, how would you do it in an ajax call? Thank you so much

passing in globalSearch

There doesn't appear to be a way to pass in the globalSearch. Is that correct? This is important for being able to parameterize a view, e.g. /mytable?search=blah. Looks like it could be done by moving the onFilter logic into a function & calling it from buildInitialState as well as onFilter, so the initial view matches the passed in filterValues.

Mixins and React/ES6

Hi,

First of all, nice stuff you got going on here! The reason of this issue (more like an enhancement) is because I'm doing my own DataTable implementation since I'm not using bootstrap at all, and I want to have pagination on the bottom and some extra feature.

Basically I started with your DataTable implementation, and moved around the components (SelectField, SearchField, ...), and actually refactored it using ES6 stage-0 using Babel as a transpiler (imports, class, ...)

I noticed that there's the mixins stuff, now for React + ES6 this is not yet possible:

No Mixins
Unfortunately ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes. Instead, we're working on making it easier to support such use cases without resorting to mixins.

My question then, is there any plans to get rid of mixins, or provide an alternate solution? Thanks and nice job!

Version bump?

Possible to bump the version on npm so i can use it with react 0.12?

getting error while compiling with webpack

Hey Carlos,

first of all thank you for coming up with this. I get the following error while compiling with webpack.
Can you help me out?

Jan

ERROR in .//react-data-components/src/DataMixin.js
Module parse failed: /home/djan/dev/wiz/node_modules/jsx-loader/index.js!/home/djan/dev/wiz/node_modules/react-data-components/src/DataMixin.js Line 1: Unexpected token {
You may need an appropriate loader to handle this file type.
| var {containsIgnoreCase, sort, filter} = require('./utils');
|
| module.exports = {
@ .//react-data-components/index.js 7:20-46

ERROR in .//react-data-components/src/DataList.js
Module parse failed: /home/djan/dev/wiz/node_modules/jsx-loader/index.js!/home/djan/dev/wiz/node_modules/react-data-components/src/DataList.js Line 14: Unexpected token (
You may need an appropriate loader to handle this file type.
| mixins: [ DataMixin ],
|
| getInitialState() {
| return {
| // Clone the initialData.
@ .//react-data-components/index.js 8:19-44

ERROR in .//react-data-components/src/utils.js
Module parse failed: /home/djan/dev/wiz/node_modules/jsx-loader/index.js!/home/djan/dev/wiz/node_modules/react-data-components/src/utils.js Line 19: Unexpected token =>
You may need an appropriate loader to handle this file type.
| * @return {boolean} true if the val is contained in the array
| /
| exports.contains = (arr, val) => arr.indexOf(val) >= 0;
|
| /*
@ .//react-data-components/index.js 9:16-38

Not compatible with react 0.13

I cannot install from the npm repository with React 0.13. Maybe just an update of the react version in package.json, or are there issues with React 0.13?

Using DataTable in tsx component

Hi, have you an example - how to use DataTable in a tsx component?
I see errors:

error TS2605: JSX element type 'DataTableEnhancer' is not a constructor function for JSX elements.
Property 'setState' is missing in type 'DataTableEnhancer'.

error TS2607: JSX element class does not support attributes because it does not have a 'props' property

How can I change onClick action for each row?

I would like to change onClick (or on RowSelect?!!) action for the table, but how can I change it?

Thank you

Sorting is not case insensitive

For my team's purposes, having case insensitive sorting is key. Currently the sorting groups items starting with a lower case letter separate from the rest of the items.

I was going to open a PR for this as well, but decided for an issue ticket because I wasn't sure how you would have wanted it implemented (whether this should be default functionality or an optional flag added when instantiating the DataTable).

1.1.2

@carlosrocha Mind rolling a new version to include to prop types update? Can't make the move to react 16 until this is fixed.

Export enhanceDataTable function

Hey everyone!

I am looking for a way to include custom components like Pagination, SearchBox and Table. enhanceDataTable looks promising and I think, it would be good to include your custom PartialTable.js. However, currently it is not exported and only used internally.

Would you consider exporting the enhanceDataTable function? I can create a PR. Would probably be worth explaining it in the README.md as I think this is a very powerful feature.

Class names non-existent on the data table

Am I right in saying that the class names that are used when using it as a jquery package are not applied if using your package?