sccoreui
Version:
ui-sccore
126 lines (125 loc) • 5.86 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_2 = require("@ag-grid-community/react");
require("@ag-grid-community/styles/ag-grid.css");
require("@ag-grid-community/styles/ag-theme-quartz.css");
const core_1 = require("@ag-grid-community/core");
const row_grouping_1 = require("@ag-grid-enterprise/row-grouping");
const server_side_row_model_1 = require("@ag-grid-enterprise/server-side-row-model");
const range_selection_1 = require("@ag-grid-enterprise/range-selection");
const fakeServer_1 = require("./fakeServer");
core_1.ModuleRegistry.registerModules([
row_grouping_1.RowGroupingModule,
server_side_row_model_1.ServerSideRowModelModule,
range_selection_1.RangeSelectionModule,
]);
const getServerSideDatasource = (server) => {
return {
getRows: (params) => {
console.log("[Datasource] - rows requested by grid: ", params.request, params);
var response = server.getData(params.request);
console.log(response, "request to server");
// adding delay to simulate real server call
setTimeout(() => {
if (response.success) {
// call the success callback
params.success({
rowData: response.rows,
rowCount: response.lastRow,
});
}
else {
// inform the grid request failed
params.fail();
}
}, 1000);
},
};
};
console.log(getServerSideDatasource);
const GridComponent = () => {
const containerStyle = (0, react_1.useMemo)(() => ({ width: "1500px", height: "900px" }), []);
const gridStyle = (0, react_1.useMemo)(() => ({ height: "900px", width: "1500px" }), []);
const [columnDefs] = (0, react_1.useState)([
{
field: "country",
rowGroup: true,
hide: true,
editable: true,
filter: "agSetColumnFilter",
},
{ field: "athlete", editable: true, filter: "agSetColumnFilter" },
{ field: "age", editable: true, filter: "agSetColumnFilter" },
{ field: "sport", rowGroup: true, hide: true, editable: true },
{ field: "year", rowGroup: true, hide: true, editable: true },
{ field: "date", editable: true },
{ field: "gold", editable: true },
{ field: "silver" },
{ field: "bronze" },
{ field: "total" },
]);
const defaultColDef = (0, react_1.useMemo)(() => {
return {
flex: 1,
minWidth: 120,
};
}, []);
const autoGroupColumnDef = (0, react_1.useMemo)(() => {
return {
headerName: "Group",
field: "group",
cellRenderer: "agGroupCellRenderer",
editable: true,
cellRendererParams: {
suppressCount: true,
},
};
}, []);
const onGridReady = (0, react_1.useCallback)((params) => {
debugger;
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => {
// setup the fake server with entire dataset
var fakeServer = (0, fakeServer_1.FakeServer)(data, ["country", "sport"]);
// create datasource with a reference to the fake server
// var datasource = getServerSideDatasource(fakeServer);
const dataSource = {
getRows: (params) => {
console.log("[Datasource] - rows requested by grid: ", params.request, params);
var response = fakeServer.getData(params.request);
console.log(response, "request to server");
// adding delay to simulate real server call
setTimeout(() => {
if (response.success) {
console.log(response, "response from fake server");
// call the success callback
params.success({
rowData: response.rows,
rowCount: response.lastRow,
});
}
else {
// inform the grid request failed
params.fail();
}
}, 1000);
},
};
// console.log(datasource, 'data source passing');
// register the datasource with the grid
params.api.setGridOption("serverSideDatasource", dataSource);
});
}, []);
const fillOperation = (0, react_1.useCallback)((params) => {
console.log(params.column, "params columns", params);
if (params.column.getColId() === "country") {
return params.currentCellValue;
}
return params.values[params.values.length - 1];
}, []);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: containerStyle }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: gridStyle, className: "ag-theme-quartz" }, { children: (0, jsx_runtime_1.jsx)(react_2.AgGridReact, { columnDefs: columnDefs, defaultColDef: defaultColDef, autoGroupColumnDef: autoGroupColumnDef, rowModelType: "serverSide", cacheBlockSize: 10, onGridReady: onGridReady, suppressServerSideFullWidthLoadingRow: true, enableRangeSelection: true, enableFillHandle: true, fillOperation: fillOperation }) })) })));
};
exports.default = GridComponent;