Today, we are going to create a table in reactjs.
Start with, importing the DataTable.
Inside the div, we will take “DATATABLE”. Take two property columns and data.
<div className="App">
<DataTable
columns={columns}
data={data}
pagination
/>
</div>
Define the property "Columns." We will take two columns. Set the names “Title” and “Year” and set the selector with row.title and row.year. The data in the title and year will be shown in the columns.
const columns = [
{
name: 'Title',
selector: row => row.title,
sortable : true
},
{
name: 'Year',
selector: row => row.year,
sortable : true
},
];
We will define the data with the properties “id”, “title” and “year”. This data will be set into the selector of columns.
const data = [
{
id: 1,
title: 'Anand',
year: '1995',
},
{
id: 2,
title: 'Balaji',
year: '1992',
},
];
Our complete code will look like this
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import DataTable from 'react-data-table-component';
const columns = [
{
name: 'Title',
selector: row => row.title,
sortable : true
},
{
name: 'Year',
selector: row => row.year,
sortable : true
},
];
const data = [
{
id: 1,
title: 'Anand',
year: '1995',
},
{
id: 2,
title: 'Balaji',
year: '1992',
},
];
function App() {
return (
<div className="App">
<DataTable
columns={columns}
data={data}
pagination
/>
</div>
)
}
export default App
Output:
The output will be:
No comments:
Post a Comment