• Quick start
• Best practises
• Default styles examples
• Status
• What's included
• Bugs and feature requests
• Versioning
• Copyright and license

Several quick start options are available:

• Download the latest release.
• Clone the repo: git clone https://github.com/maestro888/table-fluid.git
• Install with npm: npm install table-fluid

Add code to you page

<link rel="stylesheet" href=".../dist/css/table-fluid.css">
<script src=".../dist/js/table-fluid.js"></script>

<table class="table-fluid">
  <thead>
  ...
  </thead>
  <tbody>
  ...
  </tbody>
</table>

Use JavaScript function

window.tableFluid('.table-fluid');

• Install with npm: npm install table-fluid
• Create a folder table-fluid inside you js project directory
• In the project directory table-fluid create file table-fluid.js
• In the created file table-fluid.js add code:

// Import js from table-fluid
//=include .../node_modules/table-fluid/src/js/table-fluid.js

• Create a folder table-fluid inside you scss project directory
• In the project directory table-fluid create two files table-fluid.scss, _variables.scss
• In the created file table-fluid.scss add:

@import 'variables';
@import '.../node_modules/table-fluid/src/scss/variables';
@import '.../node_modules/table-fluid/src/scss/table';

• In the created file _variables.scss replace the values of the variables as you need (please see Default styles examples). All variables examples are inside the file:

.../node_modules/table-fluid/src/scss/_variables.scss

Add code to you page

<link rel="stylesheet" href=".../css/table-fluid/table-fluid.css">
<script src=".../js/table-fluid/table-fluid.js"></script>

<table class="table-fluid">
  <thead>
  ...
  </thead>
  <tbody>
  ...
  </tbody>
</table>

Use JavaScript function

window.tableFluid('.table-fluid');

If you only use SCSS please add these variables to the created file _variables.scss in your project

// Table Head styles.
$th-bg-color: #a9a9a9;
$th-border-color-tb: #808080;
$th-border-color-rl: #808080;

// Table Body styles.
$td-border-color-tb: $th-bg-color;
$td-border-color-rl: $th-bg-color;

If you only use CSS please add these styles to your created CSS file. Note: for the latest version plugin

.table-fluid {
  /* Table Head style variables. */
  --th-bg-color: #a9a9a9;
  --th-border-color-tb: #808080;
  --th-border-color-rl: #808080;
  /* Style variables for tablet and mobile only. */
  --th-even-bg-color: #b1b1b1;
  --th-even-border-color-tb: #888888;
  --th-even-border-color-rl: #888888;

  /* Table Body style variables. */
  --td-border-color-tb: var(--th-bg-color);
  --td-border-color-rl: var(--th-bg-color);
}

Within the download you'll find the following directories and files, logically grouping common assets and providing compiled or source variations. You'll see something like this:

table-fluid/
└── dist/
    ├── css/
    │   ├── table-fluid.css
    │   ├── table-fluid.css.map
    ├── js/
    │   ├── table-fluid.js
    │   └── table-fluid.js.map
    src/
    └── js/
        ├── table-fluid.js
        scss/
        ├── _table.scss
        ├── _variables.scss
        └── table-fluid.scss

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

See the Releases section of our GitHub project for changelogs for each release version.

Code and documentation copyright 2021 the maestro888 Code released under the MIT License.