React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Table component allows the user to display rows of data. We can create tables using this component. We can use the following approach in ReactJS to use the React Suite Table Component.
Table Props:
- affixHeader: It is used to affix the table header to the specified location on the page.
- affixHorizontalScrollbar: It is used to affix the table horizontal scrollbar to specified position on the page.
- autoHeight: It is used for the automatic height.
- bodyRef: It is used to denote a ref attached to the table body element.
- bordered: It is used to show the border.
- cellBordered: It is used to show the cell border.
- data: It is used to denote the Table data.
- defaultExpandAllRows: It is used to expand all nodes by default.
- defaultExpandedRowKeys: It is used to specify the default expanded row by rowkey.
- defaultSortType: It is used to denote the sort type.
- expandedRowKeys: It is used to specify the default expanded row by rowkey.
- headerHeight: It is used to denote the Table Header Height.
- height: It is used to denote the Table height.
- hover: It is used to denote that the row of the table has a mouseover effect.
- isTree: It is used to show as a Tree table.
- loading: It is used to show loading.
- minHeight: It is used to denote the minimum height.
- onDataUpdated: It is a callback function that is triggered after table data update.
- onExpandChange: It is a callback function that is triggered in the expanded node while expanding.
- onRowClick: It is a callback function that is triggered after the row and returns to rowDate.
- onScroll: It is a callback function that is triggered for scroll bar scrolling.
- onSortColumn: Callback function for the sort sequence to return the value sortColumn, sortType.
- renderEmpty: It is used to customize data in empty display content.
- renderLoading: It is used to customize the display content in the data load.
- renderRowExpanded: It is used to customize what you can do to expand a zone.
- renderTreeToggle: It is a callback function that is triggered in the expanded node while toggling.
- rowClassName: It is used to add an optional extra class name to the row.
- rowExpandedHeight: It is used to set the height of an expandable area.
- rowHeight: It is used to denote the Row height.
- rowKey: It is used to denote the row key.
- shouldUpdateScroll: It is used to indicate whether to update the scroll bar after data update or not.
- showHeader: It is used to display header.
- sortColumn: It is used to the Sort column name.
- sortType: It is used to denote the sort type (Controlled).
- virtualized: It is used to effectively render large tabular data.
- width: It is used to denote the Table width.
- wordWrap: It is used to make the cell wraps automatically.
Table.Column Props
- align: It is used for the alignment.
- colSpan: Column cells to merge when the data key value for the merged column is null or undefined.
- fixed: It is used for the fixed column.
- flexGrow: Set column width automatically adjusts when set flexGrow cannot set resizable and width property
- minWidth: It is used to set a minimum width by min-width when you use flexGrow.
- onResize: It is a callback function that is triggered after column width change.
- resizable: It is used for the customizable Resize Column width.
- sortable: It is used to denote whether it is Sortable or not.
- treeCol: It is used to denote a column of a tree.
- verticalAlign: It is used for vertical alignment.
- width: It is used to denote the column width.
Table.ColumnGroup Props:
- align: It is used for the alignment.
- fixed: It is used for the fixed column group.
- verticalAlign: It is used for vertical alignment.
- header: It is used for the group header.
Table.Cell Props:
- dataKey: It is used to denote the data binding key.
- rowData: It is used to denote the row data.
- rowIndex: It is used to denote the row number.
Table.Pagination Props:
- activePage: It is used to configure the current page number.
- disabled: It is used to disable the component.
- displayLength: Configure how many lines of entries per page to display, corresponding to lengthMenu
- first: It is used to show the first-page button.
- last: It is used to show the last-page button.
- lengthMenu: It is used to denote the paging display row number configuration.
- maxButtons: It is used to configure the maximum number of display buttons.
- next: It is used to show the Next Page button.
- onChangeLength: It is a callback function that triggers when the lengthMenu value changes.
- onChangePage: It is a callback function that triggers when the page changes.
- prev: It is used to show the Previous Page button.
- renderLengthMenu: It is used for the custom menu.
- renderTotal: It is used for the custom total.
- reverse: It is used to reverse the start and end position.
- showInfo: It is used to show paging information.
- showLengthMenu: It is used to display the Dropdown menu.
- total: It is used to denote the total number of data entries.
Creating React Application And Installing Module:
-
Step 1: Create a React application using the following command:
npx create-react-app foldername
-
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
-
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install rsuite
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from 'react'import 'rsuite/dist/styles/rsuite-default.css'; import { Table } from 'rsuite'; const { Column, HeaderCell, Cell } = Table; export default function App() { // Sample table data const sampleData = [ { firstName: 'Gourav', lastName: 'Hammad', city: 'Mhow' }, { firstName: 'Rithik', lastName: 'Verma', city: 'Indore' }, { firstName: 'Kartik', lastName: 'Malik', city: 'Raipur' }, { firstName: 'Nikhil', lastName: 'Kapoor', city: 'Rau' }, { firstName: 'Ayush', lastName: 'Singh', city: 'Dewas' } ] return ( <div style={{ display: 'block', width: 700, paddingLeft: 30 }}> <h4>React Suite Table Component</h4> <Table height={500} data={sampleData} > <Column width={200}> <HeaderCell>First Name</HeaderCell> <Cell dataKey="firstName" /> </Column> <Column width={200}> <HeaderCell>Last Name</HeaderCell> <Cell dataKey="lastName" /> </Column> <Column width={200}> <HeaderCell>City</HeaderCell> <Cell dataKey="city" /> </Column> </Table> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://rsuitejs.com/components/table/
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
