In React development, creating responsive and dynamic tables is a common requirement. Material-UI (MUI) provides a robust and customizable table component that simplifies this task. Let's dive into the key features of Material-UI tables, understand the usage of the Skeleton component for loading states, create a reusable table component, and showcase a dynamic table for various use cases.
Ref: CODESANDBOX
1. Understanding Material-UI Table 📊
Material-UI's Table component offers a comprehensive solution for rendering tables in React applications. Let's break down the provided Table component in the example code:
- Columns and Data: The table is configured with columns and data, allowing developers to customize the display of information.
<table>
<thead>
<tr>
{tableColumns.map((item, index) => renderHeader(item, index))}
</tr>
</thead>
{!isLoading ? (
<tbody className={tableBodyClassname}>
{tableData?.length > 0 ? (
tableData.map((item, index) => (
<tr key={index}>
{tableColumns.map((values, i) => (
<td key={`${index} ${i}`}>
{typeof item[values.key] === "string" &&
item[values.key].length > 50
? `${item[values.key].slice(0, 50)}...`
: item[values.key]}
</td>
))}
</tr>
))
) : (
<tr>
<td className="no-records" colSpan={tableColumns.length}>
No Records Found.
</td>
</tr>
)}
</tbody>
) : (
<tbody>
{Array.from({ length: rowCount }, (_, index) => (
<tr key={index}>
{tableColumns.map((_, i) => (
<td key={`${index} ${i}`}>
<Skeleton />
</td>
))}
</tr>
))}
</tbody>
)}
</table>
- Sorting: Users can click on column headers to sort the data. The sorting status is managed through the sortingStatus state.
onClick={() =>
setSortingStatus({
[item.key]: sortingStatus[item.key]
? -1 * parseInt(sortingStatus[item.key])
: 1
})
}
className={`sorting-column ${
sortingStatus[item.key] === 1
? "down"
: sortingStatus[item.key] === -1
? "up"
: ""
}`}
Pagination: For handling large datasets, pagination controls are integrated, enhancing the user experience.
Responsive Design: The table adjusts its height dynamically based on the window size, ensuring a responsive layout.
useEffect(() => {
const handleResize = () => {
setHeight(window.innerHeight - 225);
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
2. Unveiling the Skeleton Loading Effect 💀
Loading states are crucial for a seamless user experience, especially when dealing with asynchronous data fetching. Material-UI's Skeleton component provides a visually appealing loading effect. In the Table component, the loading state is indicated by rendering skeletons instead of actual data. This is achieved through conditional rendering based on the isLoading prop.
3. Crafting a Reusable Table Component 🔄
Efficient code organization involves creating reusable components. The Table component showcased in the example is designed to be flexible and reusable. Developers can easily integrate it into their projects by passing appropriate props for columns, data, pagination, and other configurations.
4. Dynamic Table for All Use Cases 🌐
The example includes a DemoComponent that demonstrates the dynamic nature of the table. It simulates data fetching with a fake timer, updating the table with new data upon pagination changes. This mechanism allows developers to handle various use cases efficiently.
<Table
tableColumns={columns}
tableData={data}
paginationCount={paginationCount}
handlePaginationValue={handlePaginationValue}
sortingStatus={sortingStatus}
setSortingStatus={setSortingStatus}
isLoading={loading}
rowCount={15}
tableBodyClassname=""
currentPage={currentPage}
/>
Conclusion 🚀
In conclusion, Material-UI's Table component, coupled with the Skeleton loading effect, empowers React developers to create responsive and dynamic tables. By crafting a reusable table component, developers can enhance code maintainability and promote scalability. The provided code snippets and dynamic use case exemplify the versatility of this approach, making it a valuable addition to your React development toolkit.
Happy coding! 🚀
Top comments (0)