vhad/react-table
1
0
Fork 0
mirror of https://github.com/gosticks/react-table.git synced 2025-10-16 11:55:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix useFlexLayout table min-width (#1924)

Browse Source 
* Fix useFlexLayout table min-width

* Delete .size-snapshot.json

Co-authored-by: Tanner Linsley <tannerlinsley@gmail.com>
This commit is contained in:
Michael Chang 2020-03-06 13:57:36 -08:00 committed by GitHub
parent 23c9ad23fa
commit 343e76ce65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
examples/full-width-resizable-table/src/App.js
View File

@ -11,13 +11,12 @@ import makeData from './makeData'
const Styles = styled.div`
padding: 1rem;
${'' /* These styles are suggested for the table fill all available space in its containing element */}
display: block;
${'' /* These styles are required for a horizontaly scrollable table overflow */}
overflow: auto;
.table {
${'' /* These styles are suggested for the table fill all available space in its containing element */}
display: block;
${'' /* These styles are required for a horizontaly scrollable table overflow */}
overflow: auto;
border-spacing: 0;
border: 1px solid black;
@ -119,13 +118,7 @@ function Table({ columns, data }) {
[]
)
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable(
const { getTableProps, headerGroups, rows, prepareRow } = useTable(
{
columns,
data,
@ -195,8 +188,8 @@ function Table({ columns, data }) {
</div>
))}
</div>
<div {...getTableBodyProps()} className="tbody">
{rows.map((row, i) => {
<div className="tbody">
{rows.map(row => {
prepareRow(row)
return (
<div {...row.getRowProps()} className="tr">

8
src/plugin-hooks/useFlexLayout.js
View File

@ -1,5 +1,5 @@
export function useFlexLayout(hooks) {
hooks.getTableBodyProps.push(getTableBodyProps)
hooks.getTableProps.push(getTableProps)
hooks.getRowProps.push(getRowStyles)
hooks.getHeaderGroupProps.push(getRowStyles)
hooks.getHeaderProps.push(getHeaderProps)
@ -8,7 +8,7 @@ export function useFlexLayout(hooks) {
useFlexLayout.pluginName = 'useFlexLayout'
const getTableBodyProps = (props, { instance }) => [
const getTableProps = (props, { instance }) => [
props,
{
style: {
@ -33,7 +33,9 @@ const getHeaderProps = (props, { column }) => [
{
style: {
boxSizing: 'border-box',
flex: column.totalFlexWidth ? `${column.totalFlexWidth} 0 auto` : undefined,
flex: column.totalFlexWidth
? `${column.totalFlexWidth} 0 auto`
: undefined,
minWidth: `${column.totalMinWidth}px`,
width: `${column.totalWidth}px`,
},