All Projects → SpoonX → aurelia-datatable

SpoonX / aurelia-datatable

Licence: MIT License
A 100% aurelia based data table component.

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to aurelia-datatable

Aurelia Slickgrid
Aurelia-Slickgrid a wrapper of the lightning fast & customizable SlickGrid datagrid with a few Styling Themes
Stars: ✭ 100 (+212.5%)
Mutual labels:  grid, aurelia, datatable
Tui.grid
🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!
Stars: ✭ 1,859 (+5709.38%)
Mutual labels:  grid, datatable
Ka Table
Lightweight MIT React Table component for both TS and JS with Sorting, Filtering, Grouping, Virtualization, Editing and many more
Stars: ✭ 117 (+265.63%)
Mutual labels:  grid, datatable
React Table
⚛️ Hooks for building fast and extendable tables and datagrids for React
Stars: ✭ 15,739 (+49084.38%)
Mutual labels:  grid, datatable
Vue2 Datatable
The best Datatable for Vue.js 2.x which never sucks. Give us a star 🌟 if you like it! (DEPRECATED. As I, @kenberkeley, the only maintainer, no longer works for OneWay. Bugs may be fixed but new features or breaking changes might not be merged. However, it's still the best in my mind because of its extremely flexible usage of dynamic components)
Stars: ✭ 867 (+2609.38%)
Mutual labels:  grid, datatable
Vue Tables 2
Vue.js 2 grid components
Stars: ✭ 1,518 (+4643.75%)
Mutual labels:  grid, datatable
Primereact
The Most Complete React UI Component Library
Stars: ✭ 2,393 (+7378.13%)
Mutual labels:  grid, datatable
Datatablesbundle
This Bundle integrates the jQuery DataTables plugin into your Symfony application.
Stars: ✭ 334 (+943.75%)
Mutual labels:  grid, datatable
aurelia-form
Fun with forms! Form utilities to make stuff just a bit (a lot) easier.
Stars: ✭ 34 (+6.25%)
Mutual labels:  aurelia, aurelia-orm
svelte-datagrid
Svelte data grid spreadsheet best best features and performance from excel
Stars: ✭ 48 (+50%)
Mutual labels:  grid, datatable
react-material-ui-datatable
Material UI Datatable in React way
Stars: ✭ 24 (-25%)
Mutual labels:  grid, datatable
Vue Handsontable Official
Vue Data Grid with Spreadsheet Look & Feel. Official Vue wrapper for Handsontable.
Stars: ✭ 751 (+2246.88%)
Mutual labels:  grid, datatable
Datatable
A simple, modern and interactive datatable library for the web
Stars: ✭ 587 (+1734.38%)
Mutual labels:  grid, datatable
Ngx Datatable
✨ A feature-rich yet lightweight data-table crafted for Angular
Stars: ✭ 4,415 (+13696.88%)
Mutual labels:  grid, datatable
slickgrid-universal
Slickgrid-Universal is a monorepo which includes all Editors, Filters, Extensions, Services and is Framework Agnostic to take full advantage of SlickGrid core lib.
Stars: ✭ 29 (-9.37%)
Mutual labels:  grid, datatable
Grid
Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets and more 💥
Stars: ✭ 573 (+1690.63%)
Mutual labels:  grid, datatable
ng-mazdik
Angular UI component library
Stars: ✭ 86 (+168.75%)
Mutual labels:  grid, datatable
Angular Slickgrid
Angular-Slickgrid is a wrapper of the lightning fast & customizable SlickGrid datagrid, it also includes multiple Styling Themes
Stars: ✭ 298 (+831.25%)
Mutual labels:  grid, datatable
au-datatable
Aurelia Datatable, A highly customizable html datatable, build for the Aurelia Framework.
Stars: ✭ 21 (-34.37%)
Mutual labels:  aurelia, datatable
aurelia-virtual-scroll
Aurelia Virtual Scroller
Stars: ✭ 15 (-53.12%)
Mutual labels:  grid, aurelia

Archived

It was fun while it lasted, but we have to stop maintaining these repositories. We haven't used these projects for quite some time and maintaining them is becoming harder to do.

You deserve better, and for that reason we've decided to archive some repositories, which includes this one.

Feel free to fork and alter the repositories, and go forth making awesome stuff.

aurelia-datatable

Build Status Gitter

A data-table using aurelia-orm and aurelia-pager

Features:

  • Pagination
  • Sorting
  • Integrated ORM
  • Search
  • Custom columns
  • Custom button actions
  • Custom valueConverters
  • Expand data to view additional data
  • And more

Uses

Aurelia-datatable needs following plugins installed and configured:

Documentation

You can find usage examples and the documentation here.

The changelog provides you with information about important changes.

Example

Here's a snippet to give you an idea of what this module supports.

Online mode

this.repository = entityManager.getRepository('users');
  <datatable
      destroy.call="myEventCallback($event)"
      edit.call="myEditImplementation($event)"
      columns="id,name as 'username', user.id as 'User id'"
      repository.bind="repository"
      searchable
      sortable
      actions.bind="actions"
      populate="user"
      footer.bind="footer"
      detail-view="./details"
  ></datatable>

Offline mode

this.data = [{id: 1, name: 'Pipo'}, {id: 2, name: 'Mario'}];
  <datatable
      destroy
      edit.call="myEditImplementation($event)"
      columns="id,name as 'username'"
      actions.bind="actions"
      footer.bind="footer"
      detail-view="./details"
      data.bind="data"
  ></datatable>

Installation

Aureli-Cli

Run npm i aurelia-datatable --save from your project root.

Aurelia-view-manager uses homefront, so add following to the build.bundles.dependencies section of aurelia-project/aurelia.json:

"dependencies": [
  {
    "name": "homefront",
    "path": "../node_modules/homefront/dist",
    "main": "index"
  },
  {
    "name": "aurelia-datatable",
    "path": "../node_modules/aurelia-datatable/dist/amd",
    "main": "aurelia-datatable",
    "resources": [
      "bootstrap/datatable.html"
    ]
  },
  // ...
],

Jspm

Run jspm i aurelia-datatable from your project root.

Aurelia-datatable uses homefront, so add following to the bundles.dist.aurelia.includes section of build/bundles.js:

  "homefront",
  "aurelia-datatable",
  "[aurelia-datatable/**/*.js]",
  "aurelia-datatable/**/*.html!text",

If the installation results in having forks, try resolving them by running:

jspm inspect --forks
jspm resolve --only registry:package-name@version

Webpack

Run npm i aurelia-datatable --save from your project root.

And add aurelia-datatable in the coreBundles.aurelia section of your webpack.config.js.

Typescript

Npm-based installations pick up the typings automatically. For Jspm-based installations, run typings i github:spoonx/aurelia-datatable or add "aurelia-datatable": "github:spoonx/aurelia-datatable", to your typings.json and run typings i.

Configuration

Activate

Activate the plugin in main.js:

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-datatable');

  aurelia.start().then(() => aurelia.setRoot());
}

ORM

Follow the steps in the aurelia-orm documentation to configure your api endpoints.

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].