React Plasma Table
React plasma table
-
✅ Super simple and intuitive API -
✅ Semantically opinionated rendered tables -
✅ Perfect for small and large projects -
✅ Written in Typescript -
✅ Sortable out of the box -
✅ Searchable (✨ New!✨ ) -
✅ Now with pagination (✨ New!✨ ) -
✅ Collapsable (✨ New!✨ )
yarn add react-plasma-table
How to use
This version only provides a semantic and dynamic table component.
import React, { useState } from "react";
import { Table } from "react-plasma-table";
import { format } from "../my-date-formatting-function";
// Define you logic here
const columns = [
{
id: 1, // required
name: "Email", // required
dataKey: "email", // required
searchable: true,
},
{
id: 2, // required
name: "First name", // required
dataKey: "first_name", // required
sortable: true,
searchable: true,
},
{
id: 3, // required
name: "Last name", // required
dataKey: "last_name", // required
sortable: true,
searchable: true,
},
{
id: 4, // required,
name: "Birthday", // required
dataKey: "birthday", // required
sortable: true,
component: ({ birthday, ...rest }) => (
<>{format(new Date(birthday), "dd.MM.yyyy")}</>
),
},
];
// Defile your sorting icons
const sortUp = () => <SortUpIcon />; // Wrong way: const sortUp = <SortUpIcon />
const sortDown = () => <SortUpIcon />;
const onRowClick = (event, row, index) => {
/* === You'll have access to the event in case you need it
You'll have access to the entire row object
You'll have access to the index of the row starting with 0 === */
// Your row click handling logic here
};
const App = () => {
const [searchQuery, setSearchQuery] = useState("");
return (
<>
<input type="text" onChange={(e) => setSearchQuery(e.target.value)} />
<Table
data={data}
columns={columns}
sortDownIcon={sortDown}
sortUpIcon={sortUp}
searchQuery={searchQuery}
onRowClick={(event, row, index) => onRowClick(event, row, index)}
/>
</>
);
};
Examples
API
The documentation is still a work in progress.
Table
:
props
-
data
(required):array of objects
-
columns
(required):array of objects
=>{ id: number (required) name: string or number (required) - what you see in the table head dataKey: string or number (required) - the key of the data object to connet to component: JSX element (optional) sortable: boolean (optional) searchable: boolean (optional) }
-
sortUpIcon
(optional):JSX element
-
sortDownIcon
(optional):JSX element
-
searchQuery
(optional):string or undefined
-
onRowClick
(optional):function(event, row, index)
-
💡 You can pass down custom components to your table rows alongside other children -
💡 You can get all the individual keys as props in your custom component coming from your api.
Roadmap
- Search (done)
- Pagination (done)
- Collapsable rows (In development)
- Selection
- PDF, CSV and Excel exporting
- Examples