Can we put a footer or a double hearder to show the total?

[ccoat2]

I'm trying to make a total row which should be irremovable. Need free to reply if you have some idea ^^

[pbeshai]

Yea, I've thought of this historically as "auxiliary data"-- rows you can put at the bottom of the table persistently. Perhaps I'll try to think of a friendlier name and put it in.

[pbeshai]

Added in 0.1.8.

See:

• http://pbeshai.github.io/react-taco-table/examples.html#example-bottom-data
• http://pbeshai.github.io/react-taco-table/examples.html#example-bottom-data-multi
• http://pbeshai.github.io/react-taco-table/examples.html#example-bottom-data-array

[ccoat2]

I see all of that but it's doesn't work do I miss something? You juste have to had a bottomDataRender in the colums data and add bottomData in the tacoTable?

[pbeshai]

Simplest way to get it working is to set bottomData={true} on the TacoTable component and then to provide bottomDataRender functions to the column definitions. Maybe you can share your code? Maybe I didn't deploy it right. In my examples I showed using column summarizers for the values in the bottom row and using explicitly passed in data (via bottomData={arrayOfData})

[ccoat2]

Yes if that doesn't bother you

I have a create column function thats works and i added the bottomDataRender and the tacoTable which use the columns created Sorry for the code dont focus on it the important is that i log my columns to see what is in them and I have good object like "Object bottomDataRender : bottomDataRender(columnSummary, column, rowData, tableData, columns) header:"346 - KERKRADE" id:"TURNOVER346" plugins:Object renderer:formatNombre(nombre) summarize:undefined tdClassName:tdClassName(cellData, columnSummary, column, rowData, highlightedColumn, highlightedRow, rowNumber, tableData) tdStyle:tdStyle(cellData, columnSummary, column, rowData, highlightedColumn, highlightedRow, rowNumber, tableData) thClassName:"" type:"Number" value:value(rowData) proto : Object"

the taco component:

" <TacoTable columns={columns} data={tableData.transformData} plugins={plugins} columnHighlighting={false} rowHighlighting onRowClick={clickCallback} sortable bottomData={true} />"

the function which create the columns:

"const createColumns = (parameters, byRow) => { let labels = []; let rowTotal = []; let columns = [{ id: 'level', type: DataType.String, value: rowData => rowData.level, header: parameters.label, sortType: DataType.Number, bottomDataRender: 'TOTAL', sortValue: cellData => cellData.split(' - ')[0], }]; for (let i = 0; i < parameters.json.length; i++) { rowTotal.push(parameters.kpi + parameters.json[i].idStore); columns.push({ id: parameters.kpi + parameters.json[i].idStore, type: DataType.Number, header: getLabelStore(parameters.json[i].idStore, parameters.list), summarize: Summarizers.meanSummarizer, bottomDataRender: (columnSummary, column, rowData, tableData, columns) => { return column.renderer(columnSummary.sum); }, value: rowData => rowData[parameters.kpi + parameters.json[i].idStore], renderer: formatNombre, thClassName: (parameters.json[i].idStore === parameters.storeDecath) ? 'selected' : '', tdClassName: (cellData, columnSummary, column, rowData, highlightedColumn, highlightedRow, rowNumber, tableData) => { var style = ''; if (cellData == undefined) { style = style + 'no-data-cell '; }

    if (parameters.json[i].idStore == parameters.storeDecath) {
      style = style + 'selected ';
    }

    if (rowNumber == 0) {
      style = style + 'first-row ';
    }

    if (rowNumber == tableData.length - 1) {
      style = style + 'last-row ';
    }

    return style;
  },
  tdStyle: (cellData, columnSummary, column, rowData, highlightedColumn, highlightedRow, rowNumber, tableData) => {
    if (cellData === undefined) {
      return {
        textColor: 'white',
        backgroundColor: 'white'
      };
    }
    if (byRow) {
      return getRgbaHeatmap(cellData, columnSummary, column, rowData, highlightedColumn, highlightedRow, rowNumber, tableData, parameters.list);
    }
  },
  plugins: {
    heatmap: {
      highlight: 'always',
      colorScheme: 'YlOrRd',
    },

  },
});

if (parameters.json[i].productKpisList !== null) {
  for (let j = 0; j < parameters.json[i].productKpisList.length; j++) {
    const labelCourant = parameters.json[i].productKpisList[j].id.split(':')[1] + ' - ' + parameters.json[i].productKpisList[j].label;
    putLabel(labels, labelCourant);
  }
}
if (labels.length === 0) {
  return (constants.STATUS_NO_DATA);
}

} return { columns, labels };

}"

[ccoat2]

I see that I have the summarize element undefined maybe it's the reason why that doesn't work

[pbeshai]

Right, if you want a column summary to use in the bottom row, you need to specify summarize on the column definition. Otherwise, you can calculate whatever you want in the bottomDataRender function. For example, try returning 10 from one of them and it should render 10 in the row.

[ccoat2]

Yes i understand but i already try it it wasn't work

[pbeshai]

If you can explain the error you're getting and if the bottom row shows up at all, it would be helpful. Try this example:

import React from 'react';
import { TacoTable, DataType } from 'react-taco-table';
import 'react-taco-table/dist/react-taco-table.css';

const columns = [
  {
    id: 'name',
    type: DataType.String,
    bottomDataRender: 'Label',
  },
  {
    id: 'value',
    type: DataType.Number,
    bottomDataRender: () => 15,
  },
];

class MinimalTableExample extends React.Component {
  render() {
    const data = [{ name: 'one', value: 1 }, { name: 'two', value: 2 }];

    return (
      <TacoTable
        columns={columns}
        data={data}
        fullWidth={false}
        bottomData
      />
    );
  }
}

export default MinimalTableExample;

It should produce:

[pbeshai]

Make sure you're using v0.1.8 too!

[ccoat2]

Thank you for the support I don't know why but it works perfectly now without touching anything ^^. I have to manage to render the line unclickable but it(s all fine thank you again

[ccoat2]

And the bottomData line has the heatmap color on it...

[pbeshai]

@ccoat2 Can you create separate issues for the click issue and the heatmap?