Added support for adding multiple rows
This commit is contained in:
@ -1 +1 @@
|
|||||||
<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'a6d1538e10aef4aeb8ff');
|
<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '0c512545db897b1c5c5e');
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -4,6 +4,30 @@ import 'ag-grid-community/styles/ag-grid.css';
|
|||||||
import 'ag-grid-community/styles/ag-theme-alpine.css';
|
import 'ag-grid-community/styles/ag-theme-alpine.css';
|
||||||
|
|
||||||
const LCPDataGrid = ({dataset}) => {
|
const LCPDataGrid = ({dataset}) => {
|
||||||
|
|
||||||
|
|
||||||
|
const [rowsToAdd, setRowsToAdd] = useState(1); // Number of rows the user wants to add
|
||||||
|
|
||||||
|
const [currentRowCount, setCurrentRowCount] = useState(dataset.length); // Track the current row count
|
||||||
|
|
||||||
|
// Button click handler to add a new row
|
||||||
|
const addRows = () => {
|
||||||
|
if (gridApi) {
|
||||||
|
const rows = [];
|
||||||
|
// Create the specified number of new rows (empty rows in this case)
|
||||||
|
for (let i = 0; i < rowsToAdd; i++) {
|
||||||
|
rows.push({}); // You can customize the empty row content if needed
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use the grid API to add the new rows
|
||||||
|
gridApi.applyTransaction({ add: rows });
|
||||||
|
|
||||||
|
// Update the current row count
|
||||||
|
setCurrentRowCount(prevCount => prevCount + rowsToAdd);
|
||||||
|
} else {
|
||||||
|
console.log('Grid is not ready yet');
|
||||||
|
}
|
||||||
|
};
|
||||||
// let gridData = [
|
// let gridData = [
|
||||||
// { Department2: 'Sheriffs Office 2', Budget: '150000', MeetAt: '12/12/2025', PreferredColor: '#e0e0e0', PostContent: '<div> </div>' },
|
// { Department2: 'Sheriffs Office 2', Budget: '150000', MeetAt: '12/12/2025', PreferredColor: '#e0e0e0', PostContent: '<div> </div>' },
|
||||||
// { Department2: 'Treasurer2', Budget: '10000', MeetAt: '12-05', PreferredColor: '#232323', PostContent: '<p> </p>' },
|
// { Department2: 'Treasurer2', Budget: '10000', MeetAt: '12-05', PreferredColor: '#232323', PostContent: '<p> </p>' },
|
||||||
@ -176,18 +200,6 @@ const LCPDataGrid = ({dataset}) => {
|
|||||||
const gridRef = useRef(null);
|
const gridRef = useRef(null);
|
||||||
const [gridApi, setGridApi] = useState(null); // Store grid API in state
|
const [gridApi, setGridApi] = useState(null); // Store grid API in state
|
||||||
|
|
||||||
// Button click handler to add a new row
|
|
||||||
const addRow = () => {
|
|
||||||
if (gridApi) {
|
|
||||||
const newRow = {}; // Empty Row
|
|
||||||
// Use the grid API to add the new row
|
|
||||||
gridApi.applyTransaction({ add: [newRow] });
|
|
||||||
|
|
||||||
|
|
||||||
} else {
|
|
||||||
console.log('Grid is not ready yet');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Default Column Properties
|
// Default Column Properties
|
||||||
const defaultColDef = {
|
const defaultColDef = {
|
||||||
@ -255,7 +267,19 @@ const LCPDataGrid = ({dataset}) => {
|
|||||||
|
|
||||||
{/* Button outside the grid */}
|
{/* Button outside the grid */}
|
||||||
<div>
|
<div>
|
||||||
<button onClick={addRow}>Add Row</button>
|
{/* Input to add multiple rows */}
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={rowsToAdd}
|
||||||
|
onChange={(e) => setRowsToAdd(Math.max(1, parseInt(e.target.value, 10)))}
|
||||||
|
min="1"
|
||||||
|
/>
|
||||||
|
<button onClick={addRows}>Add Row(s)</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{currentRowCount} Rows</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user