@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

| Prop | Type | Description | | ------------------------------ | ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | columns | ReactGridXColumnProps[] | An array of column definitions, each containing a name and optional render function for custom rendering. | | data | any[] | The data to be displayed in the table. Each object should correspond to a row. | | theme | string | The theme for the table (default is "rgx-theme"). | | rowsPerPageOptions | number[] | Options for rows per page (default is [5, 10, 15]). | | paginationType | "rgx-table-pagination" \| "rgx-arrow-pagination" | The pagination type to use. Options are "rgx-table-pagination" or "rgx-arrow-pagination". | | paginationStyle | Record<string, React.CSSProperties> | Custom styles for pagination components. | | tableStyle | Record<string, React.CSSProperties> | Custom styles for the table and its elements. | | loaderStyle | Record<string, React.CSSProperties> | Custom styles for the loader component and its elements. | | popupStyle | Record<string, React.CSSProperties> | Custom styles for the popop component and its elements. | | tooltipStyle | Record<string, React.CSSProperties> | Custom styles for the tooltip component and its elements. | | serverSidePagination | boolean | Flag to indicate if server-side pagination should be used (default is false). | | onPaginationAndRowSizeChange | (page: number, rowsPerPage: number) => void | Callback function for pagination and row size changes. | | totalRows | number | The total number of rows in the database (required for server-side pagination). | | sortable | boolean | Enables sorting on a column (default is false). | | serverSideSorting | boolean | Enables server-side sorting (default is false). | | onSorting | (column:{key: string, direction: "asc" "desc"}[]) => void | Callback function to handle server-side sorting logic. | | onRowClick | (rowData: any) => void | Callback function triggered when a row is clicked, receiving the clicked row's data. | | expandedComponent | (rowData: any) => JSX.Element | A function that returns a component to render when a row is expanded, receiving the clicked row's data. | | loading | boolean | A boolean value indicating whether the table is in a loading state. When set to true, the table will show a loader. | | loaderComponent | ({style}:{style?:{}}) => JSX.Element | A function returning a custom loader when the table is loading. The style prop is optional for custom styling. | | selectionCheckbox | boolean | A boolean value that determines whether the table rows will have a checkbox for selection. If set to true, checkboxes will be shown for selecting rows. | | onSelectionCheck | (selectedRows: any[], isAllChecked: boolean) => void | A callback triggered when the selection state changes, receiving an array of selected rows and a boolean indicating if all rows are selected | | mode | 'light' or 'dark' | Defines the table's theme mode. Supports both light and dark modes for better visual adaptability. Default is 'light'. |

Column Props (ReactGridXColumnProps)

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

| Prop | Type | Description | | ---------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------- | | name | string | The column name displayed in the table header. | | key | string | The unique key that matches the data field for this column. | | render | (data: any) => JSX.Element \| string | Optional function to customize how cell data is rendered. | | sortable | boolean | Determines whether sorting is enabled for this column. | | onSort | (a: any, b: any, direction: "asc" \| "desc") => number | Optional custom sorting function. If provided, it overrides default sorting. | | tooltip | boolean | Enables tooltips for this column when set to true. | | tooltipCustomContent | (data: any) => string | Defines custom tooltip content for the column header. |

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.