QbsTable Component

npm install qbs-react-grid

import { QbsTable } from 'qbs-react-grid';
import 'qbs-react-grid/dist/css/qbs-react-grid.css';

<QbsTable data={[{ id: 1, name: 'John Doe' }]} columns={[{ title: 'Name', field: 'name' }]} />;

Description

QbsTable is a versatile and customizable table component designed to display tabular data efficiently. It provides features like sorting, column grouping, and various cell customizations.

Props

QbsTableProps

| Prop | Type | Description | | -------------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------- | | columns | readonly QbsColumnProps[] | Defines each column in the table. | | data | readonly any[] | Data objects to be displayed in the table rows. | | actionProps | readonly ActionProps[] | Defines actions for each row. | | isTree | boolean | Specifies if the table should render as a tree. | | pagination | boolean | Enables pagination for the table. | | paginationProps | PaginationProps | Controls pagination properties. | | handleColumnSort | (sortColumn: string, sortType: string) => void | Handles column sorting. | | sortType | 'desc' \| 'asc' | Defines the sorting type. | | sortColumn | string | Defines the column being sorted. | | selection | boolean | Enables row selection. | | onSelect | (keys: any[]) => void | Called when rows are selected. | | title | string | Specifies the table title. | | search | boolean | Enables search functionality. | | onSearch | (key?: string) => void | Called when a search is performed. | | asyncSearch | boolean | If true, the search will be asynchronous. | | searchValue | string | Represents the current value in the search input. | | handleSearchValue | (value?: string) => void | Handles search input changes. | | theme | string | Defines the theme applied to the table. | | onRowClick | (data: any) => void | Called when a row is clicked. | | cellBordered | boolean | If true, each cell will have a border. | | bordered | boolean | If true, the table will have a border. | | height | number | Defines the table height. | | minHeight | number | Defines the minimum table height. | | maxHeight | number \| string | Defines the maximum table height. | | wordWrap | boolean \| 'break-all' \| 'break-word' \| 'keep-all' \| undefined | Defines the word wrap style for the content in a cell. | | dataRowKey | string | Defines the key field in the data. | | onExpandChange | (expanded: boolean, rowData: any) => void | Called when a row expands or collapses. | | defaultExpandAllRows | boolean | If true, all rows will be expanded by default. | | expandedRowKeys | readonly number[] | Contains the array of expanded row keys. | | setExpandedRowKeys | (value: readonly number[]) => void | Sets expanded row keys. | | handleMenuActions | (actions: ActionProps, rowData: any) => void | Handles menu actions. | | handleRowExpanded | (rowData: any) => React.ReactNode | Renders expanded row content. | | shouldUpdateScroll | boolean | If true, the table will update the scroll position on data or size change. | | rowExpand | boolean | Enables row expand functionality. | | primaryFilter | ReactElement \| ReactNode | Defines the primary filter component. | | advanceFilter | ReactElement \| ReactNode | Defines the advanced filter component. |

QbsColumnProps

| Prop | Type | Description | | ----------- | -------------------------------- | -------------------------------------------------------------------------- | | title | string | Title of the column. | | field | string | Field in the data that this column represents. | | sortable | boolean | Specifies if the column is sortable. | | resizable | boolean | Specifies if the column is resizable. | | fixed | boolean | If true, the column will be fixed on horizontal scrolling. | | align | Align | Alignment of the column content. Supports 'center', 'left', 'right'. | | colWidth | number | Width of the column. | | renderCell | (rowData: any) => ReactElement | Renders custom cell content. | | customCell | boolean | If true, a custom cell will be rendered using renderCell. | | grouped | boolean | If true, the column will be grouped with the groupheader. | | groupheader | string | The header of the grouped column. | | children | readonly ColumnBase[] | Child columns of the grouped column. |

PaginationProps

| Prop | Type | Description | | ------------- | ------------------------------------- | ---------------------------------------------- | | total | number | Total number of items. | | rowsPerPage | number | Number of rows per page. | | dropOptions | number[] | Drop-down options for rows per page. | | currentPage | number | Current active page. | | maxPage | number | Maximum number of pages. | | onRowsPerPage | (row: number, page: number) => void | Function called when rows per page is changed. | | onPagination | (row: number, page: number) => void | Function called when pagination is changed. |

ActionProps

| Prop | Type | Description | | ------- | -------------------- | ----------------------------------------------------- | | title | string | Title of the action. | | action | (row: any) => void | Function to be executed when the action is triggered. | | icon | React.ReactNode | Icon to be displayed for the action. | | toolTip | string | Tooltip text for the action. |

QbsTableToolbarProps

| Prop | Type | Description | | ----------------- | -------------------------- | ------------------------------------------------------------ | | title | string | Title of the toolbar. | | search | boolean | Enables search functionality in the toolbar. | | onSearch | (key?: string) => void | Function called when a search is performed from the toolbar. | | asyncSearch | boolean | If true, search will be asynchronous. | | searchValue | string | Current value in the search input. | | handleSearchValue | (value?: string) => void | Function to handle search | | |

Props Examples

handleColumnSort: (sortColumn: any, sortType: any) => void

A function to handle the column sorting. It receives sortColumn and sortType as parameters.

<QbsTable handleColumnSort={(sortColumn, sortType) => console.log(sortColumn, sortType)} />

data: any[]

An array containing the data to be displayed in the table.

<QbsTable data={[{ id: 1, name: 'John Doe' }]} />

columns: Column[]

An array defining the columns of the table.

<QbsTable columns={[{ title: 'Name', field: 'name' }]} />

sortColumn: string

Defines the column that is currently sorted.

<QbsTable sortColumn="name" />

sortType: string

Defines the current sort type.

<QbsTable sortType="asc" />

selection: boolean

Enables or disables row selection using checkboxes.

<QbsTable selection={true} />

onSelect: (selectedKeys: number[]) => void

Callback fired when a row is selected.

<QbsTable onSelect={selectedKeys => console.log(selectedKeys)} />

title: string

Sets the title of the table.

<QbsTable title="My Custom Table" />

search: boolean

Enables or disables the search functionality.

<QbsTable search={true} />

asyncSearch: boolean

If true, activates asynchronous search.

<QbsTable asyncSearch={true} />

searchValue: string

Controls the value of the search input.

<QbsTable searchValue="John" />

onSearch: (value: string) => void

Callback fired when the search value changes.

<QbsTable onSearch={value => console.log(value)} />

handleSearchValue: (value: string) => void

A function to handle the search value, usually used for controlled components.

<QbsTable handleSearchValue={value => console.log(value)} />

paginationProps: object

Props to be passed to the Pagination component.

<QbsTable paginationProps={{ total: 100, pageSize: 10 }} />

pagination: boolean

Enables or disables the pagination.

<QbsTable pagination={true} />

cellBordered: boolean

If true, displays borders around cells.

<QbsTable cellBordered={true} />

bordered: boolean

If true, displays a border around the table.

<QbsTable bordered={true} />

minHeight: number

Sets the minimum height of the table.

<QbsTable minHeight={300} />

height: number

Sets the height of the table.

<QbsTable height={550} />

onExpandChange: (rowData: any) => void

Callback fired when the expanded state of a row is changed.

<QbsTable onExpandChange={rowData => console.log(rowData)} />

wordWrap: boolean

If true, enables word wrapping in cells.

<QbsTable wordWrap={true} />

dataRowKey: string

Defines the key from the data that will be used for row keys.

<QbsTable dataRowKey="id" />

defaultExpandAllRows: boolean

If true, expands all rows by default.

<QbsTable defaultExpandAllRows={true} />

handleRowExpanded: (rowData: any) => ReactNode

A function to handle the rendering of expanded rows. It should return a valid ReactNode.

<QbsTable handleRowExpanded={rowData => <div>{rowData.name}</div>} />

shouldUpdateScroll: boolean

If true, updates the scroll position when needed.

<QbsTable shouldUpdateScroll={true} />

rowExpand: boolean

If true, enables the row expand functionality.

<QbsTable rowExpand={true} />

actionProps: any[]

An array of action props to be passed to the ActionCell component.

<QbsTable actionProps={[{ title: 'Delete', onClick: rowData => console.log(rowData) }]} />

theme: string

Defines the theme of the table. It could be 'light' or 'dark'.

<QbsTable theme="dark" />

handleMenuActions: (action: any, rowData: any) => void

A function to handle the actions from the action menu.

<QbsTable handleMenuActions={(action, rowData) => console.log(action, rowData)} />

onRowClick: (rowData: any) => void

Callback fired when a row is clicked.

<QbsTable onRowClick={rowData => console.log(rowData)} />

expandedRowKeys: string[]

An array of the keys of the currently expanded rows.

<QbsTable expandedRowKeys={['1', '2']} />

setExpandedRowKeys: (keys: string[]) => void

A function to set the keys of the currently expanded rows.

<QbsTable setExpandedRowKeys={keys => console.log(keys)} />

primaryFilter: any

Prop to handle primary filtering.

<QbsTable primaryFilter={{ filterType: 'date', filterValue: '2023-01-01' }} />

advancefilter: any

Prop to handle advanced filtering.

<QbsTable advancefilter={{ filterType: 'name', filterValue: 'John' }} />

classes: object

Object containing className strings.

<QbsTable classes={{ headerClass: 'my-header-class', cellClass: 'my-cell-class' }} />

toolbar: boolean

If true, displays the toolbar.

<QbsTable toolbar={true} />

Example

Here is an example of how you might use the QbsTable component with various props:

<QbsTable
  title="User Data"
  data={[
    { id: 1, name: 'Quinoid' },
    { id: 2, name: 'Quinoid1' }
  ]}
  columns={[{ title: 'Name', field: 'name' }]}
  sortColumn="name"
  sortType="asc"
  selection={true}
  onSelect={selectedKeys => console.log(selectedKeys)}
  search={true}
  onSearch={value => console.log(value)}
  pagination={true}
  paginationProps={{ total: 100, pageSize: 10 }}
  cellBordered={true}
  bordered={true}
  minHeight={300}
  height={550}
  onExpandChange={rowData => console.log(rowData)}
  wordWrap={true}
  dataRowKey="id"
  defaultExpandAllRows={true}
  handleRowExpanded={rowData => <div>{rowData.name}</div>}
  shouldUpdateScroll={true}
  rowExpand={true}
  actionProps={[{ title: 'Delete', onClick: rowData => console.log(rowData) }]}
  theme="dark"
  handleMenuActions={(action, rowData) => console.log(action, rowData)}
  onRowClick={rowData => console.log(rowData)}
  expandedRowKeys={['1', '2']}
  setExpandedRowKeys={keys => console.log(keys)}
  primaryFilter={{ filterType: 'date', filterValue: '2023-01-01' }}
  advancefilter={{ filterType: 'name', filterValue: 'John' }}
  classes={{ headerClass: 'my-header-class', cellClass: 'my-cell-class' }}
  toolbar={true}
/>

Notes

• The QbsTable component should be used in accordance with the requirements of your application. Ensure that you pass the correct props for your desired functionality.
• Please ensure that you have handled the callback functions properly for your specific use cases, as mismanagement of state and props may lead to unexpected behavior of the component.

classes Prop

The classes prop is an object where keys are the names of elements or parts of the QbsTable component, and values are the class names you want to apply. Below is the list of keys you can use:

• headerClass: Class applied to the header cells of the table. It affects both grouped and ungrouped headers.

• cellClass: Class applied to the data cells of the table.

• tableContainerClass: Class applied to the container wrapping the whole table, including the toolbar.

• headerlClass: Class applied to the specific header cells, especially when using features like row expansion and selection.

• selectionCell: Class applied to the container of the checkbox in the header when selection is enabled.

• tableCheckBoxClass: Class applied to the checkboxes in the rows and the header when selection is enabled.

• actionCellClass: Class applied to the action cells in the table when actions are provided.

• toolbarClass: Class applied to table toolbar

Example Usage

<QbsTable
  classes={{
    headerClass: 'my-header-class',
    cellClass: 'my-cell-class',
    tableContainerClass: 'my-table-container-class',
    headerlClass: 'my-headerl-class',
    selectionCell: 'my-selection-cell-class',
    tableCheckBoxClass: 'my-table-check-box-class',
    actionCellClass: 'my-action-cell-class'
  }}
  //... other props
/>

1. .qbs-table

• Defines the main container for the table.

.qbs-table-toolbar

• Height: 58px.
• Display: Flex.
• Describes the toolbar located above the table containing various controls like filters and search.
• Children:
  • .start-container: Container aligning child elements to the start.
  • .end-container: Container aligning child elements to the end, contains .rows-count for displaying row count with padding 0px 10px.

.sub-qbs-table-toolbar

• Display: Flex.
• Styling for sub-toolbar located beneath the main toolbar.

.qbs-table-search-container

• Position: Relative.
• Container for search input and related buttons.
• Children:
  • .input: Minimal design search input, height: 32px, border-radius: 4px, min-width: 200px.
  • .search-button and .close-button: Positioned absolute and styled with a grey color and white background.

2. .qbs-table[data-theme='dark']

• Applies when the table is in dark theme mode, changing background color to #333333 and font color to #ffffff.

3. .rs-table-cell-content[data-theme='dark']

• Similar to .qbs-table[data-theme='dark'], but applied to table cell content in dark theme.

4. .qbs-table-menu-dropdown

• Position: Relative.
• Display: Inline-block.
• Contains dropdown-related elements.

.qbs-table-dropbtn

• Button to trigger the dropdown, it's styled with a transparent background, black color font, and a cursor set to pointer.

.qbs-table-qbs-table-menu-dropdown-content

• Positioned absolute, contains dropdown items styled with a light (#f1f1f1) background color and black text.

5. .qbs-table-tooltip

• Position: Relative.
• Display: Inline-block.
• Cursor: Pointer.
• Contains tooltip text which is hidden by default and visible on hover with a smooth opacity transition.

6. .rs-table-row

• Overflow: Visible !important.
• Ensures the rows of the table are visible.

Qbs-Table-Custom-Pagination Styles

1. .qbs-table-custom-pagination

• Display: Flex.
• Justify-Content: Space-between.
• Padding: 10px.
• Border: 1px solid.
• Min-Height: 40px.
• Align-Items: Center.
• Describes the main container for custom pagination, ensuring items are spaced evenly and aligned centrally.

&-header

• Border-Bottom: 1px solid #eee.
• Position: Absolute.
• Width: 100%.
• Acts as the header for the pagination container with a solid bottom border.
  • &-content: Styled as a table cell, providing padding of 8px around the content.

.qbs-table-pagination-dropdown

• Width: Auto.
• Border-Radius: 6px.
• Height: 30px.
• Display: Flex.
• Align-Items: Center.
• Justify-Content: Center.
• Describes the dropdown within the pagination, allowing flex display with centered items.

.qbs-table-icon-container

• Padding: 5px.
• Cursor: Pointer.
• Display: Flex.
• Justify-Items: Center.
• Align-Items: Center.
• Color: Black.
• Height: 100%.
• Background-Color: Transparent.
• Stylish container for icons. It changes color to blue when hovered and to grey when disabled.

.qbs-table-pagination-right-block

• Display: Flex.
• Align-Items: Center.
• Acts as the right block container of the pagination section.
  • .block-container: Flex container that holds block items.
  • .block-item: Individual block items, stylized with a cursor pointer, centered alignment, and bordered. It changes the border and text color to blue when hovered or active.
  • .selected: Representing the selected item, enhancing the border and changing the color to blue.

Installation

npm install qbs-react-grid