Documentation

Installation

Install SkarGrid via CDN or npm.

CDN

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/skargrid@1.3.0/dist/skargrid.min.css">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/skargrid@1.3.0/dist/skargrid.min.js"></script>

npm

npm install skargrid

Basic Usage

Create a simple table with minimal configuration.

HTML

<div id="my-table"></div>

JavaScript

const data = [
  { name: 'John Doe', email: 'john@example.com' },
  { name: 'Jane Smith', email: 'jane@example.com' }
];

const columns = [
  { field: 'name', title: 'Name' },
  { field: 'email', title: 'Email' }
];

new Skargrid('my-table', {
  data: data,
  columns: columns
});

Configuration Options

Only the options below are guaranteed to be supported in the current version of SkarGrid.

Option	Type	Default	Description
`data`	Array	`[]`	Array of data objects (rows)
`columns`	Array	`[]`	Array of column definitions (see below)
`pagination`	Boolean	`false`	Enable pagination
`pageSize`	Number	`10`	Items per page
`pageSizeOptions`	Array	`[10,25,50,100]`	Page size dropdown options
`sortable`	Boolean	`false`	Enable sorting for all columns
`searchable`	Boolean	`false`	Enable global search box
`columnFilters`	Boolean	`false`	Enable column filter dropdowns
`selectable`	Boolean	`false`	Enable row selection (checkboxes)
`columnConfig`	Boolean	`false`	Enable column config (show/hide, reorder)
`persistColumnConfig`	Boolean	`false`	Save column config in localStorage
`storageKey`	String	`'skargrid-config-{id}'`	Key for localStorage persistence
`theme`	String	`'light'`	Table theme: `'light'` or `'dark'`
`className`	String	`'skargrid'`	Custom table CSS class
`exportCSV`	Boolean	`false`	Enable CSV export button
`exportXLSX`	Boolean	`false`	Enable XLSX export button
`exportFilename`	String	`'skargrid-export'`	Base filename for exports
`exportSelectedOnly`	Boolean	`false`	Export only selected rows
`noDataText`	String	`'No data available'`	Text to show when table is empty
`rowId`	String	—	Field to use as unique row id
`rowClass`	Function	—	Function to set custom class per row
`onRowClick`	Function	—	Callback for row click: `(row, index) => {}`
`onSelectionChange`	Function	—	Callback for selection change
`onFilterChange`	Function	—	Callback for filter change
`onPageChange`	Function	—	Callback for page change
`onSortChange`	Function	—	Callback for sort change
`loading`	Boolean	`false`	Show loading shimmer overlay
`persistSelection`	Boolean	`false`	Keep selection after data reload
`showFooter`	Boolean	`false`	Show table footer (if supported)
`autoHeight`	Boolean	`false`	Table grows to fit content (no scroll)
`fixedHeader`	Boolean	`false`	Table header stays fixed on scroll
`labels`	Object	`{...}`	Custom labels for internationalization

Column Definition Options:

Option	Type	Default	Description
`field`	String	—	Field name in data object (required)
`title`	String	—	Column header label
`width`	String	—	Column width (e.g. '120px', '10%')
`visible`	Boolean	`true`	Show/hide column
`sortable`	Boolean	`false`	Enable sorting for this column
`sortType`	String	`'string'`	Sort type: 'string', 'number', 'date'
`filterable`	Boolean	`false`	Show filter for this column
`filterType`	String	`'text'`	Filter type: 'text', 'number', 'date', 'select'
`render`	Function	—	Custom cell render: `(value, row) => html`
`formatter`	Function	—	(legacy) Custom cell formatter

Internationalization (i18n)

SkarGrid supports full internationalization through the labels option. You can customize all user-facing text to match your application's language.

Available Labels

The following labels can be customized:

Label Key	Default (English)	Description
`searchPlaceholder`	'Search all columns...'	Global search input placeholder
`clearFilters`	'Clear Filters'	Button to clear all filters
`exportCSV`	'Export CSV'	CSV export button text
`exportXLSX`	'Export XLSX'	XLSX export button text
`filterTitle`	'Filter: {title}'	Filter dropdown title
`selectAll`	'Select All'	Select all rows checkbox label
`filterSearchPlaceholder`	'Search...'	Filter dropdown search placeholder
`filterInputPlaceholder`	'Type to filter...'	Filter input placeholder
`clear`	'Clear'	Clear button in filter dropdown
`apply`	'Apply'	Apply button in filter dropdown
`showing`	'Showing {start} to {end} of {total} entries'	Pagination info text
`filteredOfTotal`	'filtered from {total} total'	Filtered results info
`itemsPerPage`	'Items per page:'	Page size selector label
`noRowsSelected`	'No rows selected to export.'	Export warning message
`columnConfigTitle`	'Configure Columns'	Column config modal title
`columnConfigDescription`	'Check to display, drag or use arrows to reorder'	Column config description
`restore`	'Restore'	Restore defaults button
`cancel`	'Cancel'	Cancel button
`noData`	'No data available'	Empty table message
`loading`	'Loading...'	Loading state message

Example: Portuguese Labels

const table = new Skargrid('myTable', {
  data: myData,
  columns: myColumns,
  labels: {
    searchPlaceholder: 'Buscar em todas as colunas...',
    clearFilters: 'Limpar Filtros',
    exportCSV: 'Exportar CSV',
    exportXLSX: 'Exportar XLSX',
    filterTitle: 'Filtrar: {title}',
    selectAll: 'Selecionar Todos',
    clear: 'Limpar',
    apply: 'Aplicar',
    showing: 'Mostrando {start} até {end} de {total} registros',
    itemsPerPage: 'Itens por página:'
  }
});

Tip: You can also internationalize column titles by setting the title property in your column definitions.

API Reference

Constructor

new Skargrid(selector, options)

Parameters

selector: CSS selector or DOM element
options: Configuration object

Contents