table_v1_library

v1.0.9

Published

3 months ago

A lightweight, customizable table library using SCSS and HTML, supporting React and Angular.

Downloads

0High
0Medium
0Low

roge2025

table grid scss css react angular themes customizable

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">[email protected]</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>

Fixed Header

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