Added resolver if dataset is not to array format. Will try to get the first object if the dataset is not an array. Refactored some methods and variable's names

Anthony Duhaime · Anthony Duhaime · commit 8110e37a42cf · 2017-06-15T08:56:32.000-04:00
diff --git a/demo/index.js b/demo/index.js
@@ -5,35 +5,29 @@ import '../style.css';
 
 class Example extends Component {
     render() {
-        let data = [
-            { id: 1, firstname: 'John', lastname: 'Doe', email: 'jdoe@internet.com' },
-            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: 'jdoewy@internet.com' },
-            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: 'jdoewesse@internet.com' },
-            { id: 1, firstname: 'John', lastname: 'Doe', email: 'jdoe@internet.com' },
-            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: 'jdoewy@internet.com' },
-            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: 'jdoewesse@internet.com' },
-            { id: 1, firstname: 'John', lastname: 'Doe', email: 'jdoe@internet.com' },
-            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: 'jdoewy@internet.com' },
-            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: 'jdoewesse@internet.com' },
-            { id: 1, firstname: 'John', lastname: 'Doe', email: 'jdoe@internet.com' },
-            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: 'jdoewy@internet.com' },
-            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: 'jdoewesse@internet.com' },
-            { id: 1, firstname: 'John', lastname: 'Doe', email: 'jdoe@internet.com' },
-            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: 'jdoewy@internet.com' },
-            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: 'jdoewesse@internet.com' },
-            { id: 1, firstname: 'John', lastname: 'Doe', email: 'jdoe@internet.com' },
-            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: 'jdoewy@internet.com' },
-            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: 'jdoewesse@internet.com' },
-            { id: 1, firstname: 'John', lastname: 'Doe', email: 'jdoe@internet.com' },
-            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: 'jdoewy@internet.com' },
-            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: 'jdoewesse@internet.com' },
-            { id: 1, firstname: 'John', lastname: 'Doe', email: 'jdoe@internet.com' },
-            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: 'jdoewy@internet.com' },
-            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: 'jdoewesse@internet.com' },
-        ];
+        let data = [{ 'id': 1, 'firstname': 'Lari', 'lastname': 'Leach', 'email': 'lleach0@google.es' },
+        { 'id': 2, 'firstname': 'Teddie', 'lastname': 'Thorne', 'email': 'tthorne1@mayoclinic.com' },
+        { 'id': 3, 'firstname': 'Kendall', 'lastname': 'Ossenna', 'email': 'kossenna2@canalblog.com' },
+        { 'id': 4, 'firstname': 'Merv', 'lastname': 'Heffron', 'email': 'mheffron3@qq.com' },
+        { 'id': 5, 'firstname': 'Stanwood', 'lastname': 'Boundy', 'email': 'sboundy4@nhs.uk' },
+        { 'id': 6, 'firstname': 'Ikey', 'lastname': 'Laurenz', 'email': 'ilaurenz5@admin.ch' },
+        { 'id': 7, 'firstname': 'Lilli', 'lastname': 'Peniello', 'email': 'lpeniello6@icq.com' },
+        { 'id': 8, 'firstname': 'Anica', 'lastname': 'Brimham', 'email': 'abrimham7@pbs.org' },
+        { 'id': 9, 'firstname': 'Frankie', 'lastname': 'Bremner', 'email': 'fbremner8@paginegialle.it' },
+        { 'id': 10, 'firstname': 'Kristos', 'lastname': 'Verecker', 'email': 'kverecker9@yellowpages.com' },
+        { 'id': 11, 'firstname': 'Olympe', 'lastname': 'Garred', 'email': 'ogarreda@google.co.uk' },
+        { 'id': 12, 'firstname': 'Ellissa', 'lastname': 'Derrett', 'email': 'ederrettb@amazon.de' },
+        { 'id': 13, 'firstname': 'Aguistin', 'lastname': 'Oolahan', 'email': 'aoolahanc@nba.com' },
+        { 'id': 14, 'firstname': 'Emili', 'lastname': 'Lunny', 'email': 'elunnyd@blog.com' },
+        { 'id': 15, 'firstname': 'Mikol', 'lastname': 'Scarrisbrick', 'email': 'mscarrisbricke@de.vu' },
+        { 'id': 16, 'firstname': 'Boycey', 'lastname': 'Bockin', 'email': 'bbockinf@springer.com' },
+        { 'id': 17, 'firstname': 'Ezechiel', 'lastname': 'Pinchin', 'email': 'epinching@dailymail.co.uk' },
+        { 'id': 18, 'firstname': 'Flore', 'lastname': 'Chesterfield', 'email': 'fchesterfieldh@bizjournals.com' },
+        { 'id': 19, 'firstname': 'Brnaby', 'lastname': 'Beentjes', 'email': 'bbeentjesi@state.gov' },
+        { 'id': 20, 'firstname': 'Ronny', 'lastname': 'Gelderd', 'email': 'rgelderdj@hc360.com' }];
         return (
             <div>
-                <Tabledata datas={data}>
+                <Tabledata datas={data} rowsPerPage={8}>
                     <Tableheader attribute={'firstname'}>Firstname</Tableheader>
                     <Tableheader attribute={'lastname'}>Lastname</Tableheader>
                     <Tableheader renderCell={(_content, _index, row) => (row.firstname + ' ' + row.lastname)}>Fullname</Tableheader>
diff --git a/src/components/Tabledata.js b/src/components/Tabledata.js
@@ -7,7 +7,8 @@ const DEFAULT_ROWS_PER_PAGE = 10;
 export default class Tabledata extends Component {
     constructor(props) {
         super(props);
-        this._rowsToDisplay = this.props.rowsToDisplay ? this.props.rowsToDisplay : DEFAULT_ROWS_PER_PAGE;
+        this._rowsToDisplay = this.props.rowsPerPage ? this.props.rowsPerPage : DEFAULT_ROWS_PER_PAGE;
+        this._datas = (Array.isArray(this.props.datas)) ? this.props.datas : this.props.datas[Object.keys(this.props.datas)[0]];
         this.cells = [];
         this.setupCells();
         this.state = {
@@ -47,16 +48,16 @@ export default class Tabledata extends Component {
     }
 
     requiresPagination() {
-        return this.props.datas.length > this._rowsToDisplay;
+        return this._datas.length > this._rowsToDisplay;
     }
 
     pageCount() {
-        return Math.ceil(this.props.datas.length / this._rowsToDisplay);
+        return Math.ceil(this._datas.length / this._rowsToDisplay);
     }
 
-    getPaginatedFiles() {
+    getPaginatedData() {
         const start = this.getPaginationStart();
-        return Slice(this.props.datas, start, start + this._rowsToDisplay);
+        return Slice(this._datas, start, start + this._rowsToDisplay);
     }
 
     getPaginationStart() {
@@ -70,7 +71,7 @@ export default class Tabledata extends Component {
     }
 
     renderRows() {
-        return this.getPaginatedFiles().map((row, rowIndex) => {
+        return this.getPaginatedData().map((row, rowIndex) => {
             let cells = this.prepareCells(row);
             if (this.props.renderRow) {
                 return this.props.renderRow(cells, rowIndex);

-Original file line number
+Diff line change
 class Example extends Component {
     render() {
 -        let data = [
 -            { id: 1, firstname: 'John', lastname: 'Doe', email: '[email protected]' },
 -            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: '[email protected]' },
 -            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: '[email protected]' },
 -            { id: 1, firstname: 'John', lastname: 'Doe', email: '[email protected]' },
 -            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: '[email protected]' },
 -            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: '[email protected]' },
 -            { id: 1, firstname: 'John', lastname: 'Doe', email: '[email protected]' },
 -            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: '[email protected]' },
 -            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: '[email protected]' },
 -            { id: 1, firstname: 'John', lastname: 'Doe', email: '[email protected]' },
 -            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: '[email protected]' },
 -            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: '[email protected]' },
 -            { id: 1, firstname: 'John', lastname: 'Doe', email: '[email protected]' },
 -            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: '[email protected]' },
 -            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: '[email protected]' },
 -            { id: 1, firstname: 'John', lastname: 'Doe', email: '[email protected]' },
 -            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: '[email protected]' },
 -            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: '[email protected]' },
 -            { id: 1, firstname: 'John', lastname: 'Doe', email: '[email protected]' },
 -            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: '[email protected]' },
 -            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: '[email protected]' },
 -            { id: 1, firstname: 'John', lastname: 'Doe', email: '[email protected]' },
 -            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: '[email protected]' },
 -            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: '[email protected]' },
 -        ];
 +        let data = [{ 'id': 1, 'firstname': 'Lari', 'lastname': 'Leach', 'email': '[email protected]' },
 +        { 'id': 2, 'firstname': 'Teddie', 'lastname': 'Thorne', 'email': '[email protected]' },
 +        { 'id': 3, 'firstname': 'Kendall', 'lastname': 'Ossenna', 'email': '[email protected]' },
 +        { 'id': 4, 'firstname': 'Merv', 'lastname': 'Heffron', 'email': '[email protected]' },
 +        { 'id': 5, 'firstname': 'Stanwood', 'lastname': 'Boundy', 'email': '[email protected]' },
 +        { 'id': 6, 'firstname': 'Ikey', 'lastname': 'Laurenz', 'email': '[email protected]' },
 +        { 'id': 7, 'firstname': 'Lilli', 'lastname': 'Peniello', 'email': '[email protected]' },
 +        { 'id': 8, 'firstname': 'Anica', 'lastname': 'Brimham', 'email': '[email protected]' },
 +        { 'id': 9, 'firstname': 'Frankie', 'lastname': 'Bremner', 'email': '[email protected]' },
 +        { 'id': 10, 'firstname': 'Kristos', 'lastname': 'Verecker', 'email': '[email protected]' },
 +        { 'id': 11, 'firstname': 'Olympe', 'lastname': 'Garred', 'email': '[email protected]' },
 +        { 'id': 12, 'firstname': 'Ellissa', 'lastname': 'Derrett', 'email': '[email protected]' },
 +        { 'id': 13, 'firstname': 'Aguistin', 'lastname': 'Oolahan', 'email': '[email protected]' },
 +        { 'id': 14, 'firstname': 'Emili', 'lastname': 'Lunny', 'email': '[email protected]' },
 +        { 'id': 15, 'firstname': 'Mikol', 'lastname': 'Scarrisbrick', 'email': '[email protected]' },
 +        { 'id': 16, 'firstname': 'Boycey', 'lastname': 'Bockin', 'email': '[email protected]' },
 +        { 'id': 17, 'firstname': 'Ezechiel', 'lastname': 'Pinchin', 'email': '[email protected]' },
 +        { 'id': 18, 'firstname': 'Flore', 'lastname': 'Chesterfield', 'email': '[email protected]' },
 +        { 'id': 19, 'firstname': 'Brnaby', 'lastname': 'Beentjes', 'email': '[email protected]' },
 +        { 'id': 20, 'firstname': 'Ronny', 'lastname': 'Gelderd', 'email': '[email protected]' }];
         return (
             <div>
 -                <Tabledata datas={data}>
 +                <Tabledata datas={data} rowsPerPage={8}>
                     <Tableheader attribute={'firstname'}>Firstname</Tableheader>
                     <Tableheader attribute={'lastname'}>Lastname</Tableheader>
                     <Tableheader renderCell={(_content, _index, row) => (row.firstname + ' ' + row.lastname)}>Fullname</Tableheader>