@codezee-org/sixtify-smartgrid

A React package that simplifies form creation and table management!
This package leverages react-hook-form and AG Grid to provide a comprehensive set of input fields and components for building dynamic and powerful forms.
It also includes a complete Storybook for all components to help you explore and integrate them easily.

Features

• Integrates seamlessly with react-hook-form for form handling.
• Includes AG Grid for powerful table management.
• A wide variety of input components to suit all your needs.
• Fully documented with Storybook.

This package is 100% TypeScript.

Utilities

This Turborepo has some additional tools already setup for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

Remote Caching

Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:

cd my-turborepo
npx turbo login

This will authenticate the Turborepo CLI with your Vercel account.

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:

npx turbo link

Useful Links

Learn more about the power of Turborepo:

• Tasks
• Caching
• Remote Caching
• Filtering
• Configuration Options
• CLI Usage

Installation

Install the package using pnpm:

pnpm install @codezee-org/sixtify-smartgrid

Usage

Import the package in your React component:

import { SmartGrid } from '@codezee-org/sixtify-smartgrid';
import { useState } from 'react';
function MyDataGrid() {
  const [data] = useState([
    { id: 1, name: 'John Doe', email: '[email protected]', age: 28 },
    { id: 2, name: 'Jane Smith', email: '[email protected]', age: 34 },
    { id: 3, name: 'Bob Johnson', email: '[email protected]', age: 42 },
  ]);
  const columns = [
    {
      accessorKey: 'name',
      header: 'Name',
      enableSorting: true,
    },
    {
      accessorKey: 'email',
      header: 'Email',
      filterVariant: 'smartTextFilter',
    },
    {
      accessorKey: 'age',
      header: 'Age',
      filterVariant: 'smartNumberFilter',
    },
  ];
  return (
    <SmartGrid
      columns={columns}
      data={data}
      loading={false}
      totalCount={data.length}
      enableSorting
      enableFiltering
      rowSelection
      height="600px"
    />
  );
}

import { SmartGrid } from '@codezee-org/sixtify-smartgrid';
import { useRef } from 'react';

function AdvancedGrid() {
  const gridRef = useRef(null);

  const handleExport = () => {
    const selectedRows = gridRef.current?.getSelectedRows();
    console.log('Selected rows:', selectedRows);
  };

  return (
    <SmartGrid
      ref={gridRef}
      columns={columns}
      data={data}
      loading={false}
      totalCount={data.length}
      // Row selection
      rowSelection
      dynamicRowSelection={(row) => row.age > 18}
      // Grouping
      enableGrouping
      defaultGrouping={['department']}
      // Pinning
      enableColumnPinning
      checkBoxPinning="left"
      // Cell selection & clipboard
      enableCellSelection
      // Column management
      swipeableColumns
      columnArranger
      onApplyColumnArranger={(columns) => {
        console.log('Column arrangement saved:', columns);
      }}
      // Export actions
      exportData
      exportActions={[
        { label: 'Export to CSV', onClick: () => console.log('Export CSV') },
        { label: 'Export to Excel', onClick: () => console.log('Export Excel') },
      ]}
      // Styling
      StyleGridConfig={{
        getRowStyle: (row) => ({
          backgroundColor: row.status === 'active' ? '#e8f5e9' : 'transparent',
        }),
      }}
      height="calc(100vh - 200px)"
      rowHeight={42}
    />
  );
}

Documentation

For detailed usage and examples, check out the full documentation:
See Documentation