sccoreui
Version:
ui-sccore
59 lines (58 loc) • 3.06 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 client_side_row_model_1 = require("@ag-grid-community/client-side-row-model");
const core_1 = require("@ag-grid-community/core");
core_1.ModuleRegistry.registerModules([client_side_row_model_1.ClientSideRowModelModule]);
const NormalAgGgrid = () => {
const containerStyle = (0, react_1.useMemo)(() => ({ width: "100%", height: "500px", padding: "60px" }), []);
const gridStyle = (0, react_1.useMemo)(() => ({ height: "100%", width: "100%" }), []);
const [rowData, setRowData] = (0, react_1.useState)();
const [columnDefs] = (0, react_1.useState)([
{
field: "athlete", minWidth: 170,
checkboxSelection: true,
headerCheckboxSelection: true,
},
{ field: "age" },
{ field: "country" },
{ field: "year" },
{ field: "date" },
{ field: "sport" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
{ field: "total" },
]);
const defaultColDef = (0, react_1.useMemo)(() => {
return {
editable: false,
filter: true,
suppressHeaderMenuButton: true
};
}, []);
const onGridReady = (0, react_1.useCallback)((params) => {
console.log(params, "params");
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => setRowData(data));
params.api.setGridOption('rowSelection', 'multiple');
}, []);
const gridApi = (0, react_1.useRef)(null);
const onSelectionChanged = (0, react_1.useCallback)(() => {
const selectedRows = gridApi.current.api.getSelectedRows(); // Get selected rows
const allRowsSelected = gridApi.current.api.getSelectedRows().length === gridApi.current.api.getDisplayedRowCount();
console.log("Selected rows: ", selectedRows);
console.log("Selected----- ", allRowsSelected);
// If all rows are selected, you can perform your custom logic
if (allRowsSelected) {
console.log("All rows selected, send flag to API or perform actions");
}
}, [gridApi]);
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, { ref: gridApi, rowData: rowData, columnDefs: columnDefs, rowDragManaged: true, rowSelection: "multiple", defaultColDef: defaultColDef, onGridReady: onGridReady, rowModelType: "clientSide", onSelectionChanged: onSelectionChanged }) })) })));
};
exports.default = NormalAgGgrid;