Skip to content

Commit

Permalink
add tableMeta to customRender function
Browse files Browse the repository at this point in the history
  • Loading branch information
@gregnb
gregnb committed Jun 10, 2018
1 parent 54bf786 commit ee87dfc
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 84 deletions.
82 changes: 44 additions & 38 deletions examples/component/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import ReactDOM from "react-dom";
import { FormControlLabel } from 'material-ui/Form';
import Switch from 'material-ui/Switch';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';
import MUIDataTable from "../../src/";
import Cities from "./cities";

Expand All @@ -26,11 +26,11 @@ class Example extends React.Component {
name: "Location",
options: {
filter: true,
customRender: (index, value, updateValue) => {
customRender: (value, tableMeta, updateValue) => {
return (
<Cities
value={value}
index={index}
index={tableMeta.columnIndex}
change={event => updateValue(event)}
/>
);
Expand All @@ -47,7 +47,9 @@ class Example extends React.Component {
name: "Salary",
options: {
filter: true,
customRender: (index, value) => {
customRender: (value, tableMeta, updateValue) => {

console.log(value);

const nf = new Intl.NumberFormat('en-US', {
style: 'currency',
Expand All @@ -64,45 +66,49 @@ class Example extends React.Component {
name: "Active",
options: {
filter: true,
customRender: (index, value, updateValue) => (
<FormControlLabel
label={value ? "Yes" : "No"}
value={value ? "Yes" : "No"}
control={
<Switch color="primary" checked={value} value={value ? "Yes" : "No"} />
}
onChange={event => {
updateValue(event.target.value === "Yes" ? false : true);
}}
/>
)
customRender: (value, tableMeta, updateValue) => {

return (
<FormControlLabel
label={value ? "Yes" : "No"}
value={value ? "Yes" : "No"}
control={
<Switch color="primary" checked={value} value={value ? "Yes" : "No"} />
}
onChange={event => {
updateValue(event.target.value === "Yes" ? false : true);
}}
/>
);

}
}
}
];

const data = [
["Robin Duncan", "Business Analyst", "Los Angeles", 20, 77000, false],
["Mel Brooks", "Business Consultant", "Oklahoma City", 37, 135000, true],
["Harper White", "Attorney", "Pittsburgh", 52, 420000, false],
["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, 150000, true],
["Frankie Long", "Industrial Analyst", "Austin", 31, 170000, false],
["Brynn Robbins", "Business Analyst", "Norfolk", 22, 90000, true],
["Justice Mann", "Business Consultant", "Chicago", 24, 133000, false],
["Addison Navarro", "Business Management Analyst", "New York", 50, 295000, true],
["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, 200000, false],
["Eli Mejia", "Commercial Specialist", "Long Beach", 65, 400000, true],
["Gene Leblanc", "Industrial Analyst", "Hartford", 34, 110000, false],
["Danny Leon", "Computer Scientist", "Newark", 60, 220000, true],
["Lane Lee", "Corporate Counselor", "Cincinnati", 52, 180000, false],
["Jesse Hall", "Business Analyst", "Baltimore", 44, 99000, true],
["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, 90000, false],
["Terry Macdonald", "Commercial Specialist", "Miami", 39, 140000, true],
["Justice Mccarthy", "Attorney", "Tucson", 26, 330000, false],
["Silver Carey", "Computer Scientist", "Memphis", 47, 250000, true],
["Franky Miles", "Industrial Analyst", "Buffalo", 49, 190000, false],
["Glen Nixon", "Corporate Counselor", "Arlington", 44, 80000, true],
["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, 45000, false],
["Mason Ray", "Computer Scientist", "San Francisco", 39, 142000, true]
// ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, 135000, true]
// ["Harper White", "Attorney", "Pittsburgh", 52, 420000, false],
// ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, 150000, true],
// ["Frankie Long", "Industrial Analyst", "Austin", 31, 170000, false],
// ["Brynn Robbins", "Business Analyst", "Norfolk", 22, 90000, true],
// ["Justice Mann", "Business Consultant", "Chicago", 24, 133000, false],
// ["Addison Navarro", "Business Management Analyst", "New York", 50, 295000, true],
// ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, 200000, false],
// ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, 400000, true],
// ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, 110000, false],
// ["Danny Leon", "Computer Scientist", "Newark", 60, 220000, true],
// ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, 180000, false],
// ["Jesse Hall", "Business Analyst", "Baltimore", 44, 99000, true],
// ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, 90000, false],
// ["Terry Macdonald", "Commercial Specialist", "Miami", 39, 140000, true],
// ["Justice Mccarthy", "Attorney", "Tucson", 26, 330000, false],
// ["Silver Carey", "Computer Scientist", "Memphis", 47, 250000, true],
// ["Franky Miles", "Industrial Analyst", "Buffalo", 49, 190000, false],
// ["Glen Nixon", "Corporate Counselor", "Arlington", 44, 80000, true],
// ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, 45000, false],
// ["Mason Ray", "Computer Scientist", "San Francisco", 39, 142000, true]
];

const options = {
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

77 changes: 50 additions & 27 deletions src/MUIDataTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,6 @@ class MUIDataTable extends React.Component {
};

state = {
open: false,
announceText: null,
data: [],
displayData: [],
Expand Down Expand Up @@ -217,7 +216,10 @@ class MUIDataTable extends React.Component {
}

if (typeof columnOptions.customRender === "function") {
const funcResult = columnOptions.customRender(rowIndex, value);
// swap here for custom function

const tableMeta = this.getCustomRenderMeta(rowIndex, colIndex, value, [], columnData, this.state);
const funcResult = columnOptions.customRender(value, tableMeta);

if (React.isValidElement(funcResult) && funcResult.props.value) {
value = funcResult.props.value;
Expand Down Expand Up @@ -269,47 +271,62 @@ class MUIDataTable extends React.Component {
/*
* Build the table data used to display to the user (ie: after filter/search applied)
*/

isRowDisplayed(columns, row, filterList, searchText) {
let isFiltered = false,
isSearchFound = false;
computeDisplayRow(columns, row, rowIndex, filterList, searchText) {
let isFiltered = false;
let isSearchFound = false;
let displayRow = [];

for (let index = 0; index < row.length; index++) {
let column = row[index];
let columnDisplay = row[index];
let columnValue = row[index];

if (columns[index].customRender) {
const funcResult = columns[index].customRender(index, column);
column =
const tableMeta = this.getCustomRenderMeta(rowIndex, index, row, columns[index], this.state.data, {
...this.state,
filterList: filterList,
searchText: searchText,
});

const funcResult = columns[index].customRender(
columnValue,
tableMeta,
this.updateDataCol.bind(null, rowIndex, index),
);
columnDisplay = funcResult;

/* drill down to get the value of a cell */
columnValue =
typeof funcResult === "string"
? funcResult
: funcResult.props && funcResult.props.value
? funcResult.props.value
: column;
}

if (filterList[index].length && filterList[index].indexOf(column) < 0) {
displayRow.push(columnDisplay);

if (filterList[index].length && filterList[index].indexOf(columnValue) < 0) {
isFiltered = true;
break;
}

const searchCase = !this.options.caseSensitive ? column.toString().toLowerCase() : column.toString();
const searchCase = !this.options.caseSensitive ? columnValue.toString().toLowerCase() : columnValue.toString();

if (searchText && searchCase.indexOf(searchText.toLowerCase()) >= 0) {
isSearchFound = true;
break;
}
}

if (isFiltered || (searchText && !isSearchFound)) return false;
else return true;
if (isFiltered || (searchText && !isSearchFound)) return null;
else return displayRow;
}

updateDataCol = (row, index, value) => {
this.setState(prevState => {
let changedData = cloneDeep(prevState.data);
let filterData = cloneDeep(prevState.filterData);

const funcResult = prevState.columns[index].customRender(index, value);
const tableMeta = this.getCustomRenderMeta(row, index, row, prevState.columns[index], prevState.data, prevState);
const funcResult = prevState.columns[index].customRender(value, tableMeta);

const filterValue =
React.isValidElement(funcResult) && funcResult.props.value
Expand All @@ -319,7 +336,7 @@ class MUIDataTable extends React.Component {
const prevFilterIndex = filterData[index].indexOf(filterValue);
filterData[index].splice(prevFilterIndex, 1, filterValue);

changedData[row][index] = value;
changedData[row].data[index] = value;

if (this.options.sortFilterList) {
const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
Expand All @@ -334,20 +351,29 @@ class MUIDataTable extends React.Component {
});
};

getCustomRenderMeta = (rowIndex, colIndex, rowData, columnData, tableData, curState) => {
const { columns, data, displayData, filterData, ...tableState } = curState;

return {
rowIndex: rowIndex,
columnIndex: colIndex,
columnData: columnData,
rowData: rowData,
tableData: tableData,
tableState: tableState,
};
};

getDisplayData(columns, data, filterList, searchText) {
let newRows = [];

for (let index = 0; index < data.length; index++) {
const value = data[index].data;
if (this.isRowDisplayed(columns, value, filterList, searchText)) {
const columnData = columns.map((column, colIndex) => {
return typeof column.customRender === "function"
? column.customRender(index, value[colIndex], this.updateDataCol.bind(null, index, colIndex))
: value[colIndex];
});
const displayRow = this.computeDisplayRow(columns, value, index, filterList, searchText);

if (displayRow) {
newRows.push({
data: columnData,
data: displayRow,
dataIndex: data[index].index,
});
}
Expand Down Expand Up @@ -607,9 +633,6 @@ class MUIDataTable extends React.Component {
(order === "asc" ? -1 : 1);
}

//
// revisit if this can be optimzed
//
sortTable(data, col, order) {
let sortedData = data.map((row, sIndex) => ({
data: row.data[col],
Expand Down
36 changes: 19 additions & 17 deletions test/MUIDataTable.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ describe("<MUIDataTable />", function() {
let displayData;
let columns;
let tableData;
let renderCities = (index, value, updateValue) => (
<Cities value={value} index={index} change={event => updateValue(event)} />
let renderCities = (value, tableMeta, updateValueFn) => (
<Cities value={value} index={tableMeta.rowIndex} change={event => updateValueFn(event)} />
);
let renderName = (index, value) => value.split(" ")[1] + ", " + value.split(" ")[0];
let renderName = value => value.split(" ")[1] + ", " + value.split(" ")[0];

before(() => {
columns = [
Expand All @@ -35,27 +35,27 @@ describe("<MUIDataTable />", function() {
// internal table data built from source data provided
displayData = JSON.stringify([
{
data: ["James, Joe", "Test Corp", renderCities(0, "Yonkers"), "NY"],
data: ["James, Joe", "Test Corp", renderCities("Yonkers", { rowIndex: 0 }), "NY"],
dataIndex: 0,
},
{
data: ["Walsh, John", "Test Corp", renderCities(1, "Hartford"), "CT"],
data: ["Walsh, John", "Test Corp", renderCities("Hartford", { rowIndex: 1 }), "CT"],
dataIndex: 1,
},
{
data: ["Herm, Bob", "Test Corp", renderCities(2, "Tampa"), "FL"],
data: ["Herm, Bob", "Test Corp", renderCities("Tampa", { rowIndex: 2 }), "FL"],
dataIndex: 2,
},
{
data: ["Houston, James", "Test Corp", renderCities(3, "Dallas"), "TX"],
data: ["Houston, James", "Test Corp", renderCities("Dallas", { rowIndex: 3 }), "TX"],
dataIndex: 3,
},
]);
tableData = [
{ index: 0, data: ["James, Joe", "Test Corp", renderCities(0, "Yonkers"), "NY"] },
{ index: 1, data: ["Walsh, John", "Test Corp", renderCities(1, "Hartford"), "CT"] },
{ index: 2, data: ["Herm, Bob", "Test Corp", renderCities(2, "Tampa"), "FL"] },
{ index: 3, data: ["Houston, James", "Test Corp", renderCities(3, "Dallas"), "TX"] },
{ index: 0, data: ["James, Joe", "Test Corp", renderCities("Yonkers", { rowIndex: 0 }), "NY"] },
{ index: 1, data: ["Walsh, John", "Test Corp", renderCities("Hartford", { rowIndex: 1 }), "CT"] },
{ index: 2, data: ["Herm, Bob", "Test Corp", renderCities("Tampa", { rowIndex: 2 }), "FL"] },
{ index: 3, data: ["Houston, James", "Test Corp", renderCities("Dallas", { rowIndex: 3 }), "TX"] },
];
renderCities = renderCities;
renderName = renderName;
Expand Down Expand Up @@ -292,9 +292,11 @@ describe("<MUIDataTable />", function() {
instance.searchTextUpdate("Joe");
table.update();
const state = table.state();
console.log("###");
console.log(state.displayData);

const expectedResult = JSON.stringify([
{ data: ["James, Joe", "Test Corp", renderCities(0, "Yonkers"), "NY"], dataIndex: 0 },
{ data: ["James, Joe", "Test Corp", renderCities("Yonkers", { rowIndex: 0 }), "NY"], dataIndex: 0 },
]);

assert.deepEqual(JSON.stringify(state.displayData), expectedResult);
Expand All @@ -309,10 +311,10 @@ describe("<MUIDataTable />", function() {
const state = shallowWrapper.state();

const expectedResult = JSON.stringify([
{ data: ["Herm, Bob", "Test Corp", renderCities(0, "Tampa"), "FL"], dataIndex: 2 },
{ data: ["Houston, James", "Test Corp", renderCities(1, "Dallas"), "TX"], dataIndex: 3 },
{ data: ["James, Joe", "Test Corp", renderCities(2, "Yonkers"), "NY"], dataIndex: 0 },
{ data: ["Walsh, John", "Test Corp", renderCities(3, "Hartford"), "CT"], dataIndex: 1 },
{ data: ["Herm, Bob", "Test Corp", renderCities("Tampa", { rowIndex: 0 }), "FL"], dataIndex: 2 },
{ data: ["Houston, James", "Test Corp", renderCities("Dallas", { rowIndex: 1 }), "TX"], dataIndex: 3 },
{ data: ["James, Joe", "Test Corp", renderCities("Yonkers", { rowIndex: 2 }), "NY"], dataIndex: 0 },
{ data: ["Walsh, John", "Test Corp", renderCities("Hartford", { rowIndex: 3 }), "CT"], dataIndex: 1 },
]);

assert.deepEqual(JSON.stringify(state.displayData), expectedResult);
Expand Down Expand Up @@ -405,6 +407,6 @@ describe("<MUIDataTable />", function() {
shallowWrapper.update();

const state = shallowWrapper.state();
assert.deepEqual(state.data[0][2], "Las Vegas");
assert.deepEqual(state.data[0].data[2], "Las Vegas");
});
});
2 changes: 1 addition & 1 deletion webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const webpack = require('webpack');

module.exports = {
entry: {
app: "./examples/customize-toolbarselect/index.js"
app: "./examples/component/index.js"
},
stats: "verbose",
context: __dirname,
Expand Down

0 comments on commit ee87dfc

Please sign in to comment.