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 using SCSS and HTML, supporting React and Angular applications. Features 20+ themes and easy customization via CSS custom properties.

Features

🎨 20+ built-in themes (blue, dark, minimal, neon, etc.)
🔧 Customizable via CSS custom properties
📱 Responsive design
⚡ Lightweight (no JavaScript dependencies)
🔄 React and Angular support
🎯 Utility classes for common table features
🎪 Easy to extend and customize

Installation

npm install table_v1_library

Quick Start

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="path/to/grid-table.css">
</head>
<body>
  <table class="grid-table blue">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

React

import 'table_v1_library/dist/grid-table.css';

function App() {
  return (
    <table className="grid-table blue striped hover">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>30</td>
        </tr>
      </tbody>
    </table>
  );
}

Angular

<table class="grid-table blue striped hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

Themes

Choose from 20+ built-in themes:

blue - Clean blue color scheme
red - Bold red theme
green - Nature-inspired green
yellow - Bright yellow accents
purple - Royal purple theme
dark - Dark mode theme
light - Clean light theme
minimal - Minimalist design
modern - Modern purple accents
classic - Traditional gray theme
neon - Glowing neon green
pastel - Soft pastel colors
retro - Vintage golden theme
ocean - Sea-inspired blues
forest - Forest green theme
sunset - Warm sunset colors
mono - Black and white
corporate - Professional gray
playful - Fun pink theme
elegant - Sophisticated purple

Utility Classes

Enhance your tables with utility classes:

striped - Alternating row colors
bordered - Full table borders
hover - Row hover effects
compact - Reduced padding
large - Increased padding
no-border - Remove all borders
rounded - Rounded corners
shadow - Drop shadow
responsive - Mobile-friendly responsive design
sortable - Sortable column indicators
loading - Loading state overlay
fixed-header - Sticky table header
scrollable - Scrollable table body

Customization

Override CSS custom properties to customize themes:

.grid-table.blue {
  --table-bg: #f0f8ff;
  --table-header-bg: #0066cc;
  --table-hover-bg: #e6f3ff;
  --table-border: #b3d9ff;
}

Responsive Design

Add the responsive class for mobile-friendly tables:

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

Development

Prerequisites

Node.js
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

Clean build

npm run clean

Project Structure

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

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

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 built-in themes
Utility classes for customization
React and Angular integration guides
Responsive design support