techniq / mui-table Goto Github PK

View Code? Open in Web Editor NEW

45.0 5.0 12.0 14.09 MB

Improved Material-UI table

Home Page: https://techniq.github.io/mui-table/

License: MIT License

JavaScript 2.27% HTML 0.17% TypeScript 97.56%

material-ui material-ui-next

mui-table's Introduction

mui-table

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

mui-table's People

Contributors

Stargazers

Watchers

Forkers

voronfx developer8by jeremy0dell xpchbill cvanem ericpyle s16adam masakifujisawa brendonsled irrvrsl

mui-table's Issues

Support column.orderBy

Highlight column if column.orderBy matches orderBy prop (and still support column.name as default order by`
Allow setting column.orderBy = false to disable onHeaderClick for a specific column

Support `display: grid`

Hopefully will allow support for maxHeight use cases, and should also improve rendering of position: sticky (borderBottom, etc)

sticky header shows overlapping checkbox from body row cell

As you can see in this screenshot, the row text disappears behind the sticky header, but not the checkbox

Support scrollbar always visible

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", },

Provide way to override classes

Need a way to allow user to override classes (topLeftGrid, topRightGrid, cell, cellContents, ...)

Version 2.0.0

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:

Benefits

Leverage browser sizing of columns (automatically size to fit, wrapping and sizing height automatically)
Responsive by default (no need for AutoSizer component)
Support for column spanning (colSpan)
- Possible with react-virtualized, but difficult
Potential to support other css layouts (display: grid, display: flex)
- Definite plans to investigate 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, etc
Using position: 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.
Allowed removing componentWillReceiveProps and need to call recomputeGridSize()
Cleaner distinction between header and body rows/cells
Actual row concept available now allows to use css :hover (although we still support isCellHovered for more complex use cases
Smaller bundle size

Breaking changes

While 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.

Object is now passed instead of individual argument to 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
  }}
/>

Removed width, height, 'maxHeight, and columnWidthprops onTable. These can mostly be accomplished with style prop (ex. style={{ width: 123 }}) or cellProps={{ style: { width: 123 } }}`
Removed 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 } }})
Removed default styling of fixed headers and columns (defaults to Material-UI styling)
Removed 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).

Regressions / future work

Currently no support for maxHeight due to limitations of display: table. Hoping with support for display: grid this can return.
Investigate support for react-window on a row-level virtualization. I think keeping virtualization on a single axis will help with some of the pain points (although this will break 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.

Notes

Previous react-virtualized based Table is now available as mui-virtualized-table and is published on npm. There are still use cases it better supports and I will continue to support it as it does.
By default display: table uses tableLayout: auto. In some sizing cases you will want to use tableLayout: fixed when applying explicit column widths.
- https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
- https://css-tricks.com/almanac/properties/t/table-layout/

<Table style={{ tableLayout: 'fixed' }} />

Consider removing lodash.merge

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

Support passing a function to cellProps with data (like cellProp)

Consider removing react-virtualized for CSS Grid and position:sticky

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

NPM package is broken

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.

Consider opting in to tracking hoveredColumn/hoveredRowData

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.