ng-table-sculptor v0.0.4

NgTableSculpt

NgTableSculpt is an Angular component library for huge amounts of data. Seamlessly integrated into your Angular projects, NgTableSculpt offers a sophisticated solution for displaying data in beautifully designed tables, while also providing an enhanced user experience.

Features:

🌟 Sleek Design: With meticulous attention to detail, NgTableSculpt delivers a polished and modern table design that seamlessly fits into a wide range of application aesthetics.

⚙️ Customization Powerhouse: Tailor the table to your exact needs with customizable headers, cell styling, and data formats. Craft a table that aligns perfectly with your application's branding and user interface.

🔍 Data Visibility: Designed to reduce visual clutter, NgTableSculpt incorporates smart features that minimize the appearance of dust, hair, and other minor debris, ensuring a clean and professional presentation at all times.

📊 Data Handling: Beyond aesthetics, NgTableSculpt excels in data handling. With support for sorting, filtering, and pagination, users can effortlessly navigate through extensive datasets without sacrificing performance.

💡 Intuitive Interaction: NgTableSculpt enhances user interaction with intuitive UI components such as context menus, tooltips, and interactive headers. Users can enjoy a seamless and productive experience when working with complex data.

📱 Responsiveness: Whether on a large desktop screen or a mobile device, NgTableSculpt's responsive design ensures that your tables maintain their readability and functionality across various screen sizes.

🔄 Angular Integration: Built from the ground up with Angular developers in mind, NgTableSculpt seamlessly integrates into your Angular projects, following best practices and leveraging the power of Angular's architecture.

With NgTableSculpt, presenting and interacting with data has never been this refined and efficient. Elevate your data representation to a new level of sophistication by integrating NgTableSculpt into your Angular applications. Get started today and unlock a world of beautiful, functional, and user-friendly tables.

Table at the moment supports sorting, filtering, category filtering, advanced pagination, multi selections and much more.

Next update will be Pagination API

Install

npm i ng-table-sculptor

Import

import { NgTableSculptModule } from 'ng-table-sculptor';

@NgModule({
  declarations: [...],
  imports: [
    BrowserModule,
	  NgTableSculptModule
  ]
})

Using the library

Prerequisites: Library was built with tailwind, so in order to work, download the tailwind library for angular

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/ng-table-sculptor/**/*.{html,ts,mjs}", // IMPORTANT
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Simple usage

<ng-table-sculpt [statusArr]="[
{ status: 'all', field: '' },
{ status: 'activate', field: 'status' },
{ status: 'deactivate', field: 'status' }
]" [rootPath]="'customers'" [searchFilter]="
'status,accountNumber,route,monthlyPay,contactNumber,name,priceCategory'
" [selectAllColumn]="false" [tableData]="customers" [columns]="displayedColumns"></ng-table-sculpt>


  displayedColumns: NgTableSculpt[] = [
    { caption: 'Account Number', field: 'accountNumber' },
    { caption: 'Name', field: 'name' },
    { caption: 'Contact Number', field: 'contactNumber' },
    { caption: 'Route', field: 'route' },
    { caption: 'Price Category', field: 'priceCategory' },
    { caption: 'Status', field: 'status', type: 'status' },
    { caption: 'Monthly Pay', field: 'monthlyPay' },
  ];

Properties

Define the html template with <ng-table-sculpt>. Currently supports these inputs:

1. Input [tableData] which takes your data.
2. Input [columns] which takes your item keys of table, use the table typings below:

export interface NgTableSculpt {
  caption: string; // label
  field: string; // item key
  nested?: string; // nested item key, like nested object
  symbol?: string; // if you have currency symbol
  type?: string; // type => date
  nestedArray?: string; // nested array
}

3. Input [searchFilter] which takes any key you want and make it searchable within search box
4. Input [rootPath] which takes your root url, and table assumes you have ID on specific item, when you click on item it will route you to the next component
5. Input [statusArr] which takes any key you want and create a separate filter, these filters have to match the item value

These are the most critical one for your table to be fully functional, there are plenty more which will be added later

Code scaffolding

Run ng generate component component-name --project NgTableSculpt to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project NgTableSculpt.

Note: Don't forget to add --project NgTableSculpt or else it will be added to the default project in your angular.json file.

Build

Run ng build NgTableSculpt to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build NgTableSculpt, go to the dist folder cd dist/ng-table-sculpt and run npm publish.

Running unit tests

Run ng test NgTableSculpt to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.