@smartjkc/datalist

A flexible and feature-rich React data list component with pagination, sorting, and customizable columns.

Installation

npm install @smartjkc/datalist

or

yarn add @smartjkc/datalist

Peer Dependencies

This package requires React and React DOM (version 16.8.0 or higher) to be installed in your project.

npm install react react-dom

Usage

Basic Example

import React, { useState } from 'react';
import JkcDataList, { Column } from '@smartjkc/datalist';
import '@smartjkc/datalist/dist/JkcDataList/JkcDataList.scss';

const App = () => {
  const [pageNo, setPageNo] = useState(1);
  const pageSize = 20;

  const columns: Column[] = [
    { key: 'id', label: 'ID', width: '100px' },
    { key: 'name', label: 'Name', sortable: true },
    { key: 'email', label: 'Email' },
    { 
      key: 'status', 
      label: 'Status',
      render: (value) => <span className={value === 'active' ? 'text-success' : 'text-danger'}>{value}</span>
    }
  ];

  const data = [
    { id: 1, name: 'John Doe', email: '[email protected]', status: 'active' },
    { id: 2, name: 'Jane Smith', email: '[email protected]', status: 'inactive' },
    // ... more data
  ];

  return (
    <JkcDataList
      columns={columns}
      data={data}
      totalCount={100}
      pageNo={pageNo}
      pageSize={pageSize}
      onPageChange={setPageNo}
      showPagination={true}
    />
  );
};

export default App;

With Sorting

const [sortBy, setSortBy] = useState<string | null>(null);
const [sortDirection, setSortDirection] = useState<'asc' | 'desc' | null>(null);

const handleSortChange = (columnKey: string, direction: 'asc' | 'desc') => {
  setSortBy(columnKey);
  setSortDirection(direction);
  // Implement your sorting logic here
};

<JkcDataList
  columns={columns}
  data={data}
  sortBy={sortBy}
  sortDirection={sortDirection}
  onSortChange={handleSortChange}
  // ... other props
/>

With Header

<JkcDataList
  columns={columns}
  data={data}
  showHeader={true}
  headerTitle="Search Results (25)"
  renderPaginationInHeader={true}
  // ... other props
/>

Props

JkcDataListProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | columns | Column[] | required | Array of column definitions | | data | any[] | required | Array of data objects to display | | loading | boolean | false | Show loading state | | totalCount | number | 0 | Total number of items for pagination | | pageNo | number | 1 | Current page number | | pageSize | number | 20 | Number of items per page | | onPageChange | (page: number) => void | - | Callback when page changes | | showPagination | boolean | true | Show/hide pagination controls | | emptyMessage | string | 'No data available' | Message to show when data is empty | | className | string | '' | Additional CSS class name | | rowKey | string \| ((row: any) => string \| number) | 'id' | Key to identify each row | | onRowClick | (row: any) => void | - | Callback when a row is clicked | | renderPaginationInHeader | boolean | false | Render pagination in header section | | sortBy | string \| null | null | Currently sorted column key | | sortDirection | 'asc' \| 'desc' \| null | null | Current sort direction | | onSortChange | (sortBy: string, sortDirection: 'asc' \| 'desc') => void | - | Callback when sort changes | | headerTitle | string \| React.ReactNode | - | Title to display in header | | showHeader | boolean | false | Show/hide the header section |

Column

| Property | Type | Default | Description | |----------|------|---------|-------------| | key | string | required | Unique key for the column (should match data property) | | label | string | required | Column header label | | render | (value: any, row: any) => React.ReactNode | - | Custom render function for cell content | | align | 'left' \| 'center' \| 'right' | 'left' | Text alignment | | width | string | - | Column width (e.g., '100px', '20%') | | minWidth | string | - | Minimum column width | | maxWidth | string | - | Maximum column width | | sortable | boolean | false | Enable sorting for this column |

Styling

Import the SCSS file in your application:

import '@smartjkc/datalist/dist/JkcDataList/JkcDataList.scss';

If you're using CSS instead of SCSS, you may need to configure your build tool to handle SCSS files, or compile the SCSS to CSS manually.

License

ISC

Author

Softsmart