How to make a matrix bit Editor

38 views Asked by At

I'm trying to make a dynamic Matrix bit editor. I develop some logic to make the rows and columns, but apperently it isn't working. It kinda seems that i'm in the right path, but i'm missing something. The table i'm trying to achive it ins't displaying.I'm using Vue2 and primevue. My goal is to that he always start with 64 bits, and later i want to improve a button that dynamically incressses or decresses the number of bits. Here's my code and an example of what i'm trying to achive:

  <Panel header="Editor preview">
            <div class="card">
                <splitpanes class="default-theme" style="height: 400px">
                    <pane min-size="5">
                        <DataTable showGridlines responsiveLayout="scroll">
                            <template #header>
                                Editor bit indices
                            </template>
                            <Column v-for="row in bitMatrix" :key="row">
                                <template #body="slotProps">
                                    {{ slotProps.data[row] }}
                                </template>
                            </Column>
                        </DataTable>
                    </pane>
                </splitpanes>
            </div>
        </Panel>

Method:


 mounted() {
    
        this.createBitMatrix(8, 8);
    },


data() {
  
bitMatrix: [],

},

methods: {

  createBitMatrix(rows, cols) {
            this.bitMatrix = [];
            for (let row = 0; row < rows; row++) {
                this.bitMatrix.push([]);
                for (let col = 0; col < cols; col++) {
                    this.bitMatrix[row].push(col + row * cols);
                }
            }

            this.bitMatrix = this.bitMatrix.map((row, index) =>
                index % 2 === 1 ? row.reverse() : row
            );
        },
},

This is what i'm trying to achive:

Bit table

And this is what i'm getting:

My table

I'm want that the bit table generates just fine.

0

There are 0 answers