material-table VS react-table

Material-Table is a library that I used to use a lot. It was awesome. Unfortunately, the maintainer does not seem to be active on GitHub anymore, and the project is no longer being actively maintained. It went a couple of years without getting any updates, and there are some glaring NPM audit security warnings that you will receive if you install this in your project.

// https://github.com/mbrn/material-table/pull/2937#issuecomment-879017952 import MaterialTable, { MaterialTableProps } from 'material-table' import { TablePagination, TablePaginationProps } from '@material-ui/core' function PatchedPagination(props: TablePaginationProps) { const { ActionsComponent, onChangePage, onChangeRowsPerPage, ...tablePaginationProps } = props return ( { const { onPageChange, ...actionsComponentProps } = subprops return ( // @ts-expect-error ActionsComponent is provided by material-table ) }} /> ) } export default PatchedPagination

I'm trying to integrate react material-table (https://github.com/mbrn/material-table) with my project.

I'm using Material Table and I need change the Action column name but this column is automatic generated because I'm using editable function from material table.

okay more so like the exxample in here, https://www.npmjs.com/package/material-table

Ik like material table a lot. It's pretty easy to get started with and has great customization options.

The free offering is very lackluster, I currently roll my own editable table inspired by https://github.com/mbrn/material-table. The main reason was the inability to add frontend validation, but now it has a lot of functions that I need, each custom for my needs.

e.g: https://material-table.com/#/

Tanstack - Tanstack has evolved to an entire ecosystem consisting of the famous Tanstack (or React) Query, Tanstack Table, now also Tanstack Router and Tanstack Form. It started with Tanstack Query, which adopted Nx and Nx Cloud. Zack talked about this collab with Dominik, and we also had Dominik on our Nx live stream. Now, all the above-mentioned Tanstack libs have adopted Nx, and there's more coming.

If you want to bring your own UI, TanStack Table (formerly React Table) [0], if you want something that's batteries included, MUI [1]. There are of course other options with either close or full feature parity, but these are the two I see most often with least pain across different companies. While we're on the topic of recommendations, avoid any- and everything by Telerik.

[0] https://tanstack.com/table/

[1] https://mui.com/material-ui/react-table/

Happy to help, here's one for next time you need tables: https://github.com/TanStack/table

Or for the table react-table can be a powerful option to consider.

svelte-headless-table: Unopinionated and extensible data tables for Svelte. (I haven't tried tanstack-table, but I've heard good things about it)

solution

For this week's pick, I chose TanStack Table, a table-building solution that offers power and flexibility. This headless UI solution provides a lightweight and agnostic core, making it easy to integrate into any React, Solid, Vue, Svelte, or TS/JS project.