Package Exports

table_v1_library
table_v1_library/dist/main.css
table_v1_library/src/components/Table.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (table_v1_library) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Grid Table Library

A lightweight, customizable table library built with SCSS and HTML, designed to support React and Angular applications. Inspired by Ag Grid, this library provides a simple yet powerful way to create beautiful, responsive data tables.

Features

🎨 20+ Built-in Themes: From modern and minimal to neon and retro
📱 Responsive Design: Mobile-friendly tables with customizable breakpoints
⚡ Lightweight: Pure CSS/SCSS with no JavaScript dependencies
🔧 Highly Customizable: Easy-to-override CSS custom properties
🏷️ Utility Classes: Keywords for quick styling (striped, hover, bordered, etc.)
🔄 Framework Agnostic: Works with React, Angular, Vue, or plain HTML
📊 Sorting Indicators: Built-in visual sorting cues
🎯 Ag Grid Inspired: Familiar API and styling patterns

Installation

npm install table_v1_library

Quick Start

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/table_v1_library/dist/grid-table.css">
</head>
<body>
  <table class="grid-table blue striped hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>30</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>25</td>
        <td>Los Angeles</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Themes

Choose from 20+ pre-built themes:

Color Themes: blue, red, green, yellow, purple
Style Themes: dark, light, minimal, modern, classic
Special Themes: neon, pastel, retro, ocean, forest, sunset, mono, corporate, playful, elegant

<table class="grid-table dark">
<table class="grid-table neon">
<table class="grid-table corporate">

Utility Classes

Combine utility classes for enhanced functionality:

striped - Alternating row colors
hover - Highlight rows on hover
bordered - Add borders to all cells
rounded - Rounded table corners
shadow - Add drop shadow
compact - Smaller cell padding
large - Larger cell padding
responsive - Mobile-responsive design
sortable - Add sorting indicators
loading - Loading state overlay
fixed-header - Sticky table header
scrollable - Scrollable table body

<table class="grid-table modern striped hover bordered rounded shadow">

React Integration

import React from 'react';
import 'table_v1_library/dist/grid-table.css';

const MyTable = () => (
  <table className="grid-table blue responsive">
    <thead>
      <tr>
        <th>Name</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      {data.map(item => (
        <tr key={item.id}>
          <td>{item.name}</td>
          <td>{item.value}</td>
        </tr>
      ))}
    </tbody>
  </table>
);

Angular Integration

import { Component } from '@angular/core';

@Component({
  template: `
    <table class="grid-table corporate sortable">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of items">
          <td>{{ item.col1 }}</td>
          <td>{{ item.col2 }}</td>
        </tr>
      </tbody>
    </table>
  `,
  styles: [`
    :host {
      --table-bg: #f8f9fa;
    }
  `]
})
export class MyTableComponent {
  items = [
    { col1: 'Data 1', col2: 'Data 2' }
  ];
}

Customization

Override CSS custom properties for deep customization:

:root {
  --table-bg: #ffffff;
  --table-border: #e0e0e0;
  --table-header-bg: #f8f9fa;
  --table-header-color: #212529;
  --table-row-bg: #ffffff;
  --table-row-color: #212529;
  --table-hover-bg: #f8f9fa;
  --table-striped-bg: #f8f9fa;
}

Or apply custom styles to specific tables:

<div style="--table-header-bg: #007bff; --table-header-color: white;">
  <table class="grid-table">
    <!-- table content -->
  </table>
</div>

Responsive Design

For mobile-friendly tables, use the responsive class and add data-label attributes:

<table class="grid-table responsive">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="First Name">John</td>
      <td data-label="Last Name">Doe</td>
      <td data-label="Email">john@example.com</td>
    </tr>
  </tbody>
</table>

Advanced Features

Sorting Indicators

<table class="grid-table sortable">
  <thead>
    <tr>
      <th class="sort-asc">Name ▲</th>
      <th class="sort-desc">Age ▼</th>
    </tr>
  </thead>
</table>

Loading State

<table class="grid-table loading">
  <!-- table content -->
</table>

<div style="max-height: 400px; overflow-y: auto;">
  <table class="grid-table fixed-header">
    <!-- table content -->
  </table>
</div>

Development

Prerequisites

Node.js 14+
npm or yarn

Setup

git clone https://github.com/yourusername/table_v1_library.git
cd table_v1_library
npm install

Build

npm run build

Watch for Changes

npm run watch

Project Structure

table_v1_library/
├── src/
│   ├── _base.scss          # Core table styles
│   ├── _themes.scss        # Theme system
│   ├── _utilities.scss     # Utility classes
│   ├── themes/             # Individual theme files
│   │   ├── _blue.scss
│   │   ├── _dark.scss
│   │   └── ...
│   └── main.scss           # Main entry point
├── examples/
│   └── index.html          # Demo page
├── docs/
│   ├── react-integration.md
│   └── angular-integration.md
├── dist/
│   ├── grid-table.css      # Compiled CSS
│   └── grid-table.min.css  # Minified CSS
├── gulpfile.js             # Build configuration
├── package.json
└── README.md

Browser Support

Chrome 49+
Firefox 31+
Safari 9.1+
Edge 16+

Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

License

MIT License - see the LICENSE file for details.

Changelog

v1.0.0

Initial release
20+ themes
Responsive design
React and Angular integration guides
Comprehensive utility classes
CSS custom properties for customization

Support

For questions, issues, or contributions, please visit our GitHub repository.

Made with ❤️ for developers who love beautiful, functional tables.

table_v1_library