In my current project, I am utilizing VueJS. However, the issue I am facing is not necessarily exclusive to this framework - but if there is a vue-specific solution available, that would be my preference.
The task at hand involves constructing a table with per-column filters (simple inputs in this instance). The columns are dynamic, as well as the volume of data (thousands of rows, but less than 100,000 entries).
// example data
var columns = ['id', 'title', 'date', 'colour']
var data = [{ id: 1, title: 'Testentry 1', date: '2017-02-21T07:10:55.124Z', colour: 'green'}]
Here lies the challenge: I am iterating through the columns, checking for the existence of a search input. If found, I attempt to filter the data based on the search query. For the ID column, the time complexity is O(n). If I add a title search as well, I can optimize by leveraging the result of the initial query, reducing the amount of data processed significantly.
The search queries are stored in an object called search, and the filtered data is managed as a computed property that updates whenever search changes. The current setup triggers re-evaluation of all search queries, even those that remain unchanged when adjusting just one column's search criteria.
To streamline this process, caching of filtered data for each column may be necessary, ensuring subsequent columns are only queried after the initial filtering stages.
Edit: Below is the code snippet for the filtering logic:
filteredRows () {
var rows = this.data
for (var i = 0; i < this.columns.length; i++) {
var column = this.columns[i].name
var search = this.tSearch[column]
if (!search && search.length === 0) continue
console.log(column + ': ' + ' (' + search + ') -> ' + rows.length)
rows = _.filter(rows, (row) => {
var value = '' + row[column]
value.search(search) > -1
})
}
return rows
}