LucienLee / Vue Data Grid
An example that complex table interaction in Vue.js
Stars: ✭ 266
Projects that are alternatives of or similar to Vue Data Grid
aioneframework
Aione Framework: All-in-one lightweight mobile first front-end framework to design websites, web applications, mobile applications, progressive web applications having large number of examples, documentation, tutorials, community support, components.
Stars: ✭ 13 (-95.11%)
Mutual labels: table
compareGroups
R package to easily build publication-ready univariate or bivariate descriptive tables from a data set.
Stars: ✭ 23 (-91.35%)
Mutual labels: table
tabullet
Simple jQuery plugins for creating a table that can insert, edit, and delete row in one place.
Stars: ✭ 13 (-95.11%)
Mutual labels: table
react-tabllist
React-based customizable style table or list components that support event and callback functions.
Stars: ✭ 20 (-92.48%)
Mutual labels: table
react-crud-table
A table that includes all the CRUD operations.
Stars: ✭ 34 (-87.22%)
Mutual labels: table
react-strap-table
react table (client and server-side) based on bootstrap.
Stars: ✭ 28 (-89.47%)
Mutual labels: table
fluid-table
A tiny library to create responsive HTML tables
Stars: ✭ 23 (-91.35%)
Mutual labels: table
autumn
采用Spring、Spring Boot、Redis、MyBatis、Shiro、Druid框架开发,搭载mysql数据。 如果你厌烦了MyBatis中需要手动创建表的事情，这个项目非常适合你，自动为你生成表。 从此你不在需要导入sql文件了，项目初始化变得异常简单，结构清晰，易于开发，真正拿来可用。 全注解MyBatis开发，没有任何mapper文件，一切sql 映射都用代码实现，全程无xml配置，对xml编写mapper有恐惧症的人的福音。 提供双向生成功能： 实体类自动生成数据库表，全过程不需要任何SQL语句，所有表自动生成 通过表生成基础结构代码，生成代码中已包含CRUD功能，表级别的API接口全部都有 基本实例数据全自动通过代码初始化，无需干预 仅仅只需要修改数据库连接地址，…
Stars: ✭ 28 (-89.47%)
Mutual labels: table
ember-sort-filter-table
A sortable/searchable table addon for ember cli
Stars: ✭ 13 (-95.11%)
Mutual labels: table
react-vt-table
Table realisation based on `react-window` library
Stars: ✭ 28 (-89.47%)
Mutual labels: table
Antd Table Infinity
An infinite scroll component based on antd-table that supports virtual scrolling
Stars: ✭ 255 (-4.14%)
Mutual labels: table
use-table-tools
React Hooks for building kickass react table components
Stars: ✭ 18 (-93.23%)
Mutual labels: table
Libfort
C/C++ library to create formatted ASCII tables for console applications
Stars: ✭ 255 (-4.14%)
Mutual labels: table
tabula-sharp
Extract tables from PDF files (port of tabula-java)
Stars: ✭ 38 (-85.71%)
Mutual labels: table
Vue Data Grid
An example(live demo) that complex table interaction in Vue.js, which is rebounded the design by Virgil Pana
See full interaction video
Build Setup
# install dependencies
yarn
# serve with hot reload at localhost:8080
yarn run dev
# build for production with minification
yarn run build
# build for production and view the bundle analyzer report
yarn run build --report
# deploy bundled files to gh-pages
yarn run deploy
Feature
- Load data from json and import table interaction configuration, which is flexible and scalable (data source used in demo).
- Present data in real
tabletag, which keep html semantic - Load icons via svg sprite, which is resuable and pixel perfact
- Group data by month and year automatically
- Long contents in cells are trimmed automatically, which are expandable by clicking the columns
- The length of expanding columns are calculated by data automatically
- Cells have more menus or details, such as adding google map query links automatically
- Sort data by ascending or descending and filter data by range, whose bounds are calculated by data automatically
- Select columns to show by opening context menu with right click on header
Acknowledgement
- Virgil Pana, who designed the interaction first.
- The song played in crafting, 那我懂你意思了 - 沒有人在乎你在乎的事
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].