Simplified use of Material UI visual components with data
and columns
props.
For examples of <MuiTable>
in action, see demo or view the source
Note: 1.x.x
version based on react-virtualized is now available as mui-virtualized-table
Improved Material-UI table
Home Page: https://techniq.github.io/mui-table/
License: MIT License
Simplified use of Material UI visual components with data
and columns
props.
For examples of <MuiTable>
in action, see demo or view the source
Note: 1.x.x
version based on react-virtualized is now available as mui-virtualized-table
column.orderBy
matches orderBy
prop (and still support column.name
as default order by`column.orderBy = false
to disable onHeaderClick for a specific columnHopefully will allow support for maxHeight
use cases, and should also improve rendering of position: sticky
(borderBottom
, etc)
Would be nice to have an option to set the scrollbar to be always visible (X, Y or both).
Tried to add it with css, but I can't seem to get it to work
"&::-webkit-scrollbar": { width: "4px", },
"&::-webkit-scrollbar-track": { width: "6px", },
"&::-webkit-scrollbar-thumb": { background: "red", borderRadius: "24px", },
Need a way to allow user to override classes (topLeftGrid
, topRightGrid
, cell
, cellContents
, ...)
Decided with version 2.0.0
to drop the react-virtualized
requirement and use standard table elements (display: table
) by default. This provides the additional benefits:
colSpan
)
display: grid
, display: flex
)
display: grid
, as hoping to solve some issues with display: table
(position: sticky
with border, max height tables based on viewport, etc) and it still supports column spanning, etcposition: sticky
opens up new use cases (inline headers that replace) plus is more performant than ScrollSync in practice, although it has some issues to work through/around.componentWillReceiveProps
and need to call recomputeGridSize()
:hover
(although we still support isCellHovered
for more complex use casesWhile I attempted to keep the same API/props as much as possible, I did make some changes (mostly due to the differences implementations, although I took the opportunity with the change to update some pain points of 1.0.0
.
onCellClick
, cellProps
, isCellSelected
, etc. This allows for easier destructing of arguments you need and not be dependent of the order they are passed. For example:<MuiTable onCellClick=(column, rowData) => {...} />
now becomes
<MuiTable onCellClick=({ rowData }) => {...} />
when you only need to use rowData
. This is even cleaner for isCellHovered
when using for row hovering
.
<MuiTable
isCellHovered={(column, rowData, hoveredColumn, hoveredRowData) => {
return rowData.id && rowData.id === hoveredRowData.id
}}
/>
now becomes
<MuiTable
isCellHovered={({ rowData, hoveredRowData }) => {
return rowData.id && rowData.id === hoveredRowData.id
}}
/>
width
, height
, 'maxHeight, and
columnWidthprops on
Table. These can mostly be accomplished with style prop (ex.
style={{ width: 123 }}) or
cellProps={{ style: { width: 123 } }}`width
and minWidth
on column definitions. These can be accomplished with cellProps
and style
(ex. cellProps: { style: { width: 123 }}
fitHeightToRows
prop removed since display: table
fits by default. Added addPlaceholderRows
for support the inverse with pagination (useful to keep controls in consistent location).rowHeight
replaced with rowProps
prop and style
. Ex. ({{ style: { height: 24 } }}
)fixedRowCount
and fixedColumnCount
. Use headerCellProp
and position: sticky
with top: 0
or left: 0
. Not 100% the same (can only have 1 fixed column or row at a time, but they can stack/replace which opens up new use cases).maxHeight
due to limitations of display: table
. Hoping with support for display: grid
this can return.position: sticky
so there will be some trade-offs). "Fixed" row headers could probably be accomplished with just position: absolute
and position: relative
with a margin offset for the body.display: table
uses tableLayout: auto
. In some sizing cases you will want to use tableLayout: fixed
when applying explicit column widths.
<Table style={{ tableLayout: 'fixed' }} />
Hello! I've been searching for tiny wrapper around mui table and found your project. It's cool, but I've checked bundle size of your library and saw that around half of it's size(~10kb minified) is lodash.merge
package.
Maybe you'll consider to replace it with more lightweight functions, such as:
merge
deepmerge
After seeing some examples by @souporserious using display: grid
with position:sticky
, they appear to track scroll position between fixed columns/rows better than react-virtualized's MultiGrid.
IE 11 support for display: grid support is based on the old spec and likely not great.
IE 11 support for position: sticky is not available (might chalk it up to progressive enhancement).
Just considering for now. Also watching the new react-window
Hello! I tried to install fresh 2.4.0 package, but the build contains the old code. Complains about missed lodash.merge
, which isn't in package.json
anymore. Probably should be rebuilded.
Currently we always wire up onMouseEnter
/onMouseLeave
on all [cells
(https://github.com/techniq/mui-table/blob/master/src/index.js#L140) to track hoveredColumn
/hoveredRowData
which is used for isCellHovered
along with cellProps
/headerCellProps
/bodyCellProps
.
This can be very expensive to always trigger setState
this often, especially if not using one of these methods (and isCellHovered
is not required for row hovering now since we can use CSS and :hover
.
While we could disable the onMouseEnter/onMouseLeave ourselves...
cellProps={{
onMouseEnter: () => {},
onMouseLeave: () => {}
}}
maybe this should be an opt-in behavior instead (trackHovered
prop or something). Initially I thought this could be done only if isCellHovered
was set, but since these are also passed to the cellProps
I don't know if it would make sense to require isCellHovered
as well.
Happens in v2.0.0 when loading MuiTable with a column header and orderBy is set.
Please see my PR here #17
Thanks for publishing this. I am trying to add row hover/highlighting and selection highlighting for an entire row. Is there an easy way to accomplish this with the existing code?
I was contemplating updating the code to render the TableRow component. I am curious if you tried implementing this with a row renderer or if there is an easier way I am not seeing.
Thanks.
With v.2.1.2 the sticky row/column doesn't appear to be working?
Might also be able to use react-sortable-hoc
Not sure if we should complicate the library, and there are many approaches, but I at least wanted to document them here.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.