Tengo una tabla bastante simple y actualmente estoy usando un formateador de calculadora inferior:
export let myTable = new Tabulator("#my-table", { columns:[ {title:"ID", field:"id", headerSort:false, visible:false, responsive:2}, {formatter:"rowSelection", titleFormatter:"rowSelection", align:"center", bottomCalc:"sum", hozAlign:"center", headerSort:false, cellClick:function(e, cell){ cell.getRow().toggleSelect(); }}, {title:"Name", field:"address", width:300, bottomCalc:"count"}, {title:"My Data", field:"mydata", bottomCalc:avNoOutsiders}, ], }); export let avNoOutsiders = function(values, data, calcParams){ // filter outliers let myArray = filterOutliers(values); // filter any null or falsy values let av = average(myArray); return av }El código no es muy importante, pero lo que me gustaría poder hacer es permitir que el usuario anule la selección de una fila para excluir el valor de este cálculo.
El problema es que no entiendo cómo acceder a la función isSelected() aquí, creo que solo puedo acceder a la row() . Puedo acceder a los values (todos los valores de la columna) pero no hay datos de selección allí, puedo acceder a los data : toda la tabla, pero no hay forma de determinar qué fila es, o si está seleccionada o no.
Mi dirección actual de pensamiento es
bottomCalcParams . No entiendo cómo haría esto. Esta función devuelve getRow() is not a function : function cellIsSelected(cell){ selected = cell.getRow().isSelected() return {isSelected:selected}; }o
var selectedRows = table.getSelectedRows() provoca un error circular si trato de poner eso en una función de cálculo de columna. Puedo hacer referencia a la tabla dentro de la tabla.¿Alguna idea de cómo puedo acceder a los datos de selección de filas para hacer un cálculo de columna?
Puede haber una manera más fácil, pero una forma de lograrlo sería crear una columna de marcador de posición oculta que se pueda actualizar a verdadero/falso al seleccionar/deseleccionar una fila. Luego puede usar los valores de esta columna oculta en su función bottomCalc para excluir las filas que no están seleccionadas. Aquí hay un ejemplo en el que seleccionar una fila volverá a activar el cálculo inferior y promediará la antigüedad de todas las selecciones:
const dataSet1 = [ { id: 1, name: 'Billy Bob', age: '21', gender: 'male' }, { id: 2, name: 'Mary May', age: '5', gender: 'female' }, { id: 3, name: 'Christine Lobowski', age: '42', gender: 'female' }, { id: 4, name: 'Brendon Philips', age: '80', gender: 'male' }, ] const calcAvg = (values, data, calcParams) => { let selected = data.filter((row) => row.isSelected) values = selected.map((i) => i.age) let avg = values.reduce((a, b) => Number(a) + Number(b), 0) / values.length return avg ? avg : '' } const table = new Tabulator('#table', { data: dataSet1, columns: [ { formatter: 'rowSelection', titleFormatter: 'rowSelection', cellClick: (e, cell) => { cell.getRow().toggleSelect() } }, { title: 'Name', field: 'name' }, { title: 'Age', field: 'age', bottomCalc: calcAvg }, { title: 'Gender', field: 'gender' }, { title: '', field: 'isSelected', visible: false } // Selection placeholder column ] }) const selection = (row) => { row.update({ isSelected: row.isSelected() }) table.recalc() } table.on('rowSelected', selection) table.on('rowDeselected', selection) <html> <head> <link href="https://unpkg.com/tabulator-tables@5.2.2/dist/css/tabulator.min.css" rel="stylesheet"> <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.2.2/dist/js/tabulator.min.js"></script> </head> <body> <div id="table"></div> </body> <html>La respuesta de @Tim me llevó al 95 % del camino.
Tenga en cuenta que algunas de sus respuestas no funcionan en Tabulator v4.9:
const selection = (row) => { row.update({ isSelected: row.isSelected() }) table.recalc() } table.on('rowSelected', selection) table.on('rowDeselected', selection) Pensé que encontrar una forma de evitar esto podría llevar más tiempo que actualizar, así que me sumergí y actualicé a 5.2.2, que fue menos doloroso de lo esperado. Tenía varias columnas para calcular, así que en lugar de ejecutar una función diferente para cada una, pasé el nombre del campo a la función a través de bottomCalcParams , así:
const calcAvg = (values, data, calcParams) => { let selected = data.filter((row) => row.isSelected) // Add your calcParams here: values = selected.map((i) => i[calcParams.field]) let avg = values.reduce((a, b) => Number(a) + Number(b), 0) / values.length return avg ? avg : '' } const table = new Tabulator('#table', { data: dataSet1, columns: [ { formatter: 'rowSelection', titleFormatter: 'rowSelection', cellClick: (e, cell) => { cell.getRow().toggleSelect() } }, { title: 'Name', field: 'name' }, { title: 'Age', field: 'age', bottomCalc: calcAvg, bottomCalcParams:{field:"age"} }, { title: 'Remaining Teeth', field: 'teeth', bottomCalc: calcAvg, bottomCalcParams:{field:"teeth"} }, { title: 'Personality Quirks', field: 'quirks', bottomCalc: calcAvg, bottomCalcParams:{field:"quirks"} }, { title: 'Gender', field: 'gender' }, { title: '', field: 'isSelected', visible: false } // Selection placeholder column ] })