THead.js<\/em><\/span><\/p>\nimport React from \"react\";\nfunction THead(props) {\n return <thead>\n <tr style={props.theme.column}>\n {props.columns.map(col => <th style={props.theme.cell} \nkey={col.name}>{props.columnRenderer(col.name)}<\/th>)}\n <\/tr>\n <\/thead>\n}\nexport default THead;\n<\/pre>\nThis simple component renders a thead with a table row. We loop over the columns passed in as props to generate individual column headers. Of note is the fact that we call the columnRenderer passed in through props with the column name parameter. In the column renderer passed in we process column headers to make the initial letter capital. The sample data deliberately has column names in all small letters for this demonstration.<\/p>\n
The sample column data passed into this component looks like below:<\/p>\n
SampleData.js<\/em><\/span><\/p>\nexport const columns = [\n {\n name: \"#\",\n type: \"string\"\n }, {\n name: \"title\",\n type: \"string\"\n }, {\n name: \"author\",\n type: \"string\"\n }, {\n name: \"published\",\n type: \"string\",\n }, {\n name: \"url\",\n type: \"custom\"\n }];\n<\/pre>\n2.3 TBody Component<\/h3>\n This is the component where our data gets rendered, it takes help from another component down the hierarchy called the TRow. We will discuss this component next but the code for the TBody component looks like below:<\/p>\n
TBody.js<\/em><\/span><\/p>\nimport React from 'react';\nimport TRow from '.\/TRow';\n\nfunction TBody(props) {\n return <tbody>\n {props.rows.map((row, ndx) => <TRow rowIndex={ndx} \ntheme={props.theme} key={row.url} customRenderer={props.customRenderer} \ncolumns={props.columns} row={row}><\/TRow>)}\n <\/tbody>;\n}\nexport default TBody;\n<\/pre>\nThis component iterates over the rows of data passed in using props and renders a TRow component per row of data. It also passes down the theme and the customRenderer for rows down to the TRow component that invokes them for individual rows.<\/p>\n
2.4 TRow Component<\/h3>\n This is the final component in our component hierarchy and renders the individual rows in the tbody of our table. the code for this component looks like below:<\/p>\n
TRow.js<\/em><\/span><\/p>\nimport React, { useState } from 'react';\n\nfunction TRow(props) {\n const [hover, setHover] = useState(false);\n const onHover = () => {\n setHover(!hover);\n }\n return <tr onMouseEnter={onHover} onMouseLeave={onHover}\n style={hover ? { backgroundColor: \"#c0c0c0\" } : \nprops.rowIndex % 2 === 0 ? props.theme.rowEven : props.theme.rowOdd}>\n <td key={0} style={props.theme.cell}>{props.rowIndex + 1}<\/td>\n\n {Object.keys(props.row).map((cell, ndx) => {\n\n if (props.columns[ndx + 1].type === \"custom\") {\n return <td key={ndx + 1} \nstyle={props.theme.cell}>{props.customRenderer(props.row)}<\/td>;\n } else {\n return <td key={ndx + 1} \nstyle={props.theme.cell}>{props.row[cell]}<\/td>;\n }\n })}\n <\/tr>;\n}\nexport default TRow;\n<\/pre>\nThis component does a few things firstly it handles the mouse enter and mouse leave events of each row. And flips the hover flag on and off which enables us to highlight the row. Otherwise the row displays according to theme as a even row or odd row. This gives our table a striped look as we will see. This function component also makes use of state, yes function components can now have state, using React useState hook. One final note on this component, it calls the custom renderer on each row cell passing in the row. This is only for columns marked custom. We make use of this to render links to the articles as hyperlinks in the cell. <\/p>\n
The sample data passed into this component looks like below:<\/p>\n
SampleData.js<\/em><\/span><\/p>\nexport const sampleData = [\n {\n title: \"Bootstrap Autocomplete Example\",\n author: \"Siddharth Seth\",\n published: \"June 21st 2017\",\n url: \"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-autocomplete-example\/\"\n }, {\n title: \"Bootstrap Calendar Example\",\n author: \"Siddharth Seth\",\n published: \"June 30th 2017\",\n url: \"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-calendar-example\/\"\n }, {\n title: \"Bootstrap Thumbnails Example\",\n author: \"Siddharth Seth\",\n published: \"July 05th 2017\",\n url: \"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-thumbnails-example\/\"\n }\n\u2026\n];\n<\/pre>\n3. Styling<\/h2>\n We use a JavaScript object to style our table. There is support for two themes a light one and a dark one. The styles for each component, viz., the table, rows, cells, columns are defined as below:<\/p>\n
Table.Style.js<\/em><\/span><\/p>\nexport const theme = {\n light: {\n column: {\n backgroundColor: '#c0c0c0',\n color: '#000',\n border: '2px solid #f0f0f0'\n },\n rowEven: {\n backgroundColor: '#e5e5e5',\n color: '#010101'\n },\n rowOdd: {\n backgroundColor: '#f0f0f0',\n color: '#010101'\n },\n cell: {\n textAlign: 'left',\n fontSize: '.75rem',\n padding: '5px'\n },\n table: {\n border: '2px solid #f0f0f0',\n borderCollapse: 'collapse'\n },\n button: {\n display: 'inline-block',\n color: '#010101',\n backgroundColor: '#c0c0c0',\n border: '2px solid #c0c0c0',\n fontWeight: 'bold'\n }\n },\n dark: {\n column: {\n backgroundColor: '#666',\n color: 'whitesmoke',\n border: '2px solid #666'\n },\n rowEven: {\n backgroundColor: '#555',\n color: '#ccc'\n },\n rowOdd: {\n backgroundColor: '#666',\n color: '#ccc'\n },\n cell: {\n textAlign: 'left',\n fontSize: '.75rem',\n padding: '5px'\n },\n table: {\n border: '2px solid #666',\n borderCollapse: 'collapse'\n },\n button: {\n display: 'inline-block',\n color: '#ccc',\n backgroundColor: '#888',\n border: '2px solid #888',\n fontWeight: 'bold'\n }\n }\n};\n<\/pre>\nWe add two buttons to the top of our Table with labels, Light and Dark. On click of either one we switch to the corresponding theme. To see this in action let us now run our application by executing the below on command line at the root of our application.<\/p>\n
>npm start<\/pre>\nNavigating to the URL http:\/\/localhost:3000 should show the below output.<\/p>\n
\n
Project Output — Light Theme<\/figcaption><\/figure>\n<\/div>\nNow on clicking the Dark theme button the table will switch themes and will display as below:<\/p>\n
\n
Project Output — Dark Theme<\/figcaption><\/figure>\n<\/div>\nThis wraps up our look at ReactJS Table Example. Hope this was helpful.<\/p>\n
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/10\/ApplicationStructureReactTableEx.jpg\")
![\"\"](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/10\/ReactTableOutput-1.jpg\")
![\"\"](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/10\/ReactTableOutput-2.jpg\")