The **Squizee DataTable API** allows developers to easily render powerful, dynamic, and customizable data tables within any webpage. This guide provides a complete, step-by-step setup and configuration reference.
The table will be dynamically generated and rendered inside the **`#data-table-wrapper`** DIV element. Ensure it is placed within the document body where you want the table to appear.
<div id="data-table-wrapper"></div>Check live demo: https://api.squizee.in/datatable/The main library script **must** be included in your **`<head>`** tag. Using the **`defer`** attribute ensures the script loads asynchronously without blocking HTML parsing.
<script src="https://api.squizee.in/datatable/main.js" defer></script>Call the global function loadData(data, type, options); in a script tag near the end of your page's body. This initiates the table rendering process.
data: The raw data (Array or String) to be processed.type: The mandatory string indicating the data format (e.g., 'json', 'csv').options: The configuration object (see Step 2).<script>
// ... data and options definitions ...
loadData(data, 'json', options);
</script>options ObjectThis example shows how to rename headers, arrange columns, hide selected columns, filter blank rows, and sort data before rendering.
const options = {
// Rename CSV/JSON keys into readable column headers
replace_headers: [
['post_id', 'Id'],
['post_title', 'Title'],
['category_id', 'Category Id'],
['subcategory_id', 'Subcategory Id'],
['category', 'Category'],
['subcategory', 'Subcategory'],
['tags', 'Tags'],
['slug', 'Slug'],
['visibility', 'Visibility'],
['role', 'Role'],
['thumbnail', 'Thumbnail'],
['html_file', 'Blog Data'],
['created_at', 'Created At'],
['updated_at', 'Updated At']
],
// Arrange the order of columns in the table
arrange_columns: [
'Id',
'Title',
'Category',
'Subcategory',
'Tags',
'Slug',
'Visibility',
'Role',
'Thumbnail',
'Blog Data',
'Created At',
'Updated At'
],
// 🔀 Controls how arranged columns are placed relative to other columns
//originalHeaders = [A, B, C, D, E, F]
//arrange_columns = [B, D]
// Supported values:
// (not set / default) → show ONLY arranged columns
// 'append' → arranged columns first, then remaining columns [B, D, A, C, E, F]
// 'prepend' → remaining columns first, then arranged columns [A, C, E, F, B, D]
// 'append_reversed' → arranged columns reversed, then remaining columns [D, B, A, C, E, F]
// 'prepend_reversed' → remaining columns first, then arranged columns reversed [A, C, E, F, D, B]
arrange_columns_method: 'prepend_reversed',
// 🔒 Hide specific columns from the final table
hide_columns: [
'Category Id',
'Subcategory Id'
],
pre_filter: {
// --- 1. KEYWORD & SIMPLE MATCHING ---
'Status': 'Active', // Exact match (String)
'Priority': 1, // Exact match (Number)
'Created At': 'today', // Current date only
'Updated At': 'yesterday', // Exactly 1 day ago
'Report Month': 'this_month', // Matches current YYYY-MM
'Meta Data': 'is_empty', // Matches "", null, or undefined
'Thumbnail': 'is_not_empty', // Filters out blank cells
// --- 2. MULTI-VALUE (OR LOGIC) ---
'Visibility': ['Public', 'Hidden', 'Archive'], // Matches any in the list
// --- 3. NUMERIC COMPARISONS ---
'Stock': { operator: 'gt', value: 100 }, // Greater Than (>)
'Score': { operator: 'lt', value: 50 }, // Less Than (<)
'Age': { operator: 'gte', value: 18 }, // Greater or Equal (>=)
'Discount': { operator: 'lte', value: 10 }, // Less or Equal (<=)
// --- 4. STRING & PATTERN MATCHING ---
'Author': { operator: 'not', value: 'Guest' }, // Exclusion (Not Equal)
'Title': { operator: 'contains', value: 'Draft' }, // Partial text match
'Slug': { operator: 'starts_with', value: 'web' }, // Matches start of string
'File': { operator: 'ends_with', value: '.pdf' }, // Matches end of string
'Email': { operator: 'regex', value: '@.*\.com$' },// Advanced Pattern matching
// --- 5. ADVANCED RANGES ---
// Range works for both Numbers and Date strings
'Price': { operator: 'range', start: 10, end: 500 },
'Publish Date': { operator: 'range', start: '2025-01-01', end: '2025-12-31' },
// --- 6. RELATIVE DATE MATH ---
// Filters records from the last X days relative to "now"
'Registered': { operator: 'last_days', days: 30 }
},
// Remove rows with completely blank data
filter_blanks: true,
// Sort data before rendering
sort_by: 'Created At',
sort_direction: 'desc/asc'
};
The `loadData` function supports multiple common data formats, automatically parsing them into the required 2D array structure (Headers + Rows) before rendering.
| Type Key | Input Format | Description |
|---|---|---|
| **`'json'` | JavaScript Array of Objects (`[{...}, {...}]`) | Standard object array where keys become column headers. |
| **`'array'` | JavaScript 2D Array (`[['H1','H2'], ['R1C1','R1C2']]`) | Raw array format, where the first row is assumed to be the headers. |
| **`'csv'` | String | Comma-Separated Values string. |
| **`'tsv'` | String | Tab-Separated Values string. |
| **`'xml'` | String | XML string, typically looking for ` |
| **`'yaml'` | String | YAML string, supporting basic key-value pairs per object block. |
The `options` object is the central point for customizing the entire data table. All properties are optional unless a specific feature is desired.
const tableConfig = {
// ----------------------------------------------------
// 1. GLOBAL SETTINGS
// ----------------------------------------------------
enable_wbr: true,
show_loader: true,
loader_text: 'Blogs are loading pls wait.....',
onerror_text: 'There is an error pls wait...',
// ----------------------------------------------------
// 2. WORD BREAK SETTINGS
// ----------------------------------------------------
wbr_config: {
"Customer Name": { wbr: true, wbr_limit: 15 },
"Order ID": { wbr: false },
"Product Code": { wbr: false },
"Shipping Address": { wbr: true, wbr_limit: 25 }
},
// ----------------------------------------------------
// 3. COLUMN CONFIGURATION
// ----------------------------------------------------
column_config: {
"Customer Name": {
class: 'text-left'
},
"Product Name": {
class: 'product-column',
type: 'image',
label: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/1024px-No_image_available.svg.png',
label_type: 'image',
url: 'https://www.example.com'
},
"Order ID": {
class: 'text-center'
},
"Tracking Number": {
class: 'link-column',
type: 'link',
label: ' Website',
label_type: 'html',
url: 'https://www.example.com',
default_image: 'https://img.freepik.com/premium-photo/3d-rendering-3d-illustration-mountains-sun-landscape-gallery-symbol-minimal-image-photo-jpg-file-icon_640106-403.jpg?semt=ais_hybrid&w=740&q=80'
},
"Invoice Number": {
type: 'link',
label: 'Download Invoice',
label_type: 'text',
url: 'https://www.example.com'
},
"Actions": {
type: 'button',
disabled: false,
buttons: [
{
label: 'Edit',
class: 'btn btn-primary btn-sm',
action: `alert('Edit item with ID: {{"Invoice Number" + 1}}');`
},
{
label: 'Delete',
class: 'btn btn-danger btn-sm',
action: `if(confirm('Are you sure you want to delete this?')) { deleteItem({{"Order ID"}}); }`
}
]
},
"View Invoice": {
type: 'link',
label: 'View',
url: 'https://www.example.com/invoice/{{"Invoice Number"}}'
},
"Select": {
type: 'checkbox',
label: ' ',
action: `console.log('Selected row with ID: {{"Invoice Number"}}')`,
disabled: false,
class: 'check-box'
},
"Tags": {
scrollable: true
},
"Action": {
type: 'text'
}
},
// ----------------------------------------------------
// 4. COLUMN CREATION
// ----------------------------------------------------
create_columns: [
{ header: "Action", position: 'start' },
{ header: "View Invoice", position: 'after', existing_header: 'Invoice Number' },
{ header: "Actions", position: 'before', existing_header: 'Invoice Number' },
{ header: "Select", position: 'start' }
],
// ----------------------------------------------------
// 5. CONDITIONAL FORMATTING
// ----------------------------------------------------
conditional_formatting: {
"Order Status": [
{ condition: 'equals', value: 'Shipped', class: 'status-shipped' },
{ condition: 'includes', value: 'Pending', class: 'status-pending' },
{ condition: 'equals', value: 'Delivered', class: 'status-delivered' }
],
"Order Total": [
{ condition: 'greater_than', value: 1000, class: 'highlight-high-value' },
{ condition: 'less_than', value: 50, class: 'highlight-low-value' }
]
}
};
The **`type`** key in **`column_config`** determines how the cell content is rendered. The available types are:
| Type | Description | Essential Configuration Key(s) |
|---|---|---|
| **text** | Default rendering for all data. | `class` |
| **link** | Renders a clickable hyperlink (`<a>`). | `url`, `label` (text/HTML), `label_type` |
| **image** | Displays an image (`<img>`), optionally wrapped in a link. Supports fallback behavior using default_image if the main image is missing or fails to load. | `label` (image URL), `label_type: 'image'`, `url` (optional), `default_image` (optional fallback or blank for none) |
| **button** | Renders one or more buttons, triggering JavaScript actions. | `buttons` (array of objects), `disabled` |
| **checkbox** | Renders a selectable checkbox input. | `action` (triggered on toggle), `disabled` |
To inject dynamic data from the current row into a **`url`** or **`action`** string, use the column header name enclosed in double curly braces:
{{"Column Header Name"}}Example: The action string action: \`deleteItem({{"Order ID"}});\` dynamically passes the **`Order ID`** value from the current row to the `deleteItem` function.
The data table includes a robust set of keyboard shortcuts for navigation, selection, and utility actions, enhancing speed and accessibility.
| Shortcut (Windows/Linux) | Shortcut (macOS) | Action | Description |
|---|---|---|---|
| **`Ctrl + Arrow Keys`** | **`Cmd + Arrow Keys`** | Navigate to Edge | Jumps the active cell to the first or last cell in the current row (`Left`/`Right`) or column (`Up`/`Down`). |
| **`Arrow Keys`** | **`Arrow Keys`** | Move Active Cell | Moves the active cell one position (clears existing selection). |
| **`Shift + Arrow Keys`** | **`Shift + Arrow Keys`** | Extend Selection | Extends the selection area from the anchor cell in the direction of the arrow. |
| **`Ctrl + A`** | **`Cmd + A`** | Select All / Clear | Toggles between selecting all data cells and clearing all current selections. |
| **`Ctrl + C`** | **`Cmd + C`** | Copy Selection | Copies the content of all selected cells to the clipboard (tab-separated by row). |
| **`Ctrl + F`** | **`Cmd + F`** | Focus Search Input | Toggles focus on the main table search bar. |
| **`Ctrl + Shift + F`** | **`Cmd + Shift + F`** | Toggle Filter Panel | Shows or hides the advanced column filtering panel. |
| **`Ctrl + Shift + C`** | **`Cmd + Shift + C`** | Clear All Filters | Resets and clears all active filters applied to the table. |
| **`Ctrl + +/-` or `=` | **`Cmd + +/-` or `=` | Zoom In/Out | Adjusts the visual zoom level of the entire data table container. |
| **`Ctrl + S`** | **`Cmd + S`** | Toggle Toolbar | Shows or hides the main data table toolbar buttons. |
| **`Alt + ArrowRight`** | **`Option + ArrowRight`** | Next Page | Navigates to the next page in the pagination sequence. |
| **`Alt + ArrowLeft`** | **`Option + ArrowLeft`** | Previous Page | Navigates to the previous page in the pagination sequence. |
Note: Cell selection via **drag-and-drop** with mouse is also fully supported, including **auto-scrolling** when the mouse reaches the edge of the container.