npm install @syncfusion/ej2-react-grids --save

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-grids/styles/tailwind3.css";

import { registerLicense } from '@syncfusion/ej2-base';

// Call this before initializing any Syncfusion components
registerLicense('Your license key here');

import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Page } from '@syncfusion/ej2-react-grids';

function App() {
  const data = [
    { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
    { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 }
  ];

  return (
    <GridComponent dataSource={data} allowPaging={true}>
      <ColumnsDirective>
        <ColumnDirective field='OrderID' width='100' />
        <ColumnDirective field='CustomerID' width='100' />
        <ColumnDirective field='Freight' width='100' format="C2" />
      </ColumnsDirective>
      <Inject services={[Page]} />
    </GridComponent>
  );
}

export default App;

<GridComponent dataSource={data} enablePersistence={true}>
  {/* Component content */}
</GridComponent>

import { enableRtl } from '@syncfusion/ej2-base';

// Global RTL enablement
enableRtl(true);

// OR per-component
<ListViewComponent enableRtl={true} />

import { Animation } from '@syncfusion/ej2-base';

useEffect(() => {
  const animation = new Animation({ duration: 5000, delay: 2000 });
  animation.animate(element, { name: 'FadeOut' });
}, []);

import { Draggable, Droppable } from '@syncfusion/ej2-base';

useEffect(() => {
  const draggable = new Draggable(document.getElementById('draggable'), { clone: false });
  const droppable = new Droppable(document.getElementById('droppable'), {
    drop: (e) => {
      e.droppedElement.textContent = 'Dropped!';
    }
  });
}, []);