Reactables
GigaTables is a ReactJS plug-in to help web-developers process table-data in applications and CMS, CRM, ERP or similar systems.
Install / Use
/learn @GigaTables/ReactablesREADME
GigaTables ReactJS plug-in 
GigaTables supports the following capabilities:
-- ajax data processing/editing (CRUD),
-- classic pagination or infinite scroll,
-- column sorting,
-- live cell edit,
-- common search (through all columns),
-- discrete (per column) search,
-- ajax files upload,
-- shft/ctrl rows selection,
-- fixed header,
-- trigger functions,
-- dynamic column content functions,
-- 10 popular languages,
-- data load for period interval,
-- hot keys,
-- plugins
-- material-ui theme
and more...
- Installation
- Demo
- Installation based on browser script implementation
- Getting Started
- An example of using GigaTables with Editor tool
- Pagination or Infinite scroll
- Ajax or local data
- Ajax autoload period
- Hot keys
- Plugins
- Themes
- Headers
- Aggregate Footer
- Data export
- Table options
- Editor options
- FAQ
Installation
- npm i gigatables-react
After installation has been completed, add import to your main.js like this:
import { Reactables, Header } from 'gigatables-react'
see how to create table with JSX below.
Demo
Installation based on browser script implementation (which U can download from build/ dir)
<script src="build/index.js"></script>
// or
<script src="wherever/whatever.js"></script>
Getting Started
To initialize plug-in and to bind GigaTables with table structure - set settings prop with options and table structure in JSX format.
The <Reactables> tag, it's Headers and all the stuff like pagination, per page selector will be constructed on the fly.
Minimal configuration
Add js below to main.js file:
import React from 'react'
import ReactDOM from 'react-dom'
import {Reactables, Header} from 'gigatables-react'
let settings = {
struct: {// all in
search: ['top', 'bottom'],
rowsSelector: ['asc', 'top', 'bottom'],
pagination: ['bottom']
},
ajax: 'http://example.com/your/tabledata',
// or u can set local json data
// data: localData,
columns: [
{data: "id"},
{data: "desc"},
{data: "title"},
{data: "date"},
{data: "info"},
{data:"field1"},
{data:"field2"},
{data:"field3", visible: false}
]
};
ReactDOM.render(
<Reactables settings={settings}>
<Header data="id">ID</Header>
<Header data="title">Name</Header>
<Header data="desc">Description</Header>
<Header data="date">Date</Header>
<Header data="info">Info</Header>
<Header data="field2">Field123 but data from field2</Header>
<Header data="field1">Field1</Header>
<Header data="field3">Field3 invisible</Header>
<Header>Field3 invisible</Header>
</Reactables>,
document.getElementById('app'));
If u run GT from scratch - don't forget to install dependencies, such as:
"dependencies": {
"react": "^16.3.1",
"react-dom": "^16.3.1",
"classnames": "^2.2.5",
"css-loader": "^0.26.1",
"expect": "^1.20.2",
"file-loader": "^0.10.0",
"hoek": "^5.0.3",
"lodash": "4.17.4",
"prop-types": "^15.6.0",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"resolve-url": "^0.2.1",
"style-loader": "^0.13.1",
"superagent": "^3.5.2",
"url-loader": "^0.5.7",
// for plugins
"react-minimal-pie-chart": "^3.0.2",
"react-rte": "^0.15.0",
"react-trend": "^1.2.4",
// dev deps
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-react": "^6.24.1",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
},
Also add index.html file to the root and put the following content in it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
Be sure to create a webpack.config.js file and copy content from the same file in this repo.
Get to the project directory and run npm start.
That's it, you are up and running.
Advanced configuration with opts and editor
let settings = {
struct: {
search: ['top', 'bottom'],
rowsSelector: ['asc', 'top', 'bottom'],
pagination: ['bottom'],
fixedHeader: true, // default false
editableCells: true, // default false
},
lang: 'en', // english default
perPageRows: [25, 50, 100, 200, 500],
defaultPerPage: 50,
ajax: 'https://example.com/your/tabledata',
requestType: 'GET',
columns: [
{// include all defaults
data: "id",
sortable: true, // true by defualt
visible: true, // true by defualt
searchable: true, // true by defualt
discreteSearch: true, // false by default
discreteSearchValue: function (title) {
return 'Search in field ' + title;
}
},
{
data: "title",
cISearch: true // default false
},
{
data: "desc",
sortable: false,
discreteSearch: true,
discreteCISearch: true // default false
},
{
data: "date",
searchable: false
},
{
data: "info"
},
{data:"field1"},
{data:"field2"},
{data:"field3", visible: false}
],
columnOpts: [
{
render: function (data, row, type) {
return '<div><form method="post" class="accForm" action=""><input type="hidden" name="action" value="forms" /><input type="hidden" name="id" value="' + row.id + '" /><div>' + data + '</div></form></div>';
},
target: 2
},
{
render: function (data, row, type) {
return '<div><form method="post" class="accForm" action=""><input type="hidden" name="action" value="forms" /><input type="hidden" name="id" value="' + row.id + '" /><div>' + data + '</div></form></div>';
},
target: 3
}
],
tableOpts: {
buttons: [
{extended: "editor_create", editor: editor, triggerAfter: (function () {
console.log('after create');
}), triggerBefore: (function () {
console.log('before create');
})},
{extended: "editor_edit", editor: editor},
{extended: "editor_remove", editor: editor, triggerAfter: (function () {
console.log('after del');
})}
],
buttonsPosition: ['top', 'bottom'],
theme: 'std'
}
};
The table is defined like in example below:
ReactDOM.render(
<Reactables editor={editor} settings={settings}>
<Header data="id">ID</Header>
<Header data="title">Name</Header>
<Header data="desc">Description</Header>
<Header data="date">Date</Header>
<Header data="info">Info</Header>
<Header data="field2">Field123 but data from field2</Header>
<Header data="field1">Field1</Header>
<Header data="field3">Field3 invisible</Header>
<Header>Field3 invisible</Header>
</Reactables>,
document.getElementById('app'))
data attribute is needed to glue columns to json data steadily.
JSON structure to return from provided url in "ajax" GigaTables option:
{
"rows": [
{
"GT_RowId": 2, // optional
"id": 2, // if there is no GT_RowId - try to fetch "id"
"title": "Test 2st row",
"desc": "<input type=\"text\" name=\"ttl\" value=\"Test 2nd row Test 2nd row Test 2nd row
Test 2st row Test 2st row\" \/> ",
"date": "20:40:37 17:06:2015",
"info": "some info some info some info some info"
},
{
"GT_RowId": 1,
"id": 1,
"title": "Test 1st row",
"desc": "<input type=\"text\" name=\"ttl\" value=\"Test 1st row Test 1st row Test 1st row
Test 1st row Test 1st row\" \/> ",
"date": "20:40:38 17:06:2015",
"info": "some info some info some info some info"
}, ...
An example of using GigaTables with Editor tool
First of all You should define an object Editor like this:
let editor = {
ajax: 'http://example.com/editor.php',
/
Related Skills
bluebubbles
329.0kUse when you need to send or manage iMessages via BlueBubbles (recommended iMessage integration). Calls go through the generic message tool with channel="bluebubbles".
slack
329.0kUse when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
frontend-design
81.1kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Agent Development
81.1kThis skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
