VojtechLanka / grapesjs-blocks-table

Plugin for GrapesJS that adds table block.
BSD 3-Clause "New" or "Revised" License
8 stars 3 forks source link

Feature: Add move rows up and down #8

Closed antman3351 closed 5 months ago

antman3351 commented 5 months ago

Hi,

It would be handy to be able to move the rows up and down as it seems to be blocked in the layer pannel.

I added this to my row component as I was already extending it, the code should work ok in the menu added to the cells.

function moveRowUp(row) {
    const table = row.parent();
    const items = table.components();
    const index = table.components().indexOf( row );

    if ( index !== -1 && index > 0 )
    {
        const _row = items.at( index );
        items.remove( _row );
        items.add( _row, { at: index -1 });
    }
}

function moveRowDown(row) {
    const table = row.parent();
    const items = table.components();
    const index = items.indexOf( row );

    if ( index !== -1 && index < items.length -1 )
    {
        const _row = items.at( index );
        items.remove( _row );
        items.add( _row, { at: index +1 });
    }
}

// I used these icons move up => <i class="far fa-up-from-line"></i> move down => <i class="far fa-down-from-line"></i>
VojtechLanka commented 5 months ago

Hi, that does seem useful. I am currenlty busy with different project but hopefully will look into this by the end of this week.

antman3351 commented 5 months ago

Not sure if you'll find it useful, but in the table component I added a trait to add text to all the empty cells, so I can see them quickly as cells without a width disappear as soon as one cell has some text.

 function addTextToEmptyCells(table) {
        table.components().forEach(row => {
            row.components().forEach(cell => {
                const comps = cell.components();

                if (!comps.length) {
                    comps.add(
                        {
                            type: 'text',
                            content: 'Add some text!',
                        }
                    )
                }
            });
        });
    }

domc.addType('customTable', 
        {
            extend: 'customTable',
            model: {
                defaults: {
                    traits: [
                        ...parentTraits,
                        {
                            type: 'button',
                            label: false,
                            name: 'addTextToEmptyCells',
                            text: 'Add a text to all empty cells',
                            command: editor => addTextToEmptyCells(editor.getSelected()),
                        }
                    ],
                },
 ....
VojtechLanka commented 5 months ago

New release with the option to move the rows up/down is up v1.3.0. Please let me know if something does not work.

I considered adding the option to auto-fill the cells bud did not add it. Based on my testing the cells did not shrink enough for the double click that adds text element to not be possible. If there are more request for this feature in the future I will reconsider it.

antman3351 commented 5 months ago

Works great, thanks!