Get Started

Start using SkarGrid in your projects in minutes

Free Version PRO Version

Free Version

Perfect for small projects and prototyping

Always Free

1. Installation

Choose your preferred installation method:

CDN (Recommended for quick prototyping)

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

<!-- Add before closing body tag -->
<script src="https://cdn.jsdelivr.net/npm/skargrid@1.3.0/dist/skargrid.min.js"></script>

npm

npm install skargrid

2. Add HTML

Add a container element to your HTML:

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

3. Initialize

Create your table with JavaScript:

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

new Skargrid('my-table', {
  data: data,
  columns: [
    { field: 'id', title: 'ID' },
    { field: 'name', title: 'Name' },
    { field: 'email', title: 'Email' }
  ]
});

Full Example

<!-- HTML -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/skargrid@1.3.0/dist/skargrid.min.css">
<div id="my-table"></div>
<script src="https://cdn.jsdelivr.net/npm/skargrid@1.3.0/dist/skargrid.min.js"></script>
<script>
const data = [
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
];
new Skargrid('my-table', {
  data: data,
  columns: [
    { field: 'id', title: 'ID' },
    { field: 'name', title: 'Name' },
    { field: 'email', title: 'Email' }
  ]
});
</script>