Giter VIP home page Giter VIP logo

bhaveshpatel200 / ng-datatable Goto Github PK

View Code? Open in Web Editor NEW
4.0 1.0 5.0 277 KB

ng-datatable is a powerful component for creating dynamic and customizable data tables. It supports large amounts of data, sorting, pagination, and filtering and highly customizable

License: MIT License

TypeScript 74.74% HTML 16.01% CSS 8.60% JavaScript 0.64%
angular angular2 angularcomponent datagrid datatable datatables datatables-plugin grid table

ng-datatable's Introduction

@bhplugin/ng-datatable


Example

Document & Demos

Install

NPM

npm install @bhplugin/ng-datatable --save

Yarn

yarn add @bhplugin/ng-datatable

Bower

bower install @bhplugin/ng-datatable --save

Usage

app.module.ts

import { NgModule } from '@angular/core';
import { DataTableModule } from '@bhplugin/ng-datatable';

@NgModule({
    imports: [
        ...
        DataTableModule
    ],
})
export class AppModule {}

app.component.html

<ng-datatable [rows]="rows" [columns]="cols"> </ng-datatable>

app.component.ts

import { Component } from '@angular/core';
import { colDef } from '@bhplugin/ng-datatable';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    cols: Array<colDef> = [];
    rows: Array<any> = [];

    constructor() {
        this.initData();
    }

    initData(){
        this.cols = [
            { field: "id", title: "ID", filter: false },
            { field: "name", title: "Name" },
            { field: "username", title: "Username" },
            { field: "email", title: "Email" },
            { field: "phone", title: "Phone" },
            { field: "date", title: "Date", type: "date" },
            { field: "active", title: "Active", type: "bool" },
            { field: "age", title: "Age", type: "number" },
            { field: "address.city", title: "Address" },
            { field: "company.name", title: "Company" },
        ];

        this.rows = [
            {
            id: 1,
            name: "Leanne Graham",
            username: "Bret",
            email: "[email protected]",
            address: {
                street: "Kulas Light",
                suite: "Apt. 556",
                city: "Gwenborough",
                zipcode: "92998-3874",
                geo: {
                    lat: "-37.3159",
                    lng: "81.1496",
                },
            },
            phone: "1-770-736-8031 x56442",
            website: "hildegard.org",
            company: {
                name: "Romaguera-Crona",
                catchPhrase: "Multi-layered client-server neural-net",
                bs: "harness real-time e-markets",
            },
            date: "Tue Sep 27 2022 22:19:57",
            age: 10,
            active: true,
            },
            .......
        ];
    }
}

Props

Props Type Default Description
columns (required) array [] table columns
rows (required) array [] table rows
isServerMode boolean false set true if you need server side pagination.
totalRows number 0 total number of rows. totalRows required when isServerMode is true
skin string "bh-table-striped bh-table-hover" custom class for skin ('bh-table-striped' - for stripe row, 'bh-table-hover' - for hover row, 'bh-table-bordered' - for bordered row, 'bh-table-compact' - for compact table)
loading boolean false enable loader
hasCheckbox boolean false enable checkbox
search string "" enable global search
page number 1 current page
pageSize number 10 number of rows per page
pageSizeOptions array [10, 20, 30, 50, 100] pagesize options
showPageSize boolean true enable pagesize options
rowClass array, function "" custom row class
cellClass array, function "" custom cell class
sortable boolean true enable sorting
sortColumn string "id" name of sort column
sortDirection string "asc" sort direction (asc or desc)
columnFilter boolean false enable individual column filter
pagination boolean true enable pagination
showNumbers boolean true enable numbers pagination
showNumbersCount number 5 show numbers of count in pagination
showFirstPage boolean true enable first page in pagination
showLastPage boolean true enable last page in pagination
firstArrow string default arrow custom first page arrow
lastArrow string default arrow custom last page arrow
previousArrow string default arrow custom previous page arrow
nextArrow string default arrow custom next page arrow
paginationInfo string "Showing {0} to {1} of {2} entries" custom pagination info
noDataContent string No data available custom no data message
stickyHeader boolean false enable fixed header
height string 450px only will be used when stickyHeader enabled
stickyFirstColumn boolean false enable fixed first column
cloneHeaderInFooter boolean false enable clone header in footer
selectRowOnClick boolean false enable to select row(checkbox) on row click

Columns options

Props Type Default Description
isUnique boolean false db column is primary key or not
field string "" db column name
title string "" display column name
value string "" filter value if filter enabled
condition string "contain" default condition for column filter if filter enabled
type string "" column type (string, date, number, bool)
width string "" custom width of column
minWidth string "" custom minimum width of column
maxWidth string "" custom maximum width of column
hide boolean false show/hide column
filter boolean true enable column filter
search boolean true enabled global search
sort boolean true enable sorting
cellRenderer function, string custom cell rendering
headerClass string "" custom header cell class
cellClass string "" custom cell class

Events

Name Description
sortChange will trigger when sorting changed
searchChange will trigger when search changed
pageChange will trigger when page changed
pageSizeChange will trigger when pagesize changed
rowSelect will trigger when row selected using checkbox
filterChange will trigger when column filter changed
rowClick will trigger when row clicked
rowDBClick will trigger when row double clicked

Methods

Name Description
reset will reset all options like selected rows, filter, search, currennt page etc
getSelectedRows will returns all selected rows
getColumnFilters will return all column filters
clearSelectedRows will unselect all selected rows
selectRow(index) will select row with the given index (non-existent row will be ignored)
unselectRow(index) will unselect row with the given index (non-existent row will be ignored)
isRowSelected(index) will return true if the row with given index is selected

License

@bhplugin/ng-datatable is open-sourced software licensed under the MIT license.


Our other plugins

Vue3 Datatable - @bhplugin/vue3-datatable


Support

Buy Me A Coffee

ng-datatable's People

Contributors

bhaveshpatel200 avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

ng-datatable's Issues

How can I use the translate module in conjunction with ng-datatable

I have a TranslateService to work on the translations part, however, as the table initializes before the constructor, I am unable to call my service to look for the correct translation in json.

I didn't find any field that I can use in the slot to force a new column title, any ideas?
Example:
<ng-template slot="code" let-value="data" **title="aaaaaaaa"**>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.