DataTable in Vue js

Question

I am new to Vue and have never tried creating my own datatable, which brings me where I am now, suck.

I am trying to create a table where we can have dynamic links and/or buttons on any cell in any row. Mostly it will just end up being a few links in the last cell: edit / delete. I have the table to the point where I can pass in the columns and rows and it will build the table out visually. The filter and paging also work fine. Where I am suck is, how do I update and refresh the table to display new data when something is added or deleted? Plus how do I get the edit and delete buttons to work? Any help or criticism would be appreciated .

Here is my vue page I set up to just test the datatable:

And my data-table.js file

const paginate = (fromArr, pageActive, limitPerPage) => {
    var newArr = Array.from(fromArr);
    var startPaginate = Number(limitPerPage) * Number(pageActive) - (Number(limitPerPage) - 1);
    var endPaginate = Number(limitPerPage) * Number(pageActive);
    return newArr.slice(startPaginate - 1, endPaginate <= newArr.length ? endPaginate : newArr.length);
};

const pageInfo = (fromArr, pageActive, limitPerPage) => {
    var newArr = Array.from(fromArr);
    var startPaginate = Number(limitPerPage) * Number(pageActive) - (Number(limitPerPage) - 1);
    var endPaginate = Number(limitPerPage) * Number(pageActive);
    return {
        from: newArr.length >= 1 ? startPaginate : 0,
        start: newArr.length >= 1 ? startPaginate : 0,
        to: endPaginate <= newArr.length ? endPaginate : newArr.length,
        end: endPaginate <= newArr.length ? endPaginate : newArr.length,
        of: newArr.length,
        length: newArr.length
    };
}

const pages = (fromArr, limitPerPage) => {
    var newArr = Array.from(fromArr);
    var divideLength = newArr.length / Number(limitPerPage);
    var pageNumber = Math.ceil(divideLength);

    return pageNumber;
}

const pagination = (totalPages) => {
    var newArr = [];

    for (var i = 1; i < totalPages + 1; i++) {
        newArr.push(i);
    }

    return newArr;
};

const search = (fromArr, searchTerm) => {
    var testing = fromArr.flatMap(obj => {
        const objHasSearchTerm = Object.entries(obj)
            .some(([key, value]) => key !== 'columns' && String(value).toLowerCase().includes(searchTerm.toLowerCase()));

        if (objHasSearchTerm && !obj.cells) {
            return [obj];
        }

        const matchedChildren = search(obj.columns ?? [], searchTerm);
        return objHasSearchTerm || matchedChildren.length > 0
            ? obj
            : [];
    });

    return testing;
}

const buildRow = (id) => {
    var row = {};
    row.id = id;
    row.columns = [];
    return row;
}

const buildColumn = (row, columnData) => {
    var column = {};
    column.columnData = columnData;
    column.links = [];
    column.buttons = [];

    row.columns.push(column);
    return column;
}

const buildLink = (column, text, url, clickFunction) => {
    var link = {};
    link.text = text;
    link.url = url;
    link.click = clickFunction;

    column.links.push(link);
}

const buildButton = (column, text, url, clickFunction) => {
    var button = {};
    button.text = text;
    button.url = url;
    button.click = clickFunction;

    column.buttons.push(button);
}

export const dataTable = {
    paginate,
    pageInfo,
    pages,
    pagination,
    search,
    buildRow,
    buildColumn,
    buildLink,
    buildButton
}

And lastly my datatable component:

yoduh · Answer

Making the table reactive

In two instances you're using ref objects when you should be using computed. Basically, anything that should automatically "recompute" based on a change to a dependency (tableData) should be a computed property:

In your datatable component:

let entries = computed(() => [...props.rows]);

let filteredRows = computed(() =>
  dataTable.paginate(entries.value, 1, entriesToDisplay.value)
);

In the parent vue page:

Here you've created tableRows as a standard array when it should actually be a ref array:

let tableRows = ref([]);

and then there's one line you need to update to use .value:

const buildTableRows = () => {
  ...
  tableRows.value.push(row);
}

Now you should notice new entries being added to the table when pressing the Add button

Creating working Edit button

First, I noticed in buildTableRows you're calling a function buildRow() in your data-table.js file that expects an id, but you forgot to pass that in, so here's that fix:

var row = dataTable.buildRow(tableData.value[i].id);

Then in the same function, creating the edit button using buildLink expects a function as the fourth parameter which you should do by just providing the function name (passing in parameters will be handled in the datatable component):

dataTable.buildLink(colThree, 'Edit', '', editItem);

In that datatable component is where you would pass in your row.id parameter (which is now no longer undefined thanks to the fix above).


  {{ link.text }}

Now when you click the Edit button in your data table you will see your editItem function console logging the row id. With the id, you can retrieve that row from tableData and do with it what you want... Setting up the delete button would be the same way!

DataTable in Vue js

1 Answers

Making the table reactive

Creating working Edit button