#LWC Development2 discussing

To display checkboxes in two columns using lightning-checkbox-group, you'll need to adjust the layout using CSS because lightning-checkbox-group doesn't natively support multi-column layouts out of the box.

You can achieve the two-column layout by wrapping the checkboxes in a custom div container and using CSS Grid or Flexbox to display the checkboxes in two columns.

You can use something like this : 

/* Styling for the checkbox container to use grid */

.checkbox-container {

 display: grid; /* Use grid layout */

 grid-template-columns: repeat(2, 1fr); /* Create two equal columns */

 gap: 16px; /* Add space between checkboxes */

 max-width: 600px; /* Optional: set a max width */

}

/* Ensure the checkbox options fit well inside each column */

.lightning-checkbox-group .slds-checkbox_faux {

 margin-bottom: 8px; /* Adjust the spacing between checkboxes */

}

Hii,

If you want to ensure that newly added rows do not inherit values from the previous row, you should make sure that the data structure you use to hold the rows is initialized with completely new values each time(ideally blank here).

You can use row add approach something like this 

 // The new row that you create, make its value empty 
 const newRow = { id: rowId++, field1: '', field2: '' }

OR 

if you are fetching existing value, make sure to make it empty before adding the row.

With this implementation, clicking the "Add Row" button will create a new row with empty fields, preventing any inheritance of values from previous rows. This way, all fields in newly created rows remain optional until filled by the user.

If this does not work, please share exact context with more information.

Please mark this as best answer if it solved your query.

Hello community! 

I had similar task and was able to complete it using just lwc! 

For that I had to create the following js method:

handlePrintClick () {
        let printableElement = this.template.querySelector('.print-section');
         if (printableElement) {
            let clone = printableElement.cloneNode(true);
            let printWindow = window.open('', '_blank');
            if (printWindow) {
                printWindow.document.body.appendChild(clone);
                let style = printWindow.document.createElement('style');
                style.textContent = `
                    @page {
                        size: auto;   /* auto is the initial value */
                        margin: 0mm;  /* this affects the margin in the printer settings */
                    }
                    @media print {
                        body {
                            margin: 0;
                            padding: 0;
                        }
                        .no-print {
                            display: none;
                        }
                    }
                `;
                printWindow.document.head.appendChild(style);
                printWindow.focus();
                printWindow.print();
                printWindow.close();
            } else {
                console.error('Failed to open print window');
            }
        } else {
            console.error('Printable element not found');
        }
    }

and you need to update the content of html with css class to the place which you wanted to print (I had lots of inner data, parent and childs)

<div class="print-section">
    Data which should be printed
</div>

Note: In my case I had all css values in the same html file (not a separate css, I used style tag)