I am using ag-grid-react and would like to sortable columns in it.
When I put enableSorting=true on , it enables sorting on all the columns. I don't want all columns to be sortable and instead would like sorting to be driven from the columnDef.(E.g sort the column only if its respective columnDef contain sortable=true.
Attaching the sample and columnDef with codesandbox link
<AgGridReact
columnDefs={this.state.columnDefs}
enableColResize={true}
onGridReady={this.onGridReady.bind(this)}
rowData={this.state.rowData}
enableSorting={true}
/>
columnDefs: [
{
headerName: "Athlete",
field: "athlete",
width: 150,
suppressSizeToFit: true
},
{
headerName: "Age",
field: "age",
width: 90,
minWidth: 50,
maxWidth: 100
},
{
headerName: "Country",
field: "country",
width: 120
},
{
headerName: "Year",
field: "year",
width: 90
},
{
headerName: "Date",
field: "date",
width: 110
},
{
headerName: "Sport",
field: "sport",
width: 110
},
{
headerName: "Gold",
field: "gold",
width: 100
},
{
headerName: "Silver",
field: "silver",
width: 100
},
{
headerName: "Bronze",
field: "bronze",
width: 100
},
{
headerName: "Total",
field: "total",
width: 100
}
],
Please refer : https://codesandbox.io/s/jz317zpo43
Please suggest what needs to be added.
Please check it here. maybe it will help. https://www.ag-grid.com/javascript-grid-sorting/
only enable sorting for a particular column
gridOptions: {
// enable sorting on name and age columns only
columnDefs: [
{field: 'name', sortable: true},
{field: 'age', sortable: true},
{field: 'address'},
]
}
I was able to achieve it by upgrading the ag-grid-react and ag-grid-community versions to 20.0.0. Refer AG-644 in https://www.ag-grid.com/ag-grid-changelog/
Related
I am having a hard time adding custom buttons per row in the DataGrid component.
This is my code:
const columns = [
{ field: 'model_id', headerName: 'ID', width: 70, sortable: false },
{ field: 'model_code', headerName: 'Model Code', width: 130 },
{ field: 'model_description', headerName: 'Description', width: 400 },
{ field: 'actions', headerName: 'Actions', width: 400 }
];
DataGrid:
<DataGrid
rows={models}
columns={columns}
getRowId={(row) => row.model_id}
pageSize={5}
rowsPerPageOptions={[5]}
checkboxSelection />
What I want per row:
You can use renderCell function in column definition array like this:
const onButtonClick = (e, row) => {
e.stopPropagation();
//do whatever you want with the row
};
const columns = [
{ field: 'model_id', headerName: 'ID', width: 70, sortable: false },
{ field: 'model_code', headerName: 'Model Code', width: 130 },
{ field: 'model_description', headerName: 'Description', width: 400 },
{ field: 'actions', headerName: 'Actions', width: 400, renderCell: (params) => {
return (
<Button
onClick={(e) => onButtonClick(e, params.row)}
variant="contained"
>
Delete
</Button>
);
} }
];
You can take a look at this sandbox for a live working example of this solution.
Error: Material-UI: The data grid component requires all rows to have a unique id property. I am seeing when I call the table.
Here is my code. I know that the _turbineId field is unique in the dataset.
Here is how I have the table defined.
const columns = [
{
field: "siteName",
headerName: "Wind Farm",
width: 150,
editable: true,
},
{
field: "turbineName",
headerName: "Turbine Name",
width: 150,
editable: true,
},
{
field: "controller",
headerName: "Controller Type",
type: "number",
width: 110,
editable: true,
},
{
field: "swVersion",
headerName: "Software Version",
type: "number",
width: 110,
editable: true,
},
{
field: "location",
headerName: "Country",
type: "number",
width: 110,
editable: true,
},
{
field: "_turbineId",
headerName: "Turbine Name",
type: "number",
width: 110,
},
];
Here is how I define the rows
const rows = windFarmData.map((data) => [
{
siteName: data.SiteName,
turbineName: data.TurbineName,
controller: data.Controller,
swVersion: data.SoftwareVersion,
location: data.Country,
_turbineId: data.TechnicalId,
},
]);
Here is the datagrid
export default function DataTable() {
return (
<div style={{ height: 400, width: "100%" }}>
<DataGrid
getRowId={(r) => r._turbineId}
rows={rows}
columns={columns}
pageSize={5}
checkboxSelection
disableSelectionOnClick
/>
</div>
);
}
I wonder if I have missed something or done something wrong.
It works now. I replaced this:
const rows = windFarmData.map((data) => [
{
siteName: data.SiteName,
turbineName: data.TurbineName,
controller: data.Controller,
swVersion: data.SoftwareVersion,
location: data.Country,
_turbineId: data.TechnicalId,
},
]);
with this:
const rows = sortWindFarmData;
I'm trying to display the data grid with all columns should take equal width to fit the parent component. but there is a blank space at the end which I'm not able to remove and cannot make columns to take auto width to fit page width.
can anyone please help me on this
https://codesandbox.io/s/musing-montalcini-tn04y
Include flex value for each column level like below,
const columns = [
{ field: "id", headerName: "ID", flex: 1 },
{ field: "firstName", headerName: "First name", flex: 1 },
{ field: "lastName", headerName: "Last name", flex: 1 },
{
field: "age",
headerName: "Age",
type: "number",
flex: 1
},
{
field: "fullName",
headerName: "Full name",
description: "This column has a value getter and is not sortable.",
sortable: false,
flex: 1,
valueGetter: (params) =>
`${params.getValue(params.id, "firstName") || ""} ${
params.getValue(params.id, "lastName") || ""
}`
}
];
codesandbox - https://codesandbox.io/s/dry-https-7pp93?file=/src/App.js:266-850
in my case, I include flex as well as minWidth property which helps the table show full data in SM (small) and (XS) extra small devices.
const columns = [
{field: "id", hide: true},
{field: "transaction", headerName: "Transactions", minWidth: 330, flex: 1},
{field: "date", headerName: "Date", minWidth: 100, flex: 1},
{field: "type", headerName: "Type", minWidth: 100, flex: 1},
{field: "price", headerName: "Price", minWidth: 110, flex: 1},
{field: "gas", headerName: "Gas", minWidth: 110, flex: 1},
{field: "total", headerName: "Total", minWidth: 110, flex: 1} ]
I have a below column definitions:
{headerName: 'Country Group - No Renderer', field:'year', showRowGroup: 'year'},
{headerName: "Country", field: "country", width: 120, rowGroup: true},
{headerName: "Year", field: "year", width: 90, rowGroup: true},
{headerName: "Gold", field: "gold", width: 100, aggFunc: 'sum'},
{headerName: "Silver", field: "silver", width: 100, aggFunc: 'sum'},
{headerName: "Bronze", field: "bronze", width: 100, aggFunc: 'sum'}
Is there any way to show 'Country Group - No Renderer' column left to the auto grouped column along with aggregated columns when grid is in pivot mode?
Is there any possibility that we can achieve this with InMemoryModel?
Note: I am beginner to ag-grid and just now started playing with it.
Is there any way for make my ng-grid JUST SOME CELLS editable?
$scope.gridOptionsReports = {
data: 'Reports',
enableCellEdit: true,
columnDefs: [
{ field: 'Row', displayName: ' Row ', width: 40 },
{ field: 'OperationStatus', displayName: 'Operation', width: 120 },
{ field: 'Date', displayName: 'Date', width: 100 },
{ field: 'Consideration', displayName: 'Consideration', width: 80 },
{ field: 'Description', displayName: 'Description', width: 400 }
]
};
I want to make my Date and Description field editable.But now all of my fields are editable.
Thanks.