1import React from 'react';
2import Icon from '@material-ui/icons/Apps';
3import DataTable from '../../src/index';
4import CustomMaterialMenu from '../shared/CustomMaterialMenu';
5
6const data = [
7	{
8		id: 1,
9		title: 'Cutting Costs',
10		by: 'me',
11		lastOpened: 'Aug 7 9:52 AM',
12	},
13	{
14		id: 2,
15		title: 'Wedding Planner',
16		by: 'me',
17		lastOpened: 'Sept 14 2:52 PM',
18	},
19	{
20		id: 3,
21		title: 'Expense Tracker',
22		by: 'me',
23		lastOpened: 'Sept 12 2:41 PM',
24	},
25	{
26		id: 4,
27		title: 'Home Brew Water Calculator',
28		by: 'me',
29		lastOpened: 'Jube 3 5:45 PM',
30	},
31];
32
33const customStyles = {
34	headRow: {
35		style: {
36			border: 'none',
37		},
38	},
39	headCells: {
40		style: {
41			color: '#202124',
42			fontSize: '14px',
43		},
44	},
45	rows: {
46		highlightOnHoverStyle: {
47			backgroundColor: 'rgb(230, 244, 244)',
48			borderBottomColor: '#FFFFFF',
49			borderRadius: '25px',
50			outline: '1px solid #FFFFFF',
51		},
52	},
53	pagination: {
54		style: {
55			border: 'none',
56		},
57	},
58};
59
60const columns = [
61	{
62		cell: () => <Icon style={{ fill: '#43a047' }} />,
63		width: '56px', // custom width for icon button
64		style: {
65			borderBottom: '1px solid #FFFFFF',
66			marginBottom: '-1px',
67		},
68	},
69	{
70		name: 'Title',
71		selector: row => row.title,
72		sortable: true,
73		grow: 2,
74		style: {
75			color: '#202124',
76			fontSize: '14px',
77			fontWeight: 500,
78		},
79	},
80	{
81		name: 'Owner',
82		selector: row => row.by,
83		sortable: true,
84		style: {
85			color: 'rgba(0,0,0,.54)',
86		},
87	},
88	{
89		name: 'Last opened',
90		selector: row => row.lastOpened,
91		sortable: true,
92		style: {
93			color: 'rgba(0,0,0,.54)',
94		},
95	},
96	{
97		cell: row => <CustomMaterialMenu size="small" row={row} />,
98		allowOverflow: true,
99		button: true,
100		width: '56px',
101	},
102];
103
104export const GoogleSheetsEsque = () => (
105	<DataTable
106		title="Google Sheets-esque"
107		columns={columns}
108		data={data}
109		customStyles={customStyles}
110		highlightOnHover
111		pointerOnHover
112	/>
113);
114
115export default {
116	title: 'Custom Styles/Google Sheets Esque',
117	component: GoogleSheetsEsque,
118};