carlosrocha / react-data-components Goto Github PK
View Code? Open in Web Editor NEWReact components for sorting, filtering and pagination of data.
Home Page: http://carlosrocha.github.io/react-data-components/
License: MIT License
React components for sorting, filtering and pagination of data.
Home Page: http://carlosrocha.github.io/react-data-components/
License: MIT License
@carlosrocha Mind rolling a new version to include to prop types update? Can't make the move to react 16 until this is fixed.
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",
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?
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.
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"
}
I need custom header rendering. I patched it in here:
Would you want a pull request?
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
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
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?
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/react-data-components/index.js 7:20-46
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 = {
@ ./
ERROR in .//react-data-components/src/DataList.js/react-data-components/index.js 8:19-44
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.
@ ./
ERROR in .//react-data-components/src/utils.js/react-data-components/index.js 9:16-38
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;
|
| /*
@ ./
css dependencies (font-awesome, bootstrap?) should be added to the build, or at least documented.
Hi.
I need to add custom component to table box.
Example:
var columns = [
{ title: "name", prop: "name", component: Name }
]
Can i do it?
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;
}
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!
Need an html file react-data-components with static json or html data with following
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/
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.
I would like to change onClick (or on RowSelect?!!) action for the table, but how can I change it?
Thank you
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!
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.
I see you can specify initialData but when the data changes how would you update it in a DataTable component?
Hello,
i would like to know if and how it is possible to deactivate search field and/or pagination?
Thanks in advance
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)?
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).
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?
Hello...... I need modify your styles and compile your project... How can I do??? please help me thank you bye
Can any one tell me how hide to pagination bar !!!
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
Is this plugin provide some customization for table? I can't find documentation for that
How could I use react-data-components with a table like this.
Does somebody can tell me the best way to add the numbering column (1,2,3,4 ... ) at the first column?
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.
Steps:
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 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.
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.
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
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.
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.
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.
Is there a way to programmatically sorting the table?
or reset the sorting programmatically?
Thanks, Adri
Possible to bump the version on npm so i can use it with react 0.12?
Does the table support remote data source? If so, how would you do it in an ajax call? Thank you so much
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.