Added support for adding multiple rows

This commit is contained in:
Jeremy Rangel
2025-01-26 14:54:52 -08:00
parent 8812de19db
commit c9dedf6c8d
3 changed files with 39 additions and 15 deletions

View File

@ -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

View File

@ -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>
); );