Astronaut Library .js

Table

Create tables and insert into html via javascript.

Download Table v1.0.0
Download Library Complete v1.0.0

How to use:

index.html
<script src="src/js/astronaut.table.js"></script>
script.js
//'astronaut.', 'astlibjs.' or 'ast.' can be used!

astronaut.table({
  selector: '#tab_run',
  thead:['Name','Last Name'],
  tbody:[
    ['John','Doe'],
    ['Peter','Stanbridge'],
  ]
})

Opções:

Option Type Value Description
selector String/HTMLElement '#id' Defines the place where the table will be inserted
thead Array [' ', ' '] Sets the header
tbody Array [' ', ' '] Define the body
style Object {object} Define your styles

Selector:

Defines the place where the table will be inserted

script.js
astronaut.table({
  selector: '#tab_run'
})
or
script.js
var tabRun = document.querySelector('#tab_run')

astronaut.table({
  selector: tabRun
})

Thead:

Sets the header

script.js
astronaut.table({
  selector: '#tab_run',
  thead: ['id', 'Name']
})

Tbody:

Define the body

script.js
astronaut.table({
  selector: '#tab_run',
  thead: ['id', 'Name'],
  tbody: [
    ['001', 'Jhon']
  ]
})

Style:

Define your styles

Opções:

Option Type Default Description
fontSize String auto Set font size
theadColor String #939da5 Set thead font color
tbodyColor String #939da5 Set tbody font color
theadBackground String #1a202363 Set thead background color
tbodyBackground String #232A2F Set tbody background color
borderRadius String 0.6rem Defines the rounded edge
blur String not defined! Apply blur in the background
trowHover String not defined! Defines the hover effect on each line (tr)
accepted values: ' #color ' or ' #color timeTransition '
borderInside String not defined! Defines an outer border on the table
accepted values: ' size #color '
borderOutside String not defined! Sets the inner borders on columns and rows
accepted values: ' size #color '
boxShadow String not defined! Define a box-shadow

Example: trowHover:

script.js
astronaut.table({
  selector: '#tabTesttrowHover',
  thead: ['id', 'Name'],
  tbody: [
    ['001', 'Jhon'],
    ['002', 'Peter']
  ],
  style: {
    trowHover: '#eee 0.5s',
  }
})

Example: borderInside:

script.js
astronaut.table({
  selector: '#tabTestborderInside',
  thead: ['id', 'Name'],
  tbody: [
    ['001', 'Jhon'],
    ['002', 'Peter']
  ],
  style: {
    borderInside: '2px #eee',
  }
})

borderInside: has a third and fourth boolean parameter, which indicates the horizontal and vertical edge!

script.js
astronaut.table({
  selector: '#tabTestborderInsidexy',
  thead: ['id', 'Name'],
  tbody: [
    ['001', 'Jhon'],
    ['002', 'Peter']
  ],
  style: {
    borderInside: '2px #eee true false'
  }
})

This example sets a vertical edge to false and keeps a vertical edge to true

Example: borderOutside:

script.js
astronaut.table({
  selector: '#tabTestborderOutside',
  thead: ['id', 'Name'],
  tbody: [
    ['001', 'Jhon'],
    ['002', 'Peter']
  ],
  style: {
    borderOutside: '2px #eee',
  }
})