@deepbag/react-grid-x v0.3.0

@deepbag/react-grid-x

@deepbag/react-grid-x is a customizable and flexible React table component that supports pagination, sorting (client-side and server-side), dynamic rendering of table data, and customizable column rendering. It provides an easy-to-use interface for displaying tabular data with configurable columns, pagination, sorting, and styling.

Check out the live demo of @deepbag/react-grid-x here.

Compatibility

• This package supports React 18 and higher versions.
• It is optimized to work seamlessly with the latest React features, including Concurrent Mode and Suspense, ensuring smooth performance and improved rendering.
• Make sure your project is using React 18 or a newer version for full compatibility and performance benefits.

Features

• Customizable columns: Define columns with dynamic rendering of data using custom render functions.
• Sorting support: Supports sorting by multiple columns, including both numerical and alphabetical sorting and "Clear Sorting" popup is available when sorting is enabled.
• Server-side sorting: Optionally support server-side sorting for large datasets.
• Pagination support: Choose from different pagination types (rgx-table-pagination or rgx-arrow-pagination) with configurable rows per page and pagination controls.
• Customizable styling: Apply custom themes and styles to the table and pagination components.
• Server-side pagination: Optionally support server-side pagination for large datasets.
• Tooltip support: Enable tooltips for column headers with customizable content for better user guidance.
• Row click event: Capture row clicks using the onRowClick callback to handle user interactions.
• Expandable rows: Expand rows with a customizable expandedComponent to show additional details or content within the same row.
• Loader support: Customize the loader displayed when the table is in a loading state using the loaderComponent prop. If not provided, the default loader will be used.
• Row selection: Supports row selection with checkboxes, allowing both single and select-all functionality.
• Light & Dark Mode: Now supports both light and dark themes for better visual adaptability.

Installation

To install the library, you can use either npm or yarn:

Using Yarn

yarn add @deepbag/react-grid-x

Using npm

npm install @deepbag/react-grid-x

Usage

Here's a basic example of how to use the ReactGridX component in your React project:

import React from "react";
import { ReactGridX } from "@deepbag/react-grid-x";
import "@deepbag/react-grid-x/dist/themes/rgx-theme/rgx-theme-combined.css";

const App = () => {
  return (
    <div>
      <h1>React Grid Example</h1>
      <ReactGridX
        columns={[
          { name: "Name", key: "name", sortable: true },
          {
            name: "Age",
            key: "age",
            sortable: true,
            render: (data) => <span>{data.age}</span>,
          },
        ]}
        data={[
          { id: 1, name: "John", age: 28 },
          { id: 2, name: "Jane", age: 34 },
        ]}
        rowsPerPageOptions={[5, 10, 15]}
        paginationStyle={{
          "rgx-table-pagination": { backgroundColor: "#f5f5f5" },
        }}
        tableStyle={{
          "rgx-table": { width: "100%", borderCollapse: "collapse" },
        }}
        loaderStyle={{
          "rgx-loader-container": {},
        }}
        popupStyle={{ "rgx-popover-content": {} }}
        tooltipStyle={{ "rgx-tooltip-container": {} }}
      />
    </div>
  );
};

export default App;

Table Props

Column Props (ReactGridXColumnProps)

The ReactGridXColumnProps interface defines the properties that can be set for each column in the ReactGridX component.

Exports

The package exports the following components and props interfaces:

Components

• ReactGridX: The main table component.
• RGXTablePagination: Pagination component with table-based navigation.
• RGXArrowPagination: Pagination component with arrow-based navigation.
• RGXTooltip: The default tooltip component displayed for columns.
• RGXLoader: The default loader component displayed when the table is in a loading state, which can be customized using the loaderComponent prop.
• RGXPopover: The default popover component displayed for sorting and clearing sorting icons in the header.
• RGXSVGIcon: The default component for rendering SVG icons used in the table, ensuring consistent styling and performance.

Interfaces (Props)

• ReactGridXProps: Props for the ReactGridX component.
• RGXTablePaginationProps: Props for the RGXTablePagination component.
• RGXArrowPaginationProps: Props for the RGXArrowPagination component.
• ReactGridXColumnProps: Column props for defining columns in the ReactGridX component.
• RGXTooltipProps: Props for the RGXTooltip component.
• RGXLoaderProps: Props for the RGXLoader component.
• RGXPopoverProps: Props for the RGXPopover component.
• SvgIconProps: Props for the RGXSVGIcon component, used for rendering SVG icons consistently.

License

MIT License - see the LICENSE file for details.