DataGrid

DataGrid displays structured tabular data with support for sizing, borders, striped rows, loading states and custom cell rendering.

Import

import { DataGrid } from "@shivms/ui";

Sizes

Small

Name	Role	Department	Status
John Smith	Frontend Developer	Engineering	Active
Sarah Johnson	UI Designer	Design	Active
Michael Brown	Backend Developer	Engineering	Away

Medium

Name	Role	Department	Status
John Smith	Frontend Developer	Engineering	Active
Sarah Johnson	UI Designer	Design	Active
Michael Brown	Backend Developer	Engineering	Away

Large

Name	Role	Department	Status
John Smith	Frontend Developer	Engineering	Active
Sarah Johnson	UI Designer	Design	Active
Michael Brown	Backend Developer	Engineering	Away

Bordered

Enabled

Name	Role	Department	Status
John Smith	Frontend Developer	Engineering	Active
Sarah Johnson	UI Designer	Design	Active
Michael Brown	Backend Developer	Engineering	Away

Disabled

Name	Role	Department	Status
John Smith	Frontend Developer	Engineering	Active
Sarah Johnson	UI Designer	Design	Active
Michael Brown	Backend Developer	Engineering	Away

Striped

Default

Name	Role	Department	Status
John Smith	Frontend Developer	Engineering	Active
Sarah Johnson	UI Designer	Design	Active
Michael Brown	Backend Developer	Engineering	Away

Striped

Name	Role	Department	Status
John Smith	Frontend Developer	Engineering	Active
Sarah Johnson	UI Designer	Design	Active
Michael Brown	Backend Developer	Engineering	Away

Hoverable

Enabled

Name	Role	Department	Status
John Smith	Frontend Developer	Engineering	Active
Sarah Johnson	UI Designer	Design	Active
Michael Brown	Backend Developer	Engineering	Away

Disabled

Name	Role	Department	Status
John Smith	Frontend Developer	Engineering	Active
Sarah Johnson	UI Designer	Design	Active
Michael Brown	Backend Developer	Engineering	Away

Sticky Header

Sticky

Name	Role	Department	Status
John Smith	Frontend Developer	Engineering	Active
Sarah Johnson	UI Designer	Design	Active
Michael Brown	Backend Developer	Engineering	Away

Loading

Loading

Loading...

Empty State

No Data

Name	Role	Department	Status
No data available.

Custom Render

Custom Cell

Employee	Role	Status
John Smith	Frontend Developer	Active
Sarah Johnson	UI Designer	Active
Michael Brown	Backend Developer	Away

Examples

Employee Directory

Employee	Role	Status
John Smith	Frontend Developer	Active
Sarah Johnson	UI Designer	Active
Michael Brown	Backend Developer	Away