Skip to main content
100%

vuejs finder, a viewModel for a simple searchable table with filtering

✓ Published0🌍 Public
Aandrewfulrich
Last edited May 6, 2017
Created on May 6, 2017

This example demonstrates a searchable, paginated table with live filtering, where users navigate through results and adjust page size through a Vue-driven interface. The viewModel initializes with a Vue instance and uses custom methods like `previousPage`, `nextPage`, `changeLimit`, and `refilter` to manage state. It fetches data via an AJAX helper (`ajaxIt.get`) from an API endpoint, sending query parameters for limit, offset, and filter fields. Responses update Vue properties such as `result`, `rowCount`, and `offsetPlusLimit`, enabling reactive display of the table’s current page and total record count.

AI-generated description

Similar vizzes

Loading thumbnail…

Loading Data (2020/09)

This example demonstrates interactive exploration of a dataset of 57,000+ articles from Matters, loaded from a remote Arrow file. The interface allows searching by author name, filtering by month, and toggling tag visibility, with results grouped by publication date. It uses Vue 3 for reactive UI components and Apache Arrow’s `Arrow.Table.from`, `Arrow.predicate`, and table filtering with custom predicates to query the columnar data. D3 utilities like `d3.rollups` and `d3.group` aggregate rows, while `d3.utcFormat` formats dates for display.

Tt829702
60% match
Loading thumbnail…

Untitled

This interactive HTML table displays customer records with attributes like location, age, and various boolean flags. Users can filter rows through three separate text input fields and a search button, with the table dynamically hiding or showing rows based on matching criteria. The implementation uses plain JavaScript for the filtering logic, manipulating the CSS `display` property of table rows, while the table styling is handled through embedded CSS. The data presented is static sample data, and the filtering demonstrates basic DOM manipulation without external libraries or frameworks.

JJunepp
59% match
Loading thumbnail…

Table with Filter

A table of names, ages, and cities allows filtering its rows through interactive dropdown menus placed in the header. Selecting a value from any menu hides rows that do not match the chosen text in that column, while multiple selections combine to show only rows meeting all criteria. The implementation uses jQuery to listen for `change` events on the `.filter` selects, reads each menu’s `data-column` attribute to locate the corresponding table cell, and toggles row visibility by calling `hide()` and `show()` on the filtered `<tbody>` elements. All data is hardcoded within the HTML file.

HHéctor del Castillo
59% match
Loading thumbnail…

Untitled

This example demonstrates an interactive data table with filtering, sorting, and pagination controls, showing country-level economic indicators such as population, exchange rates, and GDP. Built with the TableFilter library, it provides dropdown selectors for country, ISO code, and year, along with custom numeric range filters and column-specific sorting. The table includes features like row counters, reset buttons, highlighted active columns, and keyword highlighting, all styled with custom CSS. Data is embedded directly in the HTML table structure, and TableFilter handles the client-side filtering and interaction logic.

JJunepp
59% match
Loading thumbnail…

Sortable, Filterable Table

This example presents a sortable, filterable table of YouTube channel data, showing each channel’s title, view count, creation date, and URL. A search input filters rows by title prefix, while clicking column headers sorts the table, with click counts tracked per column. Built with D3.js v3, it binds JSON data to table rows and dynamically updates the DOM on input and sort events. The code constructs cells, conditionally wraps URLs in anchor tags, and uses a custom regex-based filter to match titles.

TThanaporn-sk
58% match
Loading thumbnail…

logic behind template

This example demonstrates the interactive behavior of an autocomplete input component, showing how user keystrokes filter a list of available options and how keyboard navigation moves a highlighted selection. The component relies on Vue.js computed properties to derive filtered options from a centralized Vuex store, using the `fOptions` and `options` getters. Its methods handle input events and arrow-key movements, while the `select` method confirms a choice. The code references the Vuex store’s `autocompleteOptions` state, and the UI updates reactively through Vue’s reactivity system, without any external visualization libraries.

Aalexfinnarn
58% match
Loading thumbnail…

Untitled

This interactive table displays data records with fields like filename, label, and perplexity scores, controlled by two sliders that filter the dataset by user-defined ranges. Built with React and rendered as SVG with animation, the visualization uses D3.js for slider creation and data binding, Crossfilter for multidimensional filtering, and the dc.js library for data table and count management.

Vvaynexie
57% match
Loading thumbnail…

template of autocomplete component

This template demonstrates a reusable autocomplete input component built with Vue.js. It shows a text field that filters a list of options as the user types, with keyboard navigation via arrow keys, Enter to select, and Escape to close the dropdown. The component uses Vue’s `v-model`, `v-for`, and event handlers like `@input`, `@keydown`, and `@mouseenter` to manage the suggestion list, highlighting the currently focused option. The data source is an array of objects passed through a prop, with the displayed field determined by `theKey`.

Aalexfinnarn
57% match