diff --git a/README.md b/README.md index 747c51d..72e1d55 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,8 @@ Hooks for building **lightweight, fast and extendable datagrids** for React

+![React Table Logo](https://github.com/tannerlinsley/react-table/tree/master/media/logo.png) + ## Features - Lightweight (4kb - 10kb depending on features and tree-shaking) diff --git a/docs/api.md b/docs/api.md index 6e9ff38..71a034e 100644 --- a/docs/api.md +++ b/docs/api.md @@ -198,7 +198,7 @@ The following properties are available on every `Column` object returned by the - `id: String` - The resolved column ID from either the column's `accessor` or the column's hard-coded `id` property -- `visible: Boolean` +- `isVisible: Boolean` - The resolved visible state for the column, derived from the column's `show` property - `render: Function(type: String | Function | Component, ?props)` - This function is used to render content with the added context of a column. @@ -1357,7 +1357,7 @@ The following values are provided to the table `instance`: - `style.cursor: 'pointer'` - `checked: Bool` - `title: 'Toggle All Rows Selected'` -- `allRowsSelected: Bool` +- `isAllRowsSelected: Bool` - Will be `true` if all rows are selected. - If at least one row is not selected, will be `false` diff --git a/media/logo-dark.png b/media/logo-dark.png new file mode 100644 index 0000000..ec972cd Binary files /dev/null and b/media/logo-dark.png differ diff --git a/media/logo.png b/media/logo.png new file mode 100644 index 0000000..3e51fa3 Binary files /dev/null and b/media/logo.png differ diff --git a/media/src/logo.sketch b/media/src/logo.sketch index 5dc6b2d..c73659a 100644 Binary files a/media/src/logo.sketch and b/media/src/logo.sketch differ diff --git a/src/hooks/useTable.js b/src/hooks/useTable.js index be5fe2f..b2f3cc1 100755 --- a/src/hooks/useTable.js +++ b/src/hooks/useTable.js @@ -211,7 +211,7 @@ export const useTable = (props, ...plugins) => { // Determine column visibility instanceRef.current.columns.forEach(column => { - column.visible = + column.isVisible = typeof column.show === 'function' ? column.show(instanceRef.current) : !!column.show @@ -248,7 +248,7 @@ export const useTable = (props, ...plugins) => { { key: ['header', column.id].join('_'), colSpan: column.columns - ? column.columns.filter(column => column.visible).length + ? column.columns.filter(column => column.isVisible).length : 1, }, applyPropHooks( @@ -269,12 +269,12 @@ export const useTable = (props, ...plugins) => { if (column.columns) { return recurse(column.columns) } - return column.visible + return column.isVisible }).length if (header.columns) { return recurse(header.columns) } - return header.visible + return header.isVisible }) // Give headerGroups getRowProps @@ -324,7 +324,7 @@ export const useTable = (props, ...plugins) => { ) const visibleColumns = instanceRef.current.columns.filter( - column => column.visible + column => column.isVisible ) // Build the cells for each row diff --git a/src/plugin-hooks/useFlexLayout.js b/src/plugin-hooks/useFlexLayout.js deleted file mode 100755 index d2c1b86..0000000 --- a/src/plugin-hooks/useFlexLayout.js +++ /dev/null @@ -1,144 +0,0 @@ -import PropTypes from 'prop-types' - -import { getFirstDefined, sum } from '../utils' - -export const actions = {} - -const propTypes = { - defaultFlex: PropTypes.number, -} - -export const useFlexLayout = hooks => { - hooks.useMain.push(useMain) -} - -function useMain(instance) { - PropTypes.checkPropTypes(propTypes, instance, 'property', 'useFlexLayout') - - const { - defaultFlex = 1, - hooks: { - columns: columnsHooks, - getRowProps, - getHeaderGroupProps, - getHeaderProps, - getCellProps, - }, - } = instance - - columnsHooks.push((columns, api) => { - const visibleColumns = columns.filter(column => column.visible) - const columnMeasurements = {} - - let sumWidth = 0 - visibleColumns.forEach(column => { - const { width, minWidth } = getSizesForColumn( - column, - defaultFlex, - undefined, - undefined, - api - ) - if (width) { - sumWidth += width - } else if (minWidth) { - sumWidth += minWidth - } else { - sumWidth += defaultFlex - } - }) - - const rowStyles = { - style: { - display: 'flex', - minWidth: `${sumWidth}px`, - }, - } - - api.rowStyles = rowStyles - - getRowProps.push(() => rowStyles) - getHeaderGroupProps.push(() => rowStyles) - - getHeaderProps.push(column => ({ - style: { - boxSizing: 'border-box', - ...getStylesForColumn(column, columnMeasurements, defaultFlex, api), - }, - })) - - getCellProps.push(cell => { - return { - style: { - ...getStylesForColumn( - cell.column, - columnMeasurements, - defaultFlex, - undefined, - api - ), - }, - } - }) - - return columns - }) - - return instance -} - -// Utils - -function getStylesForColumn(column, columnMeasurements, defaultFlex, api) { - const { flex, width, maxWidth } = getSizesForColumn( - column, - columnMeasurements, - defaultFlex, - api - ) - - return { - flex: `${flex} 0 auto`, - width: `${width}px`, - maxWidth: `${maxWidth}px`, - } -} - -function getSizesForColumn( - { columns, id, width, minWidth, maxWidth }, - columnMeasurements, - defaultFlex, - api -) { - if (columns) { - columns = columns - .filter(col => col.show || col.visible) - .map(column => - getSizesForColumn(column, columnMeasurements, defaultFlex, api) - ) - .filter(Boolean) - - if (!columns.length) { - return false - } - - const flex = sum(columns.map(col => col.flex)) - const width = sum(columns.map(col => col.width)) - const maxWidth = sum(columns.map(col => col.maxWidth)) - - return { - flex, - width, - maxWidth, - } - } - - return { - flex: width ? 0 : defaultFlex, - width: - width === 'auto' - ? columnMeasurements[id] || defaultFlex - : getFirstDefined(width, minWidth, defaultFlex), - maxWidth, - } -} diff --git a/src/plugin-hooks/useRowSelect.js b/src/plugin-hooks/useRowSelect.js index 72acc9a..4f8bd61 100644 --- a/src/plugin-hooks/useRowSelect.js +++ b/src/plugin-hooks/useRowSelect.js @@ -38,11 +38,11 @@ function useMain(instance) { [] ) - const allRowsSelected = rowPaths.length === selectedRows.length + const isAllRowsSelected = rowPaths.length === selectedRows.length const toggleRowSelectedAll = set => { setState(old => { - const selectAll = typeof set !== 'undefined' ? set : !allRowsSelected + const selectAll = typeof set !== 'undefined' ? set : !isAllRowsSelected return { ...old, selectedRows: selectAll ? [...rowPaths] : [], @@ -52,10 +52,14 @@ function useMain(instance) { const updateParentRow = (selectedRows, path) => { const parentPath = path.slice(0, path.length - 1) - const parentKey = parentPath.join(".") - const selected = rowPaths.filter(path => - path !== parentKey && path.startsWith(parentKey) && !selectedRows.has(path) - ).length === 0 + const parentKey = parentPath.join('.') + const selected = + rowPaths.filter( + path => + path !== parentKey && + path.startsWith(parentKey) && + !selectedRows.has(path) + ).length === 0 if (selected) { selectedRows.add(parentKey) } else { @@ -76,11 +80,11 @@ function useMain(instance) { let newSelectedRows = new Set(old.selectedRows) if (!exists && shouldExist) { - rowPaths.forEach((rowPath) => { + rowPaths.forEach(rowPath => { if (rowPath.startsWith(key)) newSelectedRows.add(rowPath) }) } else if (exists && !shouldExist) { - rowPaths.forEach((rowPath) => { + rowPaths.forEach(rowPath => { if (rowPath.startsWith(key)) newSelectedRows.delete(rowPath) }) } else { @@ -107,7 +111,7 @@ function useMain(instance) { style: { cursor: 'pointer', }, - checked: allRowsSelected, + checked: isAllRowsSelected, title: 'Toggle All Rows Selected', }, applyPropHooks(instance.hooks.getToggleAllRowsSelectedProps, instance), @@ -198,6 +202,6 @@ function useMain(instance) { toggleRowSelected, toggleRowSelectedAll, getToggleAllRowsSelectedProps, - allRowsSelected, + isAllRowsSelected, } }