ReactJS Semantic UI Table Collections
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks.
In this article we will know how to use table collections in ReactJS Semantic UI.
Table is used to make a table containing some information.
- definition: Table can be formatted to emphasize a first column that defines a row content.
- structured: Table can be formatted to display complex data in a structure format.
- positive / negative: Using this state will let the user to know that the cell or row value is good or bad.
- error: Cell or row value that can have an error can be easily detected or seen by the user using this state.
- warning: This state will let the user know whether any cell or row is showing any warning.
- active: This state will make the row active that is currently selected by the user.
- disabled: This state is used to make any cell or row in a table to be disabled.
<Table> <Table.Header> <Table.Row> content </Table.Row> </Table.Header> <Table.Body> <Table.Row> content </Table.Row> </Table.Body> </Table>
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.
- Step 3: Install semantic UI in your given directory.
npm install semantic-ui-react semantic-ui-css
Project Structure: It will look like the following.
Step to Run Application: Run the application from the root directory of the project, using the following command.
Example 1: In this example we will be going to use table, header and rating elements to display basic table by using ReactJS Semantic UI Table collections.
Example 2: In this example we will be going to use table, header and rating elements to display table with error state by using ReactJS Semantic UI Table collections.
Please Login to comment...