Skip to content

Commit

Permalink
sticky support
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Dec 26, 2019
1 parent 91a4dda commit c78d05f
Showing 10 changed files with 277 additions and 28 deletions.
11 changes: 3 additions & 8 deletions docs/src/pages/components/data-grid/Simple.js
Original file line number Diff line number Diff line change
@@ -19,14 +19,9 @@ export default function Simple() {
columns={[
{ field: 'name', label: 'Name' },
{ field: 'rating', label: 'Rating' },
{
label: 'Contacts',
children: [
{ field: 'address', label: 'Address' },
{ field: 'phone', label: 'Phone' },
{ field: 'country', label: 'Country' },
],
},
{ field: 'address', label: 'Address' },
{ field: 'phone', label: 'Phone' },
{ field: 'country', label: 'Country' },
]}
rowsData={data}
/>
11 changes: 3 additions & 8 deletions docs/src/pages/components/data-grid/Simple.tsx
Original file line number Diff line number Diff line change
@@ -19,14 +19,9 @@ export default function Simple() {
columns={[
{ field: 'name', label: 'Name' },
{ field: 'rating', label: 'Rating' },
{
label: 'Contacts',
children: [
{ field: 'address', label: 'Address' },
{ field: 'phone', label: 'Phone' },
{ field: 'country', label: 'Country' },
],
},
{ field: 'address', label: 'Address' },
{ field: 'phone', label: 'Phone' },
{ field: 'country', label: 'Country' },
]}
rowsData={data}
/>
35 changes: 35 additions & 0 deletions docs/src/pages/components/data-grid/columns/ColumnSizing.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import Chance from 'chance';
import DataGrid from '@material-ui/lab/DataGrid';

const chance = new Chance();

const data = Array.from(new Array(100)).map(() => ({
Country: chance.country(),
Area: chance.integer({ min: 10e3, max: 10e6 }),
GDP_Total: chance.integer({ min: 10e3, max: 10e6 }),
Population_Urban: chance.floating({ min: 0, max: 1 }),
Population_Total: chance.integer({ min: 10e3, max: 10e6 }),
GDP_Agriculture: chance.floating({ min: 0, max: 1 }),
GDP_Industry: chance.floating({ min: 0, max: 1 }),
GDP_Services: chance.floating({ min: 0, max: 1 }),
}));

export default function ColumnGroups() {
return (
<DataGrid
style={{ maxHeight: 300, width: '100%' }}
columns={[
{ field: 'Country', label: 'Country' },
{ field: 'Area', label: 'Area, sq. km.' },
{ field: 'Population_Total', label: 'Population Total' },
{ field: 'Population_Urban', label: 'Population Urban' },
{ field: 'GDP_Total', label: 'GDP Total' },
{ field: 'GDP_Agriculture', label: 'GDP Agriculture' },
{ field: 'GDP_Industry', label: 'GDP Industry' },
{ field: 'GDP_Services', label: 'GDP Services' },
]}
rowsData={data}
/>
);
}
35 changes: 35 additions & 0 deletions docs/src/pages/components/data-grid/columns/ColumnSizing.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import Chance from 'chance';
import DataGrid from '@material-ui/lab/DataGrid';

const chance = new Chance();

const data = Array.from(new Array(200)).map(() => ({
Country: chance.country(),
Area: chance.integer({ min: 10e3, max: 10e6 }),
GDP_Total: chance.integer({ min: 10e3, max: 10e6 }),
Population_Urban: chance.floating({ min: 0, max: 1 }),
Population_Total: chance.integer({ min: 10e3, max: 10e6 }),
GDP_Agriculture: chance.floating({ min: 0, max: 1 }),
GDP_Industry: chance.floating({ min: 0, max: 1 }),
GDP_Services: chance.floating({ min: 0, max: 1 }),
}));

export default function ColumnGroups() {
return (
<DataGrid
style={{ maxHeight: 300, width: '100%' }}
columns={[
{ field: 'Country', label: 'Country' },
{ field: 'Area', label: 'Area, sq. km.' },
{ field: 'Population_Total', label: 'Population Total' },
{ field: 'Population_Urban', label: 'Population Urban' },
{ field: 'GDP_Total', label: 'GDP Total' },
{ field: 'GDP_Agriculture', label: 'GDP Agriculture' },
{ field: 'GDP_Industry', label: 'GDP Industry' },
{ field: 'GDP_Services', label: 'GDP Services' },
]}
rowsData={data}
/>
);
}
35 changes: 35 additions & 0 deletions docs/src/pages/components/data-grid/columns/ColumnSticky.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import Chance from 'chance';
import DataGrid from '@material-ui/lab/DataGrid';

const chance = new Chance();

const data = Array.from(new Array(100)).map(() => ({
Country: chance.country(),
Area: chance.integer({ min: 10e3, max: 10e6 }),
GDP_Total: chance.integer({ min: 10e3, max: 10e6 }),
Population_Urban: chance.floating({ min: 0, max: 1 }),
Population_Total: chance.integer({ min: 10e3, max: 10e6 }),
GDP_Agriculture: chance.floating({ min: 0, max: 1 }),
GDP_Industry: chance.floating({ min: 0, max: 1 }),
GDP_Services: chance.floating({ min: 0, max: 1 }),
}));

export default function ColumnGroups() {
return (
<DataGrid
style={{ maxHeight: 300, width: '100%' }}
columns={[
{ field: 'Country', label: 'Country' },
{ field: 'Area', label: 'Area, sq. km.' },
{ field: 'Population_Total', label: 'Population Total' },
{ field: 'Population_Urban', label: 'Population Urban' },
{ field: 'GDP_Total', label: 'GDP Total' },
{ field: 'GDP_Agriculture', label: 'GDP Agriculture' },
{ field: 'GDP_Industry', label: 'GDP Industry' },
{ field: 'GDP_Services', label: 'GDP Services' },
]}
rowsData={data}
/>
);
}
35 changes: 35 additions & 0 deletions docs/src/pages/components/data-grid/columns/ColumnSticky.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import Chance from 'chance';
import DataGrid from '@material-ui/lab/DataGrid';

const chance = new Chance();

const data = Array.from(new Array(200)).map(() => ({
Country: chance.country(),
Area: chance.integer({ min: 10e3, max: 10e6 }),
GDP_Total: chance.integer({ min: 10e3, max: 10e6 }),
Population_Urban: chance.floating({ min: 0, max: 1 }),
Population_Total: chance.integer({ min: 10e3, max: 10e6 }),
GDP_Agriculture: chance.floating({ min: 0, max: 1 }),
GDP_Industry: chance.floating({ min: 0, max: 1 }),
GDP_Services: chance.floating({ min: 0, max: 1 }),
}));

export default function ColumnGroups() {
return (
<DataGrid
style={{ maxHeight: 300, width: '100%' }}
columns={[
{ field: 'Country', label: 'Country' },
{ field: 'Area', label: 'Area, sq. km.' },
{ field: 'Population_Total', label: 'Population Total' },
{ field: 'Population_Urban', label: 'Population Urban' },
{ field: 'GDP_Total', label: 'GDP Total' },
{ field: 'GDP_Agriculture', label: 'GDP Agriculture' },
{ field: 'GDP_Industry', label: 'GDP Industry' },
{ field: 'GDP_Services', label: 'GDP Services' },
]}
rowsData={data}
/>
);
}
6 changes: 6 additions & 0 deletions docs/src/pages/components/data-grid/columns/columns.md
Original file line number Diff line number Diff line change
@@ -7,6 +7,8 @@ components: DataGrid

<p class="description">A fast and extendable data table and data grid for React. It's a feature-rich compoent available in MIT or Enterprise versions.</p>

## Column width

## Column groups

{{"demo": "pages/components/data-grid/columns/ColumnGroups.js", "bg": "inline"}}
@@ -20,6 +22,8 @@ components: DataGrid

## Column sizing

{{"demo": "pages/components/data-grid/columns/ColumnSizing.js", "bg": "inline"}}

- https://ag-grid.com/javascript-grid-resizing/
- https://demos.telerik.com/kendo-ui/grid/column-resizing
- https://www.telerik.com/kendo-react-ui/components/grid/columns/resizing/
@@ -39,6 +43,8 @@ components: DataGrid

## Column sticky

{{"demo": "pages/components/data-grid/columns/ColumnSticky.js", "bg": "inline", "iframe": true}}

- https://ag-grid.com/javascript-grid-pinning/
- https://www.telerik.com/kendo-react-ui/components/grid/columns/locked/
- https://demos.telerik.com/kendo-ui/grid/frozen-columns
4 changes: 4 additions & 0 deletions packages/material-ui-lab/src/DataGrid/DataGrid.d.ts
Original file line number Diff line number Diff line change
@@ -3,6 +3,10 @@ import { StandardProps } from '@material-ui/core';

export interface DataGridProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, DataGridClassKey> {
/**
* The default options that get applied to each column.
*/
defaultColumnOptions?: any;
/**
* The columns configuration.
*/
132 changes: 120 additions & 12 deletions packages/material-ui-lab/src/DataGrid/DataGrid.js
Original file line number Diff line number Diff line change
@@ -1,48 +1,156 @@
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
// import { VariableSizeList as List } from 'react-window';
import { VariableSizeList as List } from 'react-window';
import { withStyles } from '@material-ui/core/styles';
import TablePagination from '@material-ui/core/TablePagination';
import { ownerDocument, useEventCallback, useForkRef } from '@material-ui/core/utils';

export const styles = () => ({
/* Styles applied to the root element. */
root: {
overflow: 'auto',
display: 'flex',
flexDirection: 'column',
'& table': {
width: '100%',
borderCollapse: 'collapse',
// Faster than the default auto layout algorithm.
tableLayout: 'fixed',
borderSpacing: 0,
},
'& td, & th': {
position: 'relative',
border: '1px solid red',
overflow: 'hidden',
textOverflow: 'ellipsis',
padding: 0,
whiteSpace: 'nowrap',
},
},
bodyContainer: {
overflow: 'auto',
},
resize: {
cursor: 'col-resize',
width: 4,
position: 'absolute',
top: 0,
bottom: 0,
zIndex: 1, // Leak on the next cell
},
resizeStart: {
left: 0,
},
resizeEnd: {
right: 0,
},
});

const DataGrid = React.forwardRef(function DataGrid(props, ref) {
const { columns = [], classes, className, rowsData = [], ...other } = props;
const {
classes,
className,
columns = [],
defaultColumnOptions = {},
rowsData = [],
...other
} = props;
const rootRef = React.useRef();
const handleRef = useForkRef(ref, rootRef);

const rowsHeader = [columns];

const handleResizeMouseMove = useEventCallback(event => {});

const handleResizeMouseUp = useEventCallback(event => {
const doc = ownerDocument(rootRef.current);

// Ignore previously defined value. hope it won't be an issue.
doc.body.style.removeProperty('cursor');

const rowsHeader = [];
doc.removeEventListener('mousemove', handleResizeMouseMove);
doc.removeEventListener('mouseup', handleResizeMouseUp);
});

const handleResizeMouseDown = event => {
// Avoid text selection.
event.preventDefault();

const doc = ownerDocument(rootRef.current);

doc.body.style.cursor = 'col-resize';

doc.addEventListener('mousemove', handleResizeMouseMove);
doc.addEventListener('mouseup', handleResizeMouseUp);
};

const handleResizeDoubleClick = () => {
console.log('autosize');
};

return (
<div className={clsx(classes.root, className)} ref={ref} {...other}>
<div className={clsx(classes.root, className)} ref={handleRef} {...other}>
<table>
<thead>
{rowsHeader.map((row, index) => (
<tr key={index}>
{columns.map(column => (
<th key={column.field} rowSpan={null} colSpan={null}>
{row[column.label]}
<div
aria-hidden
onMouseDown={handleResizeMouseDown}
onDoubleClick={handleResizeDoubleClick}
className={clsx(classes.resize, classes.resizeStart)}
/>
{column.label || column.field}
<div
aria-hidden
onMouseDown={handleResizeMouseDown}
onDoubleClick={handleResizeDoubleClick}
className={clsx(classes.resize, classes.resizeEnd)}
/>
</th>
))}
</tr>
))}
</thead>
<tbody>
{rowsData.map((row, index) => (
<tr key={index}>
</table>
<div className={classes.bodyContainer}>
<List
height={300}
itemCount={rowsData.length}
outerElementType="div"
innerElementType="div"
overscanCount={10}
itemSize={() => {
return 28;
}}
width={600}
>
{({ index, style }) => (
<div key={index} style={style}>
{columns.map(column => (
<td key={column.field}>{row[column.field]}</td>
<span key={column.field}>{rowsData[index][column.field]}</span>
))}
</tr>
))}
</tbody>
</div>
)}
</List>
{/*
- <table>
- <tbody>
- {rowsData.map((row, index) => (
- <tr key={index}>
- {columns.map(column => (
- <td key={column.field}>{row[column.field]}</td>
- ))}
- </tr>
- ))}
- </tbody>
- </table>
*/}
</div>
<table>
<tfoot>
<tr>
<TablePagination
1 change: 1 addition & 0 deletions packages/material-ui/src/Slider/Slider.js
Original file line number Diff line number Diff line change
@@ -693,6 +693,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
onMouseDown(event);
}

// Avoid text selection.
event.preventDefault();
const finger = trackFinger(event, touchId);
const { newValue, activeIndex } = getFingerNewValue({ finger, values, source: valueDerived });

0 comments on commit c78d05f

Please sign in to comment.