qbs-react-grid v1.1.43

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

QbsColumnProps

PaginationProps

ActionProps

QbsTableToolbarProps

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-tabledata-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-contentdata-theme='dark'

• Similar to .qbs-tabledata-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