expose key field name of each record #37

Author: ashvin27

example/dist/index.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
-import ReactDatatable from '../../lib/index.js';
-// import ReactDatatable from '../../src/index.js';
+// import ReactDatatable from '../../lib/index.js';
+import ReactDatatable from '../../src/index.js';
 
 class UserList extends Component {
     constructor(props) {
@@ -71,6 +71,7 @@ class UserList extends Component {
             }
         ];
         this.config = {
+            key_column: '_id', 
             page_size: 10,
             length_menu: [ 10, 20, 50 ],
             filename: "Users",

example/src/UserList.js

@@ -18,7 +18,6 @@ export default function ADPagination(props){
 
   let Add = function(s, f){
     for (let i = s; i < f; i++) {
-      console.log('i', i);
       tags.push(<Item 
         key={i}
         className={(page == i) ? "active" : ""}

src/ADPagination.js

@@ -2,7 +2,7 @@
  * This is the React Component for ReactDatatable
  *
  * @package        ReactDatatable
- * @author         Ashvin Patel
+ * @author         Ashvin Patel([email protected])
  * @date           14 Dec, 2018
  */
 
@@ -74,7 +74,7 @@ class ReactDatatable extends Component {
         extra : (props.config && props.config.button && props.config.button.extra) ? props.config.button.extra : false,
       },
       filename: (props.config && props.config.filename) ? props.config.filename : "table",
-      recordKeyColumn: props.config && props.config.recordKeyColumn ? props.config.recordKeyColumn : "id",
+      key_column: props.config && props.config.key_column ? props.config.key_column : "id",
       language: {
         length_menu: (props.config && props.config.language && props.config.language.length_menu) ? props.config.language.length_menu : "Show _MENU_ records per page",
         filter: (props.config && props.config.language && props.config.language.filter) ? props.config.language.filter : "Search in records...",
@@ -503,7 +503,7 @@ class ReactDatatable extends Component {
                 {(filterRecords.length) ? filterRecords.map((record, rowIndex) => {
                   rowIndex = _.indexOf(this.props.records, record);
                   return (
-                    <tr key={record.[config.recordKeyColumn]} onClick={(e) => this.props.onRowClicked(e, record, rowIndex)}>
+                    <tr key={record[this.config.key_column]} onClick={(e) => this.props.onRowClicked(e, record, rowIndex)}>
                       {
                         this.props.columns.map((column, colIndex) => {
                           if (column.cell && typeof column.cell === "function") {
@@ -722,7 +722,7 @@ ReactDatatable.defaultProps = {
       csv: false
     },
     filename: "table",
-    recordKeyColumn:"id",
+    key_column:"id",
     language: {
       length_menu: "Show _MENU_ records per page",
       filter: "Search in records...",

src/index.js

@@ -8,13 +8,13 @@ module.exports = {
         filename: 'index.js',
         // libraryTarget: 'commonjs2'
     },
-    watch: false,
+    watch: true,
     plugins: [
-        new webpack.DefinePlugin({
-          'process.env.NODE_ENV': JSON.stringify('development') // production development
-        }),
-        new webpack.optimize.UglifyJsPlugin(),
-        new webpack.HotModuleReplacementPlugin()
+        // new webpack.DefinePlugin({
+        //   'process.env.NODE_ENV': JSON.stringify('development') // production development
+        // }),
+        // new webpack.optimize.UglifyJsPlugin(),
+        // new webpack.HotModuleReplacementPlugin()
     ],
     module: {
         rules: [