sccoreui
Version:
ui-sccore
70 lines (69 loc) • 2.94 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
require("@ag-grid-community/styles/ag-grid.css");
require("@ag-grid-community/styles/ag-theme-quartz.css");
const AgGrid_1 = tslib_1.__importDefault(require("../../components/ag-grid/AgGrid"));
const dummyData_1 = require("../RowGroupingServerside/dummyData");
const GridExample = () => {
const [columnDefs] = (0, react_1.useState)([
{ field: "employeeId", hide: true },
{ field: "employeeName", hide: true },
{ field: "jobTitle" },
{ field: "employmentType" },
]);
const autoGroupColumnDef = (0, react_1.useMemo)(() => {
return {
field: "employeeName",
cellRendererParams: {
innerRenderer: (params) => {
// display employeeName rather than group key (employeeId)
return params.data.employeeName;
},
},
};
}, []);
const isServerSideGroupOpenByDefault = (0, react_1.useCallback)(() => {
// open first two levels by default
return false;
}, []);
const isServerSideGroup = (0, react_1.useCallback)((dataItem) => {
// indicate if node is a group
return dataItem.group;
}, []);
const getServerSideGroupKey = (0, react_1.useCallback)((dataItem) => {
// specify which group key to use
return dataItem.employeeId;
}, []);
const defaultColDef = (0, react_1.useMemo)(() => {
return {
width: 240,
flex: 1,
sortable: false,
};
}, []);
const gridRef = (0, react_1.useRef)(null);
const getData = (params) => {
var allRows = (0, dummyData_1.getAllData)("");
const result = { rowData: allRows };
setTimeout(() => {
params.success(result);
}, 200);
};
const onGridReady = (0, react_1.useCallback)((params) => {
params.api.setGridOption("serverSideDatasource", { getRows: getData });
}, []);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: { width: "100%", height: 600 }, className: "ag-tdheme-quartz-dark mt-8" }, { children: (0, jsx_runtime_1.jsx)(AgGrid_1.default, { gridRef: gridRef, style: { height: "400px", width: "100%" }, gridOptions: {
columnDefs,
defaultColDef,
autoGroupColumnDef,
rowModelType: "serverSide",
treeData: true,
isServerSideGroupOpenByDefault: isServerSideGroupOpenByDefault,
isServerSideGroup: isServerSideGroup,
getServerSideGroupKey: getServerSideGroupKey,
}, onGridReady: onGridReady }) })));
};
exports.default = GridExample;