Given the follow example: https://codesandbox.io/s/l49mrmvj67
Will it be possible to add a custom footer that will sum the current page Salary column and display it in the footer?
Thanks for the help.
For simplicity I put everything in the same component:
import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import { TableFooter, TableCell, TableRow } from "#material-ui/core";
class App extends React.Component {
render() {
const columns = ["Name", "Title", "Location", "Age", "Salary"];
let data = [
["Gabby George", "Business Analyst", "Minneapolis", 30, 100000],
["Aiden Lloyd", "Business Consultant", "Dallas", 55, 200000],
["Jaden Collins", "Attorney", "Santa Ana", 27, 500000],
["Franky Rees", "Business Analyst", "St. Petersburg", 22, 50000],
["Aaren Rose", "Business Consultant", "Toledo", 28, 75000],
["Blake Duncan", "Business Management Analyst", "San Diego", 65, 94000],
["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, 210000],
["Lane Wilson", "Commercial Specialist", "Omaha", 19, 65000],
["Robin Duncan", "Business Analyst", "Los Angeles", 20, 77000],
["Mel Brooks", "Business Consultant", "Oklahoma City", 37, 135000],
["Harper White", "Attorney", "Pittsburgh", 52, 420000],
["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, 150000],
["Frankie Long", "Industrial Analyst", "Austin", 31, 170000],
["Brynn Robbins", "Business Analyst", "Norfolk", 22, 90000],
["Justice Mann", "Business Consultant", "Chicago", 24, 133000],
[
"Addison Navarro",
"Business Management Analyst",
"New York",
50,
295000
],
["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, 200000],
["Eli Mejia", "Commercial Specialist", "Long Beach", 65, 400000],
["Gene Leblanc", "Industrial Analyst", "Hartford", 34, 110000],
["Danny Leon", "Computer Scientist", "Newark", 60, 220000],
["Lane Lee", "Corporate Counselor", "Cincinnati", 52, 180000],
["Jesse Hall", "Business Analyst", "Baltimore", 44, 99000],
["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, 90000],
["Terry Macdonald", "Commercial Specialist", "Miami", 39, 140000],
["Justice Mccarthy", "Attorney", "Tucson", 26, 330000],
["Silver Carey", "Computer Scientist", "Memphis", 47, 250000],
["Franky Miles", "Industrial Analyst", "Buffalo", 49, 190000],
["Glen Nixon", "Corporate Counselor", "Arlington", 44, 80000],
[
"Gabby Strickland",
"Business Process Consultant",
"Scottsdale",
26,
45000
],
["Mason Ray", "Computer Scientist", "San Francisco", 39, 142000]
];
const options = {
filter: true,
selectableRows: true,
filterType: "dropdown",
rowsPerPage: 3,
customFooter: (
count,
page,
rowsPerPage,
changeRowsPerPage,
changePage
) => {
const startIndex = page * rowsPerPage;
const endIndex = (page + 1) * rowsPerPage;
return (
<TableFooter>
<TableRow>
<TableCell colSpan={6}>
Total Salery for current page: {sumSalery(startIndex, endIndex)}
</TableCell>
</TableRow>
</TableFooter>
);
}
};
const sumSalery = (startIndex, endIndex) => {
return data
.slice(startIndex, endIndex)
.map(a => a[4])
.reduce((total, salery) => (total += salery), 0);
};
return (
<MUIDataTable
title={"ACME Employee list"}
data={data}
columns={columns}
options={options}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
In case of the salery you just need to find the start and end index of the data object that is currently displayed (the current page). Using these two you can simply add up the saleries of the sub array.
If you have any questions let me know.
You can use customTableBodyFooterRender in mui datatable options to create custom footer which is responsive with the columns.
I have created a table footer for total marks using mui datatable.
https://codesandbox.io/s/mui-datatable-custom-footer-rfu9zk
Eg:
https://i.stack.imgur.com/E8lg8.png
Related
So I have successfully managed to parse the JSON data shown below:
[
{
"IsRecentlyVerified": false,
"ID": 136888,
"UUID": "254B0B07-E7FC-4B4B-A37C-899BCB9D7261",
"DataProviderID": 18,
"DataProvidersReference": "0a9fdbb17feb6ccb7ec405cfb85222c4",
"OperatorID": 3,
"UsageTypeID": 1,
"AddressInfo": {
"ID": 137234,
"Title": "Ballee Road Park & Share",
"AddressLine1": "Ballee Road",
"Town": "Ballymena",
"Postcode": "BT42 2HD",
"CountryID": 1,
"Latitude": 54.844648,
"Longitude": -6.273606,
"AccessComments": "Ballee Road Park and Share, Ballymena",
"RelatedURL": "http://pod-point.com",
"Distance": 3.812940207797744,
"DistanceUnit": 2
},
"Connections": [
{
"ID": 191571,
"ConnectionTypeID": 25,
"Reference": "1",
"StatusTypeID": 50,
"LevelID": 2,
"Amps": 32,
"Voltage": 400,
"PowerKW": 22,
"CurrentTypeID": 20
},
{
"ID": 191572,
"ConnectionTypeID": 25,
"Reference": "2",
"StatusTypeID": 50,
"LevelID": 2,
"Amps": 32,
"Voltage": 400,
"PowerKW": 22,
"CurrentTypeID": 20
}
],
"StatusTypeID": 0,
"DateLastStatusUpdate": "2020-02-21T15:15:00Z",
"MetadataValues": [
{
"ID": 6740,
"MetadataFieldID": 4,
"ItemValue": "Contains public sector information licensed under the Open Government Licence v2.0. http://www.nationalarchives.gov.uk/doc/open-government-licence/version/2/"
}
],
"DataQualityLevel": 3,
"DateCreated": "2019-12-24T05:23:00Z",
"SubmissionStatusTypeID": 100
},
{
"IsRecentlyVerified": false,
"ID": 48636,
"UUID": "69C483E6-E271-4315-A56F-E3747EA59D52",
"DataProviderID": 1,
"OperatorID": 93,
"OperatorsReference": "SC99",
"UsageTypeID": 4,
"UsageCost": "Free",
"AddressInfo": {
"ID": 48982,
"Title": "Dunsilly Park and Ride, Dunsilly Roundabout",
"AddressLine1": "Dunsilly Park and Ride, Dunsilly Roundabout,",
"Town": "Antrim",
"Postcode": "BT41 2JH",
"CountryID": 1,
"Latitude": 54.74636,
"Longitude": -6.234244,
"Distance": 4.081140533868653,
"DistanceUnit": 2
},
"Connections": [
{
"ID": 60091,
"ConnectionTypeID": 25,
"Reference": "1",
"StatusTypeID": 50,
"LevelID": 2,
"Amps": 32,
"Voltage": 400,
"PowerKW": 22,
"CurrentTypeID": 20,
"Quantity": 2
}
],
With the data struct file:
import Foundation
struct PublicCharger: Decodable {
let AddressInfo: AddressInfo
let Connections: [Connections]
}
struct AddressInfo: Decodable {
let Title: String
let Latitude: Double
let Longitude: Double
}
struct Connections: Decodable {
let StatusTypeID: Int
let ConnectionTypeID: Int
let PowerKW: Int
}
In my View Controller:
let decodedData = try decoder.decode([PublicCharger].self, from: data)
if !decodedData.isEmpty {
//print("Ran")
//print("Data: \(decodedData[0].AddressInfo.Title)")
let count = 0...10
for i in count {
publicChargerTitle.append(decodedData[i].AddressInfo.Title)
publicChargerLatitude.append(decodedData[i].AddressInfo.Latitude)
publicChargerLongitude.append(decodedData[i].AddressInfo.Longitude)
publicChargerStatus1.append(decodedData[i].Connections[0].StatusTypeID)
publicChargerStatus2.append(decodedData[i].Connections[1].StatusTypeID)
publicChargerConnector1.append(decodedData[i].Connections[0].ConnectionTypeID)
publicChargerConnector2.append(decodedData[i].Connections[1].ConnectionTypeID)
publicChargerKW1.append(decodedData[i].Connections[0].PowerKW)
publicChargerKW2.append(decodedData[i].Connections[1].PowerKW)
}
This works and adds the data to its own array.
The issue I'm seeing is not all chargers have the same number of connections. So when parsed the arrays are not matching each other at the end. Instead of skipping that array allocation with the next charger data, is there a way I can instead insert Null into the array to hold its place?
I have looked around and haven't yet found a clear solution to this issue. Any help would be greatly appreciated. API data from: https://api.openchargemap.io/
Thanks
How to quantity increase decrease with input number with mapping all separate product IDs in react js?
[ {
"id": 15,
"name": "Kitchen Refrigerator (inc in Premium & Ultimate plans)",
"price": "4.16"
},
{
"id": 16,
"name": "Enhanced External Pipe Coverage",
"price": "8.33"
},
{
"id": 17,
"name": "Air Conditioning (additional unit)",
"price": "7.08"
},
{
"id": 18,
"name": "Additional Washer Dryer (1 set incl in Ultimate Plans)",
"price": "7.08"
}
]
I think this is your mean , if not Please explain more
const [value , setValue] = useState()
const [newItems, setNewItems] = useState([])
const items = [{
id: 15,
name: "Kitchen Refrigerator (inc in Premium & Ultimate plans)",
price: "4.16"
},
{
id: 16,
name: "Enhanced External Pipe Coverage",
price: "8.33"
},
{
id: 17,
name: "Air Conditioning (additional unit)",
price: "7.08"
},
{
id: 18,
name: "Additional Washer Dryer (1 set incl in Ultimate Plans)",
price: "7.08"
}
]
const removeItem = () => {
setNewItems(items.filter(i => i.id !== value))
}
<input onChange={(e)=> setValue(e.target.value)} />
<button onClick={()=> removeItem() />
I'm trying to work out the logic and I'm a little stuck. I have an array of objects that look like this.
{
"id": 5,
"name": "Mole's Town",
"lat": 33,
"lng": 18.5,
"type": "village"
}
There are several different types, nine total. Village, Town, City etc. I am trying to make a component for each of these nine types, and then filter all the objects that match that certain type into the appropriate LayerControl group.
This is what I have so far, but this just renders the Marker component but doesn't take into account the type.
const stuff = data.map((location) =>
<Marker key={location.id} position={[location.lat, location.lng]} icon=
{locationIcon}>
<Tooltip permanent direction="bottom" opacity={.6}>
{location.name}
</Tooltip>
</Marker>
)
You could create an object to map each type with the corresponding component. Something like this will work:
const LayerVillage = ({ position, name }) => (
<Marker position={position} icon={locationIcon}>
<TooltipComponent permanent direction="bottom" opacity={0.6}>
{name}
</TooltipComponent>
</Marker>
);
const layerComponentsByType = {
village: LayerVillage,
town: LayerTown
};
const stuff = data.map(location => {
const LayerControl = layerComponentsByType[location.type];
return (
<LayerControl
key={location.id}
position={[location.lat, location.lng]}
name={location.name}
/>
);
});
Another possibility is the following:
<LayerControl
key={location.id}
{...location}
/>
With this way, you would receive the location object key-value pairs as properties.
Also, you could have a default component, because location.type could not be a property of layerComponentsByType:
const LayerControl = layerComponentsByType[location.type] || DefaultLayerControl;
You can use a Set to find all the unique types in your array :
const data = [
{
"id": 5,
"name": "Mole's Town",
"lat": 15,
"lng": 18.5,
"type": "village"
},
{
"id": 783,
"name": "Mole's Town",
"lat": 3,
"lng": 18.5,
"type": "village"
},
{
"id": 75,
"name": "Mole's Town",
"lat": 33,
"lng": 8.55,
"type": "town"
},
{
"id": 43,
"name": "Mole's Town",
"lat": 33,
"lng": 15,
"type": "city"
},
{
"id": 443,
"name": "Mole's Town",
"lat": 35,
"lng": 725,
"type": "city"
},
{
"id": 4543,
"name": "Mole's Town",
"lat": 76,
"lng": 2,
"type": "city"
}
]
const types = [...new Set(data.map(loc => loc.type))]
console.log(types)
Once you have them, in your render function, map them with your LayerControl while filtering every location having the same type and send it as a prop :
types.map(type => <LayerControl key={type} locations={data.filter(loc => loc.type === type)}/>)
Then in your LayerControl render, map every received locations to the code you gave in your question :
this.props.locations.map(({id, lat, lng, name}) => //Deconstructing every location to make your code more readable
<Marker key={id} position={[lat, lng]} icon=
{locationIcon}>
<Tooltip permanent direction="bottom" opacity={.6}>
{name}
</Tooltip>
</Marker>
)
Below is the data i get from the rest API
{
"memberdetails":[
{
"id":46,
"customername":"Zack",
"phoneno":"1323223232",
"nickname":"Zack",
"regdate":"2017-12-27 18:38:36.185829",
"groupname":"Test group",
"regid":36,
"groupdesc":"Test Test test",
"groupicon":"new",
"tamount":"3100"
},
{
"id":46,
"customername":"Carol",
"phoneno":"254721493487",
"nickname":"Caro",
"regdate":"2017-12-28 23:47:22.317687",
"groupname":"Test",
"regid":36,
"groupdesc":"Test Test Test",
"groupicon":"new",
"tamount":"130"
}
]
}
From the above data i want to populate 2 arrays as i want to plot a graph in the below format. The lineChartData array should pick the tamount and the lineChartLabels Array should pick the customenames. Thank you.
public lineChartData:Array<any> = [{data: [15, 29, 24, 21, 26, 15, 10], label: 'Opening/Time'}];
public lineChartLabels:Array<any> = ["Dan","Were","Kibe","Zack","Evah","Chris","Jess"];
angular.module('testapp', [])
.controller('TestCtrl', function(){
this.inputData = {
"memberdetails": [
{
"id": 46,
"customername": "Zack ",
"phoneno": "1323223232",
"nickname": "Zack ",
"regdate": "2017-12-27 18:38:36.185829",
"groupname": "Test group ",
"regid": 36,
"groupdesc": "Test Test test ",
"groupicon": "new ",
"tamount": "3100"
},
{
"id": 46,
"customername": "Carol ",
"phoneno": "254721493487",
"nickname": "Caro ",
"regdate": "2017-12-28 23:47:22.317687",
"groupname": "Test ",
"regid": 36,
"groupdesc": "Test Test Test ",
"groupicon": "new ",
"tamount": "130"
}
]
};
this.expectedOutput = {
"lineChartData": [
{
"data": [
15,
29,
24,
21,
26,
15,
10
],
"label": "Opening\/Time"
}
],
"lineChartLabels": [
"Dan",
"Were",
"Kibe",
"Zack",
"Evah",
"Chris",
"Jess"
]
}
this.computedLineChartData = [{data:[],label:"Opening\/Time"}];
this.computedLineChartLabels = [];
for(var i=0;i<this.inputData.memberdetails.length; i++){
var curMember = this.inputData.memberdetails[i];
this.computedLineChartData[0].data.push(curMember.tamount);
this.computedLineChartLabels.push(curMember.customername);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app="testapp" ng-controller="TestCtrl as tc">
<pre>{{tc|json}}</pre>
</div>
In AngularJs we have function like angular.fromJson(data) which returns output in form of array . So you can easily convert json to array.
I have this filter:
$http.get('data.json').then(function(response){
$scope.dataCopy = response.data;
$scope.detMaq = $filter('filter')(angular.copy($scope.dataCopy), {index:hielo, frecuencia:frec, prod_24_h_kg:peso }, false);
console.log($scope.detMaq);
});
And I'm building a few div's full of info with data from that data.json.
However, let's say that peso is 1.000, so in my filter I want only data that match completely to show up. This however it'll bring up data with 10.000 also, because the filter is not exact.
If I put true instead of false in the filter, the page will always be blank. even though it should bring information.
Am I missing something? Since it's a triple filter should I put 3 true's?
Here's the json.data
[{
"codigo": 21420,
"desc": "......",
"desc_n": "......",
"sistema": "DUCHAS",
"material_carroceria": "A.....",
"refrigerada": "AIRE",
"modelo_cubito_nombre": "ALFA",
"modelo_cubito_nombre_comercial": "",
"modelo_cubito_gr": 17,
"prod_24_h_kg": 22,
"almacen_cubitos_kg": "6",
"almacen_cubitos_cubitos": 400,
"ciclo_cubitos": 18,
"datos_comerciales_ciclo_cubitos": 18,
"compresor_cv": " 1/5",
"remota": null,
"potencia_w_1": 340,
"potencia_w_2": 270,
"voltaje": 220,
"frecuencia": 50,
"fases": "I",
"uk": null,
"gas_tipo": "R404a",
"gas_carga_gr": 180,
"mse_ancho": 350,
"mse_alto": 590,
"mse_fondo": 475,
"mse_alto_con_patas": "SIN PATAS",
"mce_ancho": 430,
"mce_alto": 720,
"mce_fondo": 540,
"peso_neto": 32,
"peso_bruto": 36,
"index": 99,
"enlace_catalogo": "..........",
"familia": ".........."
}, {
"codigo": 21421,
"desc": "...........",
"desc_n": "..........",
"sistema": "DUCHAS",
"material_carroceria": "ACERO INOXIDABLE AISI 304",
"refrigerada": "AGUA",
"modelo_cubito_nombre": "ALFA",
"modelo_cubito_nombre_comercial": "",
"modelo_cubito_gr": 17,
"prod_24_h_kg": 24,
"almacen_cubitos_kg": "6",
"almacen_cubitos_cubitos": 400,
"ciclo_cubitos": 18,
"datos_comerciales_ciclo_cubitos": 18,
"compresor_cv": " 1/5",
"remota": null,
"potencia_w_1": 340,
"potencia_w_2": 210,
"voltaje": 220,
"frecuencia": 50,
"fases": "I",
"uk": null,
"gas_tipo": "R404a",
"gas_carga_gr": 140,
"mse_ancho": 350,
"mse_alto": 590,
"mse_fondo": 475,
"mse_alto_con_patas": "SIN PATAS",
"mce_ancho": 430,
"mce_alto": 720,
"mce_fondo": 540,
"peso_neto": 32,
"peso_bruto": 36,
"index": 99,
"enlace_catalogo": "....",
"familia": "....."
}]