#for Javascript
import './App.css';
import DataTable from "msb-react-data-table";
function App() {
const data = [
{ id: 1, name: 'John Doe', email: 'john.doe@example.com', date: '2023-01-01' },
{ id: 2, name: 'Jane Smith', email: 'jane.smith@example.com', date: '2023-02-01' },
{ id: 3, name: 'Michael Johnson', email: 'michael.johnson@example.com', date: '2023-03-01' },
]
const columns = [
{ title: 'ID', field: 'id', sortable: true },
{ title: 'Name', field: 'name', sortable: true },
{ title: 'Email', field: 'email', sortable: true },
{
title: 'Date',
field: 'date',
sortable: true,
render: (row) => <span>{row.date} </span>
},
];
return (
<div className="App">
<DataTable data={data} columns={columns} rowsPerPage={5}
defaultSortKey="date" defaultSortDirection="desc"
options={{ border: 1, width: '100%' }} />
</div>
);
}
export default App;
#for typescript
import './App.css';
import DataTable,{Column} from "msb-react-data-table";
interface User {
id: number;
name: string;
email: string;
date: string;
}
function App() {
const data: User[] = [
{ id: 1, name: 'John Doe', email: 'john.doe@example.com', date: '2023-01-01' },
{ id: 2, name: 'Jane Smith', email: 'jane.smith@example.com', date: '2023-02-01' },
{ id: 3, name: 'Michael Johnson', email: 'michael.johnson@example.com', date: '2023-03-01' },
]
const columns: Column<User>[] = [
{ title: 'ID', field: 'id', sortable: true },
{ title: 'Name', field: 'name', sortable: true },
{ title: 'Email', field: 'email', sortable: true },
{
title: 'Date',
field: 'date',
sortable: true,
render: (row) => <span>{row.date} </span>
},
];
return (
<div className="App">
<DataTable data={data} columns={columns} rowsPerPage={5}
defaultSortKey="date" defaultSortDirection="desc"
options={{ border: 1, width: '100%' }} />
</div>
);
}
export default App;
npm msb-react-data-tableyarn msb-react-data-table "dependencies": {
"react": "^18.2.0",
"typescript": "^4.8.4"
},
"devDependencies": {
"@types/react": "^18.3.3"
}