text: (window.webpackJsonp=window.webpackJsonp||[]).push([[0],{152:function(module,exports,__webpack_require__){"use strict";var SortDirection;function sortAsc(a,b){return a<b?-1:a>b?1:0}Object.defineProperty(exports,"__esModule",{value:!0}),exports.sortSmart=exports.sort=exports.toggleDirection=exports.guid=exports.makeClassName=exports.SortDirection=void 0,function(SortDirection){SortDirection.Ascending="asc",SortDirection.Descending="des"}(SortDirection=exports.SortDirection||(exports.SortDirection={})),exports.makeClassName=args=>args.join(" "),exports.guid=()=>"uuid-"+((new Date).getTime().toString(16)+Math.floor(1e7*Math.random()).toString(16)),exports.toggleDirection=inputDirection=>inputDirection===SortDirection.Ascending?SortDirection.Descending:SortDirection.Ascending,exports.sort=function sort(data,field,direction){const sorted=data.sort((a,b)=>sortAsc(a[field],b[field]));return direction===SortDirection.Descending?sorted.reverse():sorted};const defaultSortOptions={autoCheckDateFields:!0,dateFieldRegex:/date/i,rawFieldSuffix:"Raw"};exports.sortSmart=function sortSmart(data,field,direction,options){const{autoCheckDateFields:autoCheckDateFields,dateFieldRegex:dateFieldRegex,rawFieldSuffix:rawFieldSuffix}=Object.assign({},defaultSortOptions,options),sorted=data.sort((a,b)=>{const rawName=`${field}${rawFieldSuffix}`,actualField=a.hasOwnProperty(rawName)?rawName:field,first=a[actualField],second=b[actualField];return autoCheckDateFields&&actualField.match(dateFieldRegex)?function sortByDate(a,b){return Date.parse(a)-Date.parse(b)}(first,second):sortAsc(first,second)});return direction===SortDirection.Descending?sorted.reverse():sorted}},153:function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.userData=void 0,exports.userData={headerRow:[{dataField:"name",label:"Name"},{dataField:"address",label:"Address"},{dataField:"city",label:"City"},{dataField:"state",label:"State"},{dataField:"score",label:"Score"}],dataRows:[{name:"John Doe",address:"23 Randolph St",city:"San Francisco",state:"CA",score:100},{name:"Dexter White",address:"918 Windsor Avenue",city:"Ashland",state:"OH",score:50},{name:"Henrietta Burke",address:"40 Hilldale Ave",city:"Atlanta",state:"GA",score:"30303"},{name:"Mary Elliott",address:"386 Trusel St",city:"Newburgh",state:"NY",score:300},{name:"Jo Freeman",address:"8 Griffin Court",city:"Middletown",state:"CT",score:12}]}},326:function(module,exports,__webpack_require__){"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){void 0===k2&&(k2=k),Object.defineProperty(o,k2,{enumerable:!0,get:function(){return m[k]}})}:function(o,m,k,k2){void 0===k2&&(k2=k),o[k2]=m[k]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,v){Object.defineProperty(o,"default",{enumerable:!0,value:v})}:function(o,v){o.default=v}),__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)"default"!==k&&Object.hasOwnProperty.call(mod,k)&&__createBinding(result,mod,k);return __setModuleDefault(result,mod),result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Grid=void 0;const react_1=__importStar(__webpack_require__(4)),grid_scss_1=__importDefault(__webpack_require__(723)),context_1=__webpack_require__(327),utils_1=__webpack_require__(152);exports.Grid=props=>{const{children:children,className:className,overrideStyles:overrideStyles}=props,[columnCount,setColumnCount]=react_1.useState(props.columnCount||0),classes=utils_1.makeClassName([grid_scss_1.default.grid,className]);return react_1.default.createElement(context_1.GridContext.Provider,{value:{columnCount:columnCount,setColumnCount:setColumnCount}},react_1.default.createElement("div",{style:overrideStyles,className:classes},children))}},327:function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GridContext=void 0;const react_1=__importDefault(__webpack_require__(4));exports.GridContext=react_1.default.createContext({columnCount:0,setColumnCount:value=>{}})},330:function(module,exports,__webpack_require__){__webpack_require__(331),__webpack_require__(489),module.exports=__webpack_require__(490)},397:function(module,exports){},490:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){__webpack_require__(19);var _storybook_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(69),_storybook_addon_console__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(328);const req=__webpack_require__(712);const optionsCallback=options=>({panelExclude:[...options.panelExclude,/(Warning|exp)/]});Object(_storybook_react__WEBPACK_IMPORTED_MODULE_1__.addDecorator)((storyFn,context)=>Object(_storybook_addon_console__WEBPACK_IMPORTED_MODULE_2__.withConsole)(optionsCallback)(storyFn)(context)),Object(_storybook_react__WEBPACK_IMPORTED_MODULE_1__.configure)((function loadStories(){req.keys().forEach(filename=>req(filename))}),module)}.call(this,__webpack_require__(491)(module))},712:function(module,exports,__webpack_require__){var map={"./stories/ sorting-example.story.tsx":713,"./stories/basic-example.story.tsx":741,"./stories/fixed-size-grid.story.tsx":744,"./stories/styling-example.story.tsx":747,"./stories/variable-size-columns.story.tsx":750};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=712},713:function(module,exports,__webpack_require__){"use strict";(function(module){var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){void 0===k2&&(k2=k),Object.defineProperty(o,k2,{enumerable:!0,get:function(){return m[k]}})}:function(o,m,k,k2){void 0===k2&&(k2=k),o[k2]=m[k]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,v){Object.defineProperty(o,"default",{enumerable:!0,value:v})}:function(o,v){o.default=v}),__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)"default"!==k&&Object.hasOwnProperty.call(mod,k)&&__createBinding(result,mod,k);return __setModuleDefault(result,mod),result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var withSourceLoader=__webpack_require__(47).withSource,__STORY__=(__webpack_require__(47).addSource,'import { storiesOf } from "@storybook/react";\nimport React, { useCallback, useState } from "react";\nimport { HeaderRow, HeaderCell, Cell, Grid, Row, utils } from ".."; //"css-grid-reactjs"\nimport { userData } from "../mocked-data";\nimport style from "./sorting-example.scss";\n\nconst SortingExample = () => {\n    const [currentData, setCurrentData] = useState<any>(userData);\n    const [sortedBy, setSortedBy] = useState<any>(null);\n    const [sortDirection, setSortDirection] = useState<utils.SortDirection | null>(null);\n\n    const onSort = useCallback(\n        (field: string) => {\n            let direction = utils.toggleDirection(sortDirection);\n            setSortedBy(field);\n            setSortDirection(direction);\n            const data = Object.assign({}, currentData);\n            data.dataRows = utils.sort<any>(data.dataRows, field, direction);\n            setCurrentData(data);\n        },\n        [sortDirection, sortedBy, currentData]\n    );\n\n    return (\n        <Grid className={style.grid}>\n            <HeaderRow className={style.headerRow}>\n                {currentData.headerRow.map((header, i) => (\n                    <HeaderCell\n                        sortDirection={sortDirection}\n                        sortedBy={sortedBy}\n                        key={header.dataField}\n                        onSort={onSort}\n                        dataField={header.dataField}\n                    >\n                        {header.label}\n                    </HeaderCell>\n                ))}\n            </HeaderRow>\n            {currentData.dataRows.map((row, i) => (\n                <Row key={i}>\n                    <Cell>{row.name}</Cell>\n                    <Cell>{row.address}</Cell>\n                    <Cell>{row.city}</Cell>\n                    <Cell>{row.state}</Cell>\n                    <Cell>{row.score}</Cell>\n                </Row>\n            ))}\n        </Grid>\n    );\n};\n\nstoriesOf("Grid", module).add("Sorting Example", () => <SortingExample />);\n'),__ADDS_MAP__={"grid--sorting-example":{startLoc:{col:30,line:52},endLoc:{col:73,line:52},startBody:{col:49,line:52},endBody:{col:73,line:52}}};const react_1=__webpack_require__(69),react_2=__importStar(__webpack_require__(4)),__1=__webpack_require__(89),mocked_data_1=__webpack_require__(153),sorting_example_scss_1=__importDefault(__webpack_require__(739)),SortingExample=()=>{const[currentData,setCurrentData]=react_2.useState(mocked_data_1.userData),[sortedBy,setSortedBy]=react_2.useState(null),[sortDirection,setSortDirection]=react_2.useState(null),onSort=react_2.useCallback(field=>{let direction=__1.utils.toggleDirection(sortDirection);setSortedBy(field),setSortDirection(direction);const data=Object.assign({},currentData);data.dataRows=__1.utils.sort(data.dataRows,field,direction),setCurrentData(data)},[sortDirection,sortedBy,currentData]);return react_2.default.createElement(__1.Grid,{className:sorting_example_scss_1.default.grid},react_2.default.createElement(__1.HeaderRow,{className:sorting_example_scss_1.default.headerRow},currentData.headerRow.map((header,i)=>react_2.default.createElement(__1.HeaderCell,{sortDirection:sortDirection,sortedBy:sortedBy,key:header.dataField,onSort:onSort,dataField:header.dataField},header.label))),currentData.dataRows.map((row,i)=>react_2.default.createElement(__1.Row,{key:i},react_2.default.createElement(__1.Cell,null,row.name),react_2.default.createElement(__1.Cell,null,row.address),react_2.default.createElement(__1.Cell,null,row.city),react_2.default.createElement(__1.Cell,null,row.state),react_2.default.createElement(__1.Cell,null,row.score))))};react_1.storiesOf("Grid",module).addParameters({storySource:{source:__STORY__,locationsMap:__ADDS_MAP__}}).addDecorator(withSourceLoader(__STORY__,__ADDS_MAP__,"/ sorting-example.story.tsx",[],{},"/Users/sali1/code/css-grid-reactjs/src/stories",{})).add("Sorting Example",()=>react_2.default.createElement(SortingExample,null))}).call(this,__webpack_require__(46)(module))},722:function(module,exports,__webpack_require__){"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){void 0===k2&&(k2=k),Object.defineProperty(o,k2,{enumerable:!0,get:function(){return m[k]}})}:function(o,m,k,k2){void 0===k2&&(k2=k),o[k2]=m[k]}),__exportStar=this&&this.__exportStar||function(m,exports){for(var p in m)"default"===p||exports.hasOwnProperty(p)||__createBinding(exports,m,p)};Object.defineProperty(exports,"__esModule",{value:!0});var grid_1=__webpack_require__(326);Object.defineProperty(exports,"Grid",{enumerable:!0,get:function(){return grid_1.Grid}});var row_1=__webpack_require__(726);Object.defineProperty(exports,"HeaderRow",{enumerable:!0,get:function(){return row_1.HeaderRow}}),Object.defineProperty(exports,"Row",{enumerable:!0,get:function(){return row_1.Row}});var cell_1=__webpack_require__(729);Object.defineProperty(exports,"HeaderCell",{enumerable:!0,get:function(){return cell_1.HeaderCell}}),Object.defineProperty(exports,"Cell",{enumerable:!0,get:function(){return cell_1.Cell}});var fixed_grid_1=__webpack_require__(732);Object.defineProperty(exports,"FixedGrid",{enumerable:!0,get:function(){return fixed_grid_1.FixedGrid}}),__exportStar(__webpack_require__(738),exports)},723:function(module,exports,__webpack_require__){var content=__webpack_require__(724);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(68)(content,options);content.locals&&(module.exports=content.locals)},724:function(module,exports,__webpack_require__){(exports=__webpack_require__(54)(!0)).push([module.i,".src-components-grid__grid--3LFPm{display:grid;margin:0 auto;font-family:Helvetica, Arial, sans-serif}\n","",{version:3,sources:["/Users/sali1/code/css-grid-reactjs/src/components/grid.scss"],names:[],mappings:"AACA,kCACI,YAAa,CACb,aAAc,CACd,wCAAyC",file:"grid.scss",sourcesContent:['//@import "./variables.scss";\n.grid {\n    display: grid;\n    margin: 0 auto;\n    font-family: Helvetica, Arial, sans-serif;\n}\n']}]),exports.locals={grid:"src-components-grid__grid--3LFPm"},module.exports=exports},726:function(module,exports,__webpack_require__){"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){void 0===k2&&(k2=k),Object.defineProperty(o,k2,{enumerable:!0,get:function(){return m[k]}})}:function(o,m,k,k2){void 0===k2&&(k2=k),o[k2]=m[k]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,v){Object.defineProperty(o,"default",{enumerable:!0,value:v})}:function(o,v){o.default=v}),__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)"default"!==k&&Object.hasOwnProperty.call(mod,k)&&__createBinding(result,mod,k);return __setModuleDefault(result,mod),result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Row=exports.HeaderRow=void 0;const react_1=__importStar(__webpack_require__(4)),row_scss_1=__importDefault(__webpack_require__(727)),context_1=__webpack_require__(327),utils_1=__webpack_require__(152);exports.HeaderRow=props=>{const{rowData:rowData,onHover:onHover,onHoverExit:onHoverExit,className:className,children:children,overrideStyles:overrideStyles}=props,context=react_1.useContext(context_1.GridContext),classes=utils_1.makeClassName([row_scss_1.default.headerRow,className]);return react_1.useEffect(()=>{let count=react_1.default.Children.toArray(children).length;context.setColumnCount(count)},[children]),react_1.default.createElement(exports.Row,{rowData:rowData,onHover:onHover,onHoverExit:onHoverExit,overrideStyles:overrideStyles,className:classes},children)},exports.Row=props=>{const{onClick:onClick,rowData:rowData,onHover:onHover,onHoverExit:onHoverExit,className:className,children:children,overrideStyles:overrideStyles}=props,context=react_1.useContext(context_1.GridContext),columnsClass=row_scss_1.default["columns-"+context.columnCount],classes=utils_1.makeClassName([row_scss_1.default.row,columnsClass,className]),onMouseOver=react_1.useCallback(e=>{e.preventDefault(),onHover&&onHover(rowData)},[rowData,onHover]),onMouseOut=react_1.useCallback(e=>{e.preventDefault(),onHoverExit&&onHoverExit(rowData)},[rowData,onHoverExit]),onClickHandler=react_1.useCallback(e=>{e.preventDefault(),onClick&&onClick(rowData)},[rowData,onClick]);return react_1.default.createElement("div",{onClick:onClickHandler,onMouseOver:onMouseOver,onMouseOut:onMouseOut,style:overrideStyles,className:classes},children)}},727:function(module,exports,__webpack_require__){var content=__webpack_require__(728);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(68)(content,options);content.locals&&(module.exports=content.locals)},728:function(module,exports,__webpack_require__){(exports=__webpack_require__(54)(!0)).push([module.i,".src-components-row__row--3oc8z{font-size:13px;align-content:center;display:grid}.src-components-row__row--3oc8z:nth-of-type(even){background-color:#efefef}.src-components-row__row--3oc8z:last-child{border-bottom:1px solid #d7d7d7}.src-components-row__row--3oc8z:hover{background:#e3f3fc}.src-components-row__header-row--Qzu4n{font-size:13px;align-content:center;font-weight:bold;background:#154271;font-weight:bold}.src-components-row__header-row--Qzu4n:hover{background:#154271}.src-components-row__columns-1--2hVho{grid-template-columns:repeat(1, 1fr)}.src-components-row__columns-2--2v7_o{grid-template-columns:repeat(2, 1fr)}.src-components-row__columns-3--AFoWK{grid-template-columns:repeat(3, 1fr)}.src-components-row__columns-4--55mNi{grid-template-columns:repeat(4, 1fr)}.src-components-row__columns-5--FaBHU{grid-template-columns:repeat(5, 1fr)}.src-components-row__columns-6--34rxE{grid-template-columns:repeat(6, 1fr)}.src-components-row__columns-7--1yzkF{grid-template-columns:repeat(7, 1fr)}.src-components-row__columns-8--3blmY{grid-template-columns:repeat(8, 1fr)}.src-components-row__columns-9--3RIDs{grid-template-columns:repeat(9, 1fr)}.src-components-row__columns-10--2G9qE{grid-template-columns:repeat(10, 1fr)}.src-components-row__columns-11--1a7Ch{grid-template-columns:repeat(11, 1fr)}.src-components-row__columns-12--39Zuw{grid-template-columns:repeat(12, 1fr)}.src-components-row__columns-13--2I0Q6{grid-template-columns:repeat(13, 1fr)}.src-components-row__columns-14--250_j{grid-template-columns:repeat(14, 1fr)}.src-components-row__columns-15--cTZmC{grid-template-columns:repeat(15, 1fr)}.src-components-row__columns-16--2xTBV{grid-template-columns:repeat(16, 1fr)}.src-components-row__columns-17--3jD83{grid-template-columns:repeat(17, 1fr)}.src-components-row__columns-18--36jPw{grid-template-columns:repeat(18, 1fr)}.src-components-row__columns-19--hDfe-{grid-template-columns:repeat(19, 1fr)}.src-components-row__columns-20--2hZut{grid-template-columns:repeat(20, 1fr)}.src-components-row__columns-21--sJeJp{grid-template-columns:repeat(21, 1fr)}.src-components-row__columns-22--1MxKo{grid-template-columns:repeat(22, 1fr)}.src-components-row__columns-23--zuZ8W{grid-template-columns:repeat(23, 1fr)}.src-components-row__columns-24--2y4g_{grid-template-columns:repeat(24, 1fr)}.src-components-row__columns-25--1V9I3{grid-template-columns:repeat(25, 1fr)}.src-components-row__columns-26--AOD4t{grid-template-columns:repeat(26, 1fr)}.src-components-row__columns-27--1usB8{grid-template-columns:repeat(27, 1fr)}.src-components-row__columns-28--2QIrW{grid-template-columns:repeat(28, 1fr)}.src-components-row__columns-29--2xdsh{grid-template-columns:repeat(29, 1fr)}.src-components-row__columns-30--2Noc-{grid-template-columns:repeat(30, 1fr)}\n","",{version:3,sources:["/Users/sali1/code/css-grid-reactjs/src/components/row.scss","/Users/sali1/code/css-grid-reactjs/src/components/variables.scss"],names:[],mappings:"AAEA,gCACI,cAAe,CACf,oBAAqB,CACrB,YAAa,CAHjB,kDAKQ,wBCNgB,CDCxB,2CASQ,+BCRc,CDDtB,sCAYQ,kBCZiB,CDapB,uCAID,cAAe,CACf,oBAAqB,CACrB,gBAAiB,CACjB,kBCtBkB,CDuBlB,gBAAiB,CALrB,6CAOQ,kBCzBc,CD0BjB,sCAKD,oCAAqC,CACxC,sCAEG,oCAAqC,CACxC,sCAEG,oCAAqC,CACxC,sCAEG,oCAAqC,CACxC,sCAEG,oCAAqC,CACxC,sCAEG,oCAAqC,CACxC,sCAEG,oCAAqC,CACxC,sCAEG,oCAAqC,CACxC,sCAEG,oCAAqC,CACxC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC,CACzC,uCAEG,qCAAsC",file:"row.scss",sourcesContent:['@import "./variables.scss";\n\n.row {\n    font-size: 13px;\n    align-content: center;\n    display: grid;\n    &:nth-of-type(even) {\n        background-color: $even-row-color;\n    }\n    //last row border\n    &:last-child {\n        border-bottom: 1px solid $border-color;\n    }\n    &:hover {\n        background: $row-hover-color;\n    }\n}\n\n.header-row {\n    font-size: 13px;\n    align-content: center;\n    font-weight: bold;\n    background: $header-color;\n    font-weight: bold;\n    &:hover {\n        background: $header-color;\n    }\n}\n\n//Columns\n.columns-1 {\n    grid-template-columns: repeat(1, 1fr);\n}\n.columns-2 {\n    grid-template-columns: repeat(2, 1fr);\n}\n.columns-3 {\n    grid-template-columns: repeat(3, 1fr);\n}\n.columns-4 {\n    grid-template-columns: repeat(4, 1fr);\n}\n.columns-5 {\n    grid-template-columns: repeat(5, 1fr);\n}\n.columns-6 {\n    grid-template-columns: repeat(6, 1fr);\n}\n.columns-7 {\n    grid-template-columns: repeat(7, 1fr);\n}\n.columns-8 {\n    grid-template-columns: repeat(8, 1fr);\n}\n.columns-9 {\n    grid-template-columns: repeat(9, 1fr);\n}\n.columns-10 {\n    grid-template-columns: repeat(10, 1fr);\n}\n.columns-11 {\n    grid-template-columns: repeat(11, 1fr);\n}\n.columns-12 {\n    grid-template-columns: repeat(12, 1fr);\n}\n.columns-13 {\n    grid-template-columns: repeat(13, 1fr);\n}\n.columns-14 {\n    grid-template-columns: repeat(14, 1fr);\n}\n.columns-15 {\n    grid-template-columns: repeat(15, 1fr);\n}\n.columns-16 {\n    grid-template-columns: repeat(16, 1fr);\n}\n.columns-17 {\n    grid-template-columns: repeat(17, 1fr);\n}\n.columns-18 {\n    grid-template-columns: repeat(18, 1fr);\n}\n.columns-19 {\n    grid-template-columns: repeat(19, 1fr);\n}\n.columns-20 {\n    grid-template-columns: repeat(20, 1fr);\n}\n.columns-21 {\n    grid-template-columns: repeat(21, 1fr);\n}\n.columns-22 {\n    grid-template-columns: repeat(22, 1fr);\n}\n.columns-23 {\n    grid-template-columns: repeat(23, 1fr);\n}\n.columns-24 {\n    grid-template-columns: repeat(24, 1fr);\n}\n.columns-25 {\n    grid-template-columns: repeat(25, 1fr);\n}\n.columns-26 {\n    grid-template-columns: repeat(26, 1fr);\n}\n.columns-27 {\n    grid-template-columns: repeat(27, 1fr);\n}\n.columns-28 {\n    grid-template-columns: repeat(28, 1fr);\n}\n.columns-29 {\n    grid-template-columns: repeat(29, 1fr);\n}\n.columns-30 {\n    grid-template-columns: repeat(30, 1fr);\n}\n',"$header-color: #154271;\n$even-row-color: #efefef;\n$row-hover-color: #e3f3fc;\n$border-color: #d7d7d7;\n$sort-icon-color: white;\n$header-text-color: white;\n"]}]),exports.locals={row:"src-components-row__row--3oc8z","header-row":"src-components-row__header-row--Qzu4n",headerRow:"src-components-row__header-row--Qzu4n","columns-1":"src-components-row__columns-1--2hVho",columns1:"src-components-row__columns-1--2hVho","columns-2":"src-components-row__columns-2--2v7_o",columns2:"src-components-row__columns-2--2v7_o","columns-3":"src-components-row__columns-3--AFoWK",columns3:"src-components-row__columns-3--AFoWK","columns-4":"src-components-row__columns-4--55mNi",columns4:"src-components-row__columns-4--55mNi","columns-5":"src-components-row__columns-5--FaBHU",columns5:"src-components-row__columns-5--FaBHU","columns-6":"src-components-row__columns-6--34rxE",columns6:"src-components-row__columns-6--34rxE","columns-7":"src-components-row__columns-7--1yzkF",columns7:"src-components-row__columns-7--1yzkF","columns-8":"src-components-row__columns-8--3blmY",columns8:"src-components-row__columns-8--3blmY","columns-9":"src-components-row__columns-9--3RIDs",columns9:"src-components-row__columns-9--3RIDs","columns-10":"src-components-row__columns-10--2G9qE",columns10:"src-components-row__columns-10--2G9qE","columns-11":"src-components-row__columns-11--1a7Ch",columns11:"src-components-row__columns-11--1a7Ch","columns-12":"src-components-row__columns-12--39Zuw",columns12:"src-components-row__columns-12--39Zuw","columns-13":"src-components-row__columns-13--2I0Q6",columns13:"src-components-row__columns-13--2I0Q6","columns-14":"src-components-row__columns-14--250_j",columns14:"src-components-row__columns-14--250_j","columns-15":"src-components-row__columns-15--cTZmC",columns15:"src-components-row__columns-15--cTZmC","columns-16":"src-components-row__columns-16--2xTBV",columns16:"src-components-row__columns-16--2xTBV","columns-17":"src-components-row__columns-17--3jD83",columns17:"src-components-row__columns-17--3jD83","columns-18":"src-components-row__columns-18--36jPw",columns18:"src-components-row__columns-18--36jPw","columns-19":"src-components-row__columns-19--hDfe-",columns19:"src-components-row__columns-19--hDfe-","columns-20":"src-components-row__columns-20--2hZut",columns20:"src-components-row__columns-20--2hZut","columns-21":"src-components-row__columns-21--sJeJp",columns21:"src-components-row__columns-21--sJeJp","columns-22":"src-components-row__columns-22--1MxKo",columns22:"src-components-row__columns-22--1MxKo","columns-23":"src-components-row__columns-23--zuZ8W",columns23:"src-components-row__columns-23--zuZ8W","columns-24":"src-components-row__columns-24--2y4g_",columns24:"src-components-row__columns-24--2y4g_","columns-25":"src-components-row__columns-25--1V9I3",columns25:"src-components-row__columns-25--1V9I3","columns-26":"src-components-row__columns-26--AOD4t",columns26:"src-components-row__columns-26--AOD4t","columns-27":"src-components-row__columns-27--1usB8",columns27:"src-components-row__columns-27--1usB8","columns-28":"src-components-row__columns-28--2QIrW",columns28:"src-components-row__columns-28--2QIrW","columns-29":"src-components-row__columns-29--2xdsh",columns29:"src-components-row__columns-29--2xdsh","columns-30":"src-components-row__columns-30--2Noc-",columns30:"src-components-row__columns-30--2Noc-"},module.exports=exports},729:function(module,exports,__webpack_require__){"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){void 0===k2&&(k2=k),Object.defineProperty(o,k2,{enumerable:!0,get:function(){return m[k]}})}:function(o,m,k,k2){void 0===k2&&(k2=k),o[k2]=m[k]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,v){Object.defineProperty(o,"default",{enumerable:!0,value:v})}:function(o,v){o.default=v}),__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)"default"!==k&&Object.hasOwnProperty.call(mod,k)&&__createBinding(result,mod,k);return __setModuleDefault(result,mod),result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.HeaderCell=exports.Cell=void 0;const react_1=__importStar(__webpack_require__(4)),cell_scss_1=__importDefault(__webpack_require__(730)),utils_1=__webpack_require__(152);exports.Cell=props=>{const{className:className,children:children,overrideStyles:overrideStyles}=props,classes=utils_1.makeClassName([cell_scss_1.default.cell,className]);return react_1.default.createElement("div",{style:overrideStyles,className:classes},children)},exports.HeaderCell=props=>{const{sortDirection:sortDirection,sortedBy:sortedBy,overrideStyles:overrideStyles,onSort:onSort,className:className,children:children,dataField:dataField}=props,sortable=onSort?cell_scss_1.default.sortable:null,classes=utils_1.makeClassName([cell_scss_1.default.cell,cell_scss_1.default.headerCell,className,sortable]),sorted=!!onSort&&sortedBy===dataField,onClick=react_1.useCallback(e=>{e.preventDefault(),sortable&&onSort(dataField)},[sortable,dataField,onSort]),sortedClass=sortDirection===utils_1.SortDirection.Descending?cell_scss_1.default.sortDes:cell_scss_1.default.sortAsc;return react_1.default.createElement("div",{style:overrideStyles,onClick:onClick,className:classes},!sorted&&react_1.default.createElement("div",null,children),sorted&&react_1.default.createElement("div",{className:cell_scss_1.default.sorted},react_1.default.createElement("div",null,children),react_1.default.createElement("div",{className:sortedClass})))}},730:function(module,exports,__webpack_require__){var content=__webpack_require__(731);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(68)(content,options);content.locals&&(module.exports=content.locals)},731:function(module,exports,__webpack_require__){(exports=__webpack_require__(54)(!0)).push([module.i,".src-components-cell__cell--kXRWD{align-content:center;padding:1rem;vertical-align:middle;word-break:break-word;border-right:1px solid #d7d7d7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.src-components-cell__cell--kXRWD:first-child{border-left:1px solid #d7d7d7}.src-components-cell__header-cell--3J2_w{vertical-align:middle;color:#fff;border-right:1px solid #d7d7d7}.src-components-cell__header-cell--3J2_w:last-child{border-right:unset}.src-components-cell__sortable--3GpNS{cursor:pointer}.src-components-cell__sorted--1ihod{display:flex;margin:auto;justify-content:space-between}.src-components-cell__sort-asc--H_WmW{border:5px solid transparent;border-bottom-color:#fff;margin-bottom:5px;margin-left:10px}.src-components-cell__sort-des--3jwzb{border:5px solid transparent;border-top-color:#fff;margin-top:6px;margin-left:10px}\n","",{version:3,sources:["/Users/sali1/code/css-grid-reactjs/src/components/cell.scss","/Users/sali1/code/css-grid-reactjs/src/components/variables.scss"],names:[],mappings:"AAEA,kCACI,oBAAqB,CACrB,YAAa,CACb,qBAAsB,CACtB,qBAAsB,CACtB,8BCJkB,CDQlB,eAAgB,CAChB,sBAAuB,CACvB,kBAAmB,CAXvB,8CAOQ,6BCNc,CDOjB,yCAOD,qBAAsB,CACtB,UCbqB,CDcrB,8BChBkB,CDatB,oDAKQ,kBAAmB,CACtB,sCAID,cAAe,CAClB,oCAGG,YAAa,CACb,WAAY,CACZ,6BAA8B,CACjC,sCAEG,4BAA6B,CAC7B,wBChCmB,CDiCnB,iBAAkB,CAClB,gBAAiB,CACpB,sCAGG,4BAA6B,CAC7B,qBCvCmB,CDwCnB,cAAe,CACf,gBAAiB",file:"cell.scss",sourcesContent:['@import "./variables.scss";\n\n.cell {\n    align-content: center;\n    padding: 1rem;\n    vertical-align: middle;\n    word-break: break-word;\n    border-right: 1px solid $border-color;\n    &:first-child {\n        border-left: 1px solid $border-color;\n    }\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.header-cell {\n    vertical-align: middle;\n    color: $header-text-color;\n    border-right: 1px solid $border-color;\n    &:last-child {\n        border-right: unset;\n    }\n}\n\n.sortable {\n    cursor: pointer;\n}\n\n.sorted {\n    display: flex;\n    margin: auto;\n    justify-content: space-between;\n}\n.sort-asc {\n    border: 5px solid transparent;\n    border-bottom-color: $sort-icon-color;\n    margin-bottom: 5px;\n    margin-left: 10px;\n}\n\n.sort-des {\n    border: 5px solid transparent;\n    border-top-color: $sort-icon-color;\n    margin-top: 6px;\n    margin-left: 10px;\n}\n',"$header-color: #154271;\n$even-row-color: #efefef;\n$row-hover-color: #e3f3fc;\n$border-color: #d7d7d7;\n$sort-icon-color: white;\n$header-text-color: white;\n"]}]),exports.locals={cell:"src-components-cell__cell--kXRWD","header-cell":"src-components-cell__header-cell--3J2_w",headerCell:"src-components-cell__header-cell--3J2_w",sortable:"src-components-cell__sortable--3GpNS",sorted:"src-components-cell__sorted--1ihod","sort-asc":"src-components-cell__sort-asc--H_WmW",sortAsc:"src-components-cell__sort-asc--H_WmW","sort-des":"src-components-cell__sort-des--3jwzb",sortDes:"src-components-cell__sort-des--3jwzb"},module.exports=exports},732:function(module,exports,__webpack_require__){"use strict";var __rest=this&&this.__rest||function(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(null!=s&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]])}return t},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FixedGrid=void 0,__webpack_require__(733);const react_1=__importDefault(__webpack_require__(4)),simplebar_react_1=__importDefault(__webpack_require__(753)),grid_1=__webpack_require__(326);exports.FixedGrid=props=>{const{children:children,scrollbarStyles:scrollbarStyles,autoHideScrollbar:autoHideScrollbar=!0}=props,rest=__rest(props,["children","scrollbarStyles","autoHideScrollbar"]);return react_1.default.createElement(simplebar_react_1.default,{style:scrollbarStyles,autoHide:autoHideScrollbar},react_1.default.createElement("div",null,react_1.default.createElement(grid_1.Grid,Object.assign({},rest),children)))}},738:function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0})},739:function(module,exports,__webpack_require__){var content=__webpack_require__(740);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(68)(content,options);content.locals&&(module.exports=content.locals)},740:function(module,exports,__webpack_require__){(exports=__webpack_require__(54)(!0)).push([module.i,".src-stories-sorting-example__grid--2GRfi{box-shadow:0 5px 15px 0 rgba(0,0,0,0.2)}.src-stories-sorting-example__cell--1DP9d{padding:unset;height:30px;padding:15px 0px 0px 15px}.src-stories-sorting-example__header-cell--P5vx3{height:30px;padding:15px 0px 0px 15px}.src-stories-sorting-example__header-row--J0-Yi{border-radius:0.5rem 0.5rem 0 0}\n","",{version:3,sources:["/Users/sali1/code/css-grid-reactjs/src/stories/sorting-example.scss"],names:[],mappings:"AAAA,0CACI,uCAA2C,CAC9C,0CAEG,aAAc,CACd,WAAY,CACZ,yBAA0B,CAC7B,iDAGG,WAAY,CACZ,yBAA0B,CAC7B,gDAEG,+BAAgC",file:"sorting-example.scss",sourcesContent:[".grid {\n    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);\n}\n.cell {\n    padding: unset;\n    height: 30px;\n    padding: 15px 0px 0px 15px;\n}\n\n.header-cell {\n    height: 30px;\n    padding: 15px 0px 0px 15px;\n}\n.header-row {\n    border-radius: 0.5rem 0.5rem 0 0;\n}\n"]}]),exports.locals={grid:"src-stories-sorting-example__grid--2GRfi",cell:"src-stories-sorting-example__cell--1DP9d","header-cell":"src-stories-sorting-example__header-cell--P5vx3",headerCell:"src-stories-sorting-example__header-cell--P5vx3","header-row":"src-stories-sorting-example__header-row--J0-Yi",headerRow:"src-stories-sorting-example__header-row--J0-Yi"},module.exports=exports},741:function(module,exports,__webpack_require__){"use strict";(function(module){var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var withSourceLoader=__webpack_require__(47).withSource,__STORY__=(__webpack_require__(47).addSource,'import React from "react";\nimport { storiesOf } from "@storybook/react";\nimport { HeaderRow, HeaderCell, Cell, Grid, Row } from ".."; //"css-grid-reactjs"\nimport style from "./basic-example.scss";\n\nconst BasicExample = () => {\n    return (\n        <Grid className={style.grid}>\n            <HeaderRow>\n                <HeaderCell dataField="name">Name</HeaderCell>\n                <HeaderCell dataField="address">Address</HeaderCell>\n                <HeaderCell dataField="city">City</HeaderCell>\n                <HeaderCell dataField="state">State</HeaderCell>\n                <HeaderCell dataField="zip">Zip</HeaderCell>\n                <HeaderCell dataField="year">Year</HeaderCell>\n            </HeaderRow>\n            <Row>\n                <Cell>John Doe</Cell>\n                <Cell>23 Randolph St</Cell>\n                <Cell>San Francisco</Cell>\n                <Cell>CA</Cell>\n                <Cell>1234</Cell>\n                <Cell>2015</Cell>\n            </Row>\n            <Row>\n                <Cell>Dexter White</Cell>\n                <Cell>918 Windsor Avenue</Cell>\n                <Cell>Ashland</Cell>\n                <Cell>OH</Cell>\n                <Cell>44805</Cell>\n                <Cell>2018</Cell>\n            </Row>\n            <Row>\n                <Cell>Henrietta Burke</Cell>\n                <Cell>40 Hilldale Ave</Cell>\n                <Cell>Atlanta</Cell>\n                <Cell>GA</Cell>\n                <Cell>30303</Cell>\n                <Cell>2019</Cell>\n            </Row>\n            <Row>\n                <Cell>Mary Elliott</Cell>\n                <Cell>386 Trusel St</Cell>\n                <Cell>Newburgh</Cell>\n                <Cell>NY</Cell>\n                <Cell>12550</Cell>\n                <Cell>2017</Cell>\n            </Row>\n            <Row>\n                <Cell>Jo Freeman</Cell>\n                <Cell>8 Griffin Court</Cell>\n                <Cell>Middletown</Cell>\n                <Cell>CT</Cell>\n                <Cell>06457</Cell>\n                <Cell>2016</Cell>\n            </Row>\n        </Grid>\n    );\n};\n\nstoriesOf("Grid", module).add("Basic Example", () => <BasicExample />);\n'),__ADDS_MAP__={"grid--basic-example":{startLoc:{col:30,line:61},endLoc:{col:69,line:61},startBody:{col:47,line:61},endBody:{col:69,line:61}}};const react_1=__importDefault(__webpack_require__(4)),react_2=__webpack_require__(69),__1=__webpack_require__(89),basic_example_scss_1=__importDefault(__webpack_require__(742)),BasicExample=()=>react_1.default.createElement(__1.Grid,{className:basic_example_scss_1.default.grid},react_1.default.createElement(__1.HeaderRow,null,react_1.default.createElement(__1.HeaderCell,{dataField:"name"},"Name"),react_1.default.createElement(__1.HeaderCell,{dataField:"address"},"Address"),react_1.default.createElement(__1.HeaderCell,{dataField:"city"},"City"),react_1.default.createElement(__1.HeaderCell,{dataField:"state"},"State"),react_1.default.createElement(__1.HeaderCell,{dataField:"zip"},"Zip"),react_1.default.createElement(__1.HeaderCell,{dataField:"year"},"Year")),react_1.default.createElement(__1.Row,null,react_1.default.createElement(__1.Cell,null,"John Doe"),react_1.default.createElement(__1.Cell,null,"23 Randolph St"),react_1.default.createElement(__1.Cell,null,"San Francisco"),react_1.default.createElement(__1.Cell,null,"CA"),react_1.default.createElement(__1.Cell,null,"1234"),react_1.default.createElement(__1.Cell,null,"2015")),react_1.default.createElement(__1.Row,null,react_1.default.createElement(__1.Cell,null,"Dexter White"),react_1.default.createElement(__1.Cell,null,"918 Windsor Avenue"),react_1.default.createElement(__1.Cell,null,"Ashland"),react_1.default.createElement(__1.Cell,null,"OH"),react_1.default.createElement(__1.Cell,null,"44805"),react_1.default.createElement(__1.Cell,null,"2018")),react_1.default.createElement(__1.Row,null,react_1.default.createElement(__1.Cell,null,"Henrietta Burke"),react_1.default.createElement(__1.Cell,null,"40 Hilldale Ave"),react_1.default.createElement(__1.Cell,null,"Atlanta"),react_1.default.createElement(__1.Cell,null,"GA"),react_1.default.createElement(__1.Cell,null,"30303"),react_1.default.createElement(__1.Cell,null,"2019")),react_1.default.createElement(__1.Row,null,react_1.default.createElement(__1.Cell,null,"Mary Elliott"),react_1.default.createElement(__1.Cell,null,"386 Trusel St"),react_1.default.createElement(__1.Cell,null,"Newburgh"),react_1.default.createElement(__1.Cell,null,"NY"),react_1.default.createElement(__1.Cell,null,"12550"),react_1.default.createElement(__1.Cell,null,"2017")),react_1.default.createElement(__1.Row,null,react_1.default.createElement(__1.Cell,null,"Jo Freeman"),react_1.default.createElement(__1.Cell,null,"8 Griffin Court"),react_1.default.createElement(__1.Cell,null,"Middletown"),react_1.default.createElement(__1.Cell,null,"CT"),react_1.default.createElement(__1.Cell,null,"06457"),react_1.default.createElement(__1.Cell,null,"2016")));react_2.storiesOf("Grid",module).addParameters({storySource:{source:__STORY__,locationsMap:__ADDS_MAP__}}).addDecorator(withSourceLoader(__STORY__,__ADDS_MAP__,"/basic-example.story.tsx",[],{},"/Users/sali1/code/css-grid-reactjs/src/stories",{})).add("Basic Example",()=>react_1.default.createElement(BasicExample,null))}).call(this,__webpack_require__(46)(module))},742:function(module,exports,__webpack_require__){var content=__webpack_require__(743);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(68)(content,options);content.locals&&(module.exports=content.locals)},743:function(module,exports,__webpack_require__){(exports=__webpack_require__(54)(!0)).push([module.i,".src-stories-basic-example__grid--9e9h1{box-shadow:0 5px 15px 0 rgba(0,0,0,0.2)}.src-stories-basic-example__header-row--KYriZ{border-radius:0.5rem 0.5rem 0 0}\n","",{version:3,sources:["/Users/sali1/code/css-grid-reactjs/src/stories/basic-example.scss"],names:[],mappings:"AAAA,wCACI,uCAA2C,CAC9C,8CAGG,+BAAgC",file:"basic-example.scss",sourcesContent:[".grid {\n    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);\n}\n\n.header-row {\n    border-radius: 0.5rem 0.5rem 0 0;\n}\n"]}]),exports.locals={grid:"src-stories-basic-example__grid--9e9h1","header-row":"src-stories-basic-example__header-row--KYriZ",headerRow:"src-stories-basic-example__header-row--KYriZ"},module.exports=exports},744:function(module,exports,__webpack_require__){"use strict";(function(module){var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var withSourceLoader=__webpack_require__(47).withSource,__STORY__=(__webpack_require__(47).addSource,'import { storiesOf } from "@storybook/react";\nimport React from "react";\nimport { HeaderRow, HeaderCell, Cell, FixedGrid, Row } from ".."; //"css-grid-reactjs"\nimport { userData } from "../mocked-data";\nimport style from "./fixed-size-grid.scss";\n\nconst FixedSizeGridExample = () => {\n    return (\n        <FixedGrid className={style.grid}>\n            <HeaderRow className={style.headerRow}>\n                {userData.headerRow.map(header => (\n                    <HeaderCell\n                        className={`${style.headerCell} ${style[header.dataField]}`}\n                        key={header.dataField}\n                        dataField={header.dataField}\n                    >\n                        {header.label}\n                    </HeaderCell>\n                ))}\n            </HeaderRow>\n            {userData.dataRows.map((row, i) => (\n                <Row className={style.row} rowData={row} key={i} hoverClassName={style.hoverRow}>\n                    <Cell className={style["name"]}>{row.name}</Cell>\n                    <Cell className={style["address"]}>{row.address}</Cell>\n                    <Cell className={style["city"]}>{row.city}</Cell>\n                    <Cell className={style["state"]}>{row.state}</Cell>\n                    <Cell className={style["score"]}>{row.score}</Cell>\n                </Row>\n            ))}\n        </FixedGrid>\n    );\n};\n\nstoriesOf("Grid", module).add("Fixed Size Grid Example", () => <FixedSizeGridExample />);\n'),__ADDS_MAP__={"grid--fixed-size-grid-example":{startLoc:{col:30,line:34},endLoc:{col:87,line:34},startBody:{col:57,line:34},endBody:{col:87,line:34}}};const react_1=__webpack_require__(69),react_2=__importDefault(__webpack_require__(4)),__1=__webpack_require__(89),mocked_data_1=__webpack_require__(153),fixed_size_grid_scss_1=__importDefault(__webpack_require__(745)),FixedSizeGridExample=()=>react_2.default.createElement(__1.FixedGrid,{className:fixed_size_grid_scss_1.default.grid},react_2.default.createElement(__1.HeaderRow,{className:fixed_size_grid_scss_1.default.headerRow},mocked_data_1.userData.headerRow.map(header=>react_2.default.createElement(__1.HeaderCell,{className:`${fixed_size_grid_scss_1.default.headerCell} ${fixed_size_grid_scss_1.default[header.dataField]}`,key:header.dataField,dataField:header.dataField},header.label))),mocked_data_1.userData.dataRows.map((row,i)=>react_2.default.createElement(__1.Row,{className:fixed_size_grid_scss_1.default.row,rowData:row,key:i,hoverClassName:fixed_size_grid_scss_1.default.hoverRow},react_2.default.createElement(__1.Cell,{className:fixed_size_grid_scss_1.default.name},row.name),react_2.default.createElement(__1.Cell,{className:fixed_size_grid_scss_1.default.address},row.address),react_2.default.createElement(__1.Cell,{className:fixed_size_grid_scss_1.default.city},row.city),react_2.default.createElement(__1.Cell,{className:fixed_size_grid_scss_1.default.state},row.state),react_2.default.createElement(__1.Cell,{className:fixed_size_grid_scss_1.default.score},row.score))));react_1.storiesOf("Grid",module).addParameters({storySource:{source:__STORY__,locationsMap:__ADDS_MAP__}}).addDecorator(withSourceLoader(__STORY__,__ADDS_MAP__,"/fixed-size-grid.story.tsx",[],{},"/Users/sali1/code/css-grid-reactjs/src/stories",{})).add("Fixed Size Grid Example",()=>react_2.default.createElement(FixedSizeGridExample,null))}).call(this,__webpack_require__(46)(module))},745:function(module,exports,__webpack_require__){var content=__webpack_require__(746);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(68)(content,options);content.locals&&(module.exports=content.locals)},746:function(module,exports,__webpack_require__){(exports=__webpack_require__(54)(!0)).push([module.i,".src-stories-fixed-size-grid__grid--14jwk{margin-bottom:10px}.src-stories-fixed-size-grid__grid--14jwk .src-stories-fixed-size-grid__row--1NPmZ,.src-stories-fixed-size-grid__grid--14jwk .src-stories-fixed-size-grid__header-row--3iD5h{border-radius:0.5rem 0.5rem 0 0}.src-stories-fixed-size-grid__name--2cNDy{width:500px}.src-stories-fixed-size-grid__address--2t680{width:700px}.src-stories-fixed-size-grid__city--3_BDj{width:400px}.src-stories-fixed-size-grid__state--2EJzT{width:80px}.src-stories-fixed-size-grid__score--1IbzX{width:200px}\n","",{version:3,sources:["/Users/sali1/code/css-grid-reactjs/src/stories/fixed-size-grid.scss"],names:[],mappings:"AAAA,0CACI,kBAAmB,CADvB,6KAIQ,+BAAgC,CACnC,0CAGD,WAAY,CACf,6CAEG,WAAY,CACf,0CAEG,WAAY,CACf,2CAEG,UAAW,CACd,2CAEG,WAAY",file:"fixed-size-grid.scss",sourcesContent:[".grid {\n    margin-bottom: 10px;\n    .row,\n    .header-row {\n        border-radius: 0.5rem 0.5rem 0 0;\n    }\n}\n.name {\n    width: 500px;\n}\n.address {\n    width: 700px;\n}\n.city {\n    width: 400px;\n}\n.state {\n    width: 80px;\n}\n.score {\n    width: 200px;\n}\n"]}]),exports.locals={grid:"src-stories-fixed-size-grid__grid--14jwk",row:"src-stories-fixed-size-grid__row--1NPmZ","header-row":"src-stories-fixed-size-grid__header-row--3iD5h",headerRow:"src-stories-fixed-size-grid__header-row--3iD5h",name:"src-stories-fixed-size-grid__name--2cNDy",address:"src-stories-fixed-size-grid__address--2t680",city:"src-stories-fixed-size-grid__city--3_BDj",state:"src-stories-fixed-size-grid__state--2EJzT",score:"src-stories-fixed-size-grid__score--1IbzX"},module.exports=exports},747:function(module,exports,__webpack_require__){"use strict";(function(module){var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){void 0===k2&&(k2=k),Object.defineProperty(o,k2,{enumerable:!0,get:function(){return m[k]}})}:function(o,m,k,k2){void 0===k2&&(k2=k),o[k2]=m[k]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,v){Object.defineProperty(o,"default",{enumerable:!0,value:v})}:function(o,v){o.default=v}),__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)"default"!==k&&Object.hasOwnProperty.call(mod,k)&&__createBinding(result,mod,k);return __setModuleDefault(result,mod),result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var withSourceLoader=__webpack_require__(47).withSource,__STORY__=(__webpack_require__(47).addSource,'import { storiesOf } from "@storybook/react";\nimport React, { useCallback, useState } from "react";\nimport { HeaderRow, HeaderCell, Cell, Grid, Row } from ".."; //"css-grid-reactjs"\nimport { userData } from "../mocked-data";\nimport style from "./styling-example.scss";\nimport { utils } from "../";\n\nconst StylingExample = () => {\n    const [currentData, setCurrentData] = useState<any>(userData);\n    const [sortedBy, setSortedBy] = useState<any>(null);\n    const [sortDirection, setSortDirection] = useState<utils.SortDirection | null>(null);\n\n    const onHover = useCallback((rowData: any) => {\n        console.log("onHover");\n    }, []);\n\n    const onClick = useCallback((rowData: any) => {\n        console.log("onClick");\n    }, []);\n\n    const onSort = useCallback(\n        (field: string) => {\n            const direction =\n                sortDirection === utils.SortDirection.Ascending\n                    ? utils.SortDirection.Descending\n                    : utils.SortDirection.Ascending;\n            setSortedBy(field);\n            setSortDirection(direction);\n            const data = Object.assign({}, currentData);\n            data.dataRows = utils.sort<any>(data.dataRows, field, direction);\n            setCurrentData(data);\n        },\n        [sortedBy, sortDirection, currentData]\n    );\n\n    return (\n        <Grid className={style.grid}>\n            <HeaderRow className={style.headerRow}>\n                {currentData.headerRow.map(header => (\n                    <HeaderCell\n                        sortedBy={sortedBy}\n                        sortDirection={sortDirection}\n                        className={style.headerCell}\n                        key={header.dataField}\n                        dataField={header.dataField}\n                        onSort={onSort}\n                    >\n                        {header.label}\n                    </HeaderCell>\n                ))}\n            </HeaderRow>\n            {currentData.dataRows.map((row, i) => (\n                <Row\n                    className={style.row}\n                    onClick={onClick}\n                    rowData={row}\n                    onHover={onHover}\n                    key={i}\n                    hoverClassName={style.hoverRow}\n                >\n                    <Cell className={style.cell}>{row.name}</Cell>\n                    <Cell className={style.cell}>{row.address}</Cell>\n                    <Cell className={style.cell}>{row.city}</Cell>\n                    <Cell className={style.cell}>{row.state}</Cell>\n                    <Cell className={style.cell}>{row.score}</Cell>\n                </Row>\n            ))}\n        </Grid>\n    );\n};\n\nstoriesOf("Grid", module).add("Styling Example", () => <StylingExample />);\n'),__ADDS_MAP__={"grid--styling-example":{startLoc:{col:30,line:72},endLoc:{col:73,line:72},startBody:{col:49,line:72},endBody:{col:73,line:72}}};const react_1=__webpack_require__(69),react_2=__importStar(__webpack_require__(4)),__1=__webpack_require__(89),mocked_data_1=__webpack_require__(153),styling_example_scss_1=__importDefault(__webpack_require__(748)),__2=__webpack_require__(89),StylingExample=()=>{const[currentData,setCurrentData]=react_2.useState(mocked_data_1.userData),[sortedBy,setSortedBy]=react_2.useState(null),[sortDirection,setSortDirection]=react_2.useState(null),onHover=react_2.useCallback(rowData=>{console.log("onHover")},[]),onClick=react_2.useCallback(rowData=>{console.log("onClick")},[]),onSort=react_2.useCallback(field=>{const direction=sortDirection===__2.utils.SortDirection.Ascending?__2.utils.SortDirection.Descending:__2.utils.SortDirection.Ascending;setSortedBy(field),setSortDirection(direction);const data=Object.assign({},currentData);data.dataRows=__2.utils.sort(data.dataRows,field,direction),setCurrentData(data)},[sortedBy,sortDirection,currentData]);return react_2.default.createElement(__1.Grid,{className:styling_example_scss_1.default.grid},react_2.default.createElement(__1.HeaderRow,{className:styling_example_scss_1.default.headerRow},currentData.headerRow.map(header=>react_2.default.createElement(__1.HeaderCell,{sortedBy:sortedBy,sortDirection:sortDirection,className:styling_example_scss_1.default.headerCell,key:header.dataField,dataField:header.dataField,onSort:onSort},header.label))),currentData.dataRows.map((row,i)=>react_2.default.createElement(__1.Row,{className:styling_example_scss_1.default.row,onClick:onClick,rowData:row,onHover:onHover,key:i,hoverClassName:styling_example_scss_1.default.hoverRow},react_2.default.createElement(__1.Cell,{className:styling_example_scss_1.default.cell},row.name),react_2.default.createElement(__1.Cell,{className:styling_example_scss_1.default.cell},row.address),react_2.default.createElement(__1.Cell,{className:styling_example_scss_1.default.cell},row.city),react_2.default.createElement(__1.Cell,{className:styling_example_scss_1.default.cell},row.state),react_2.default.createElement(__1.Cell,{className:styling_example_scss_1.default.cell},row.score))))};react_1.storiesOf("Grid",module).addParameters({storySource:{source:__STORY__,locationsMap:__ADDS_MAP__}}).addDecorator(withSourceLoader(__STORY__,__ADDS_MAP__,"/styling-example.story.tsx",[],{},"/Users/sali1/code/css-grid-reactjs/src/stories",{})).add("Styling Example",()=>react_2.default.createElement(StylingExample,null))}).call(this,__webpack_require__(46)(module))},748:function(module,exports,__webpack_require__){var content=__webpack_require__(749);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(68)(content,options);content.locals&&(module.exports=content.locals)},749:function(module,exports,__webpack_require__){(exports=__webpack_require__(54)(!0)).push([module.i,".src-stories-styling-example__grid--1eiUe{box-shadow:0 5px 15px 0 rgba(0,0,0,0.2)}.src-stories-styling-example__cell--22T1I{padding:unset;height:30px;padding:15px 0px 0px 15px}.src-stories-styling-example__header-cell--113Rs{height:30px;padding:15px 0px 0px 15px}.src-stories-styling-example__header-row--3Be3S{border-radius:0.5rem 0.5rem 0 0}.src-stories-styling-example__row--3x_ck:hover{background:silver}\n","",{version:3,sources:["/Users/sali1/code/css-grid-reactjs/src/stories/styling-example.scss"],names:[],mappings:"AAAA,0CACI,uCAA2C,CAC9C,0CAEG,aAAc,CACd,WAAY,CACZ,yBAA0B,CAC7B,iDAGG,WAAY,CACZ,yBAA0B,CAC7B,gDAEG,+BAAgC,CACnC,+CAIO,iBAAkB",file:"styling-example.scss",sourcesContent:[".grid {\n    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);\n}\n.cell {\n    padding: unset;\n    height: 30px;\n    padding: 15px 0px 0px 15px;\n}\n\n.header-cell {\n    height: 30px;\n    padding: 15px 0px 0px 15px;\n}\n.header-row {\n    border-radius: 0.5rem 0.5rem 0 0;\n}\n\n.row {\n    &:hover {\n        background: silver;\n    }\n}\n"]}]),exports.locals={grid:"src-stories-styling-example__grid--1eiUe",cell:"src-stories-styling-example__cell--22T1I","header-cell":"src-stories-styling-example__header-cell--113Rs",headerCell:"src-stories-styling-example__header-cell--113Rs","header-row":"src-stories-styling-example__header-row--3Be3S",headerRow:"src-stories-styling-example__header-row--3Be3S",row:"src-stories-styling-example__row--3x_ck"},module.exports=exports},750:function(module,exports,__webpack_require__){"use strict";(function(module){var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var withSourceLoader=__webpack_require__(47).withSource,__STORY__=(__webpack_require__(47).addSource,'import { storiesOf } from "@storybook/react";\nimport React from "react";\nimport { HeaderRow, HeaderCell, Cell, Grid, Row } from ".."; //"css-grid-reactjs"\nimport { userData } from "../mocked-data";\nimport style from "./variable-size-columns.scss";\n\nconst VariableSizeColumns = () => {\n    return (\n        <Grid className={style.grid}>\n            <HeaderRow className={style.headerRow}>\n                {userData.headerRow.map(header => (\n                    <HeaderCell className={style.headerCell} key={header.dataField} dataField={header.dataField}>\n                        {header.label}\n                    </HeaderCell>\n                ))}\n            </HeaderRow>\n            {userData.dataRows.map((row, i) => (\n                <Row className={style.row} rowData={row} key={i} hoverClassName={style.hoverRow}>\n                    <Cell className={style.cell}>{row.name}</Cell>\n                    <Cell className={style.cell}>{row.address}</Cell>\n                    <Cell className={style.cell}>{row.city}</Cell>\n                    <Cell className={style.cell}>{row.state}</Cell>\n                    <Cell className={style.cell}>{row.score}</Cell>\n                </Row>\n            ))}\n        </Grid>\n    );\n};\n\nstoriesOf("Grid", module).add("Variable Size Columns Example", () => <VariableSizeColumns />);\n'),__ADDS_MAP__={"grid--variable-size-columns-example":{startLoc:{col:30,line:30},endLoc:{col:92,line:30},startBody:{col:63,line:30},endBody:{col:92,line:30}}};const react_1=__webpack_require__(69),react_2=__importDefault(__webpack_require__(4)),__1=__webpack_require__(89),mocked_data_1=__webpack_require__(153),variable_size_columns_scss_1=__importDefault(__webpack_require__(751)),VariableSizeColumns=()=>react_2.default.createElement(__1.Grid,{className:variable_size_columns_scss_1.default.grid},react_2.default.createElement(__1.HeaderRow,{className:variable_size_columns_scss_1.default.headerRow},mocked_data_1.userData.headerRow.map(header=>react_2.default.createElement(__1.HeaderCell,{className:variable_size_columns_scss_1.default.headerCell,key:header.dataField,dataField:header.dataField},header.label))),mocked_data_1.userData.dataRows.map((row,i)=>react_2.default.createElement(__1.Row,{className:variable_size_columns_scss_1.default.row,rowData:row,key:i,hoverClassName:variable_size_columns_scss_1.default.hoverRow},react_2.default.createElement(__1.Cell,{className:variable_size_columns_scss_1.default.cell},row.name),react_2.default.createElement(__1.Cell,{className:variable_size_columns_scss_1.default.cell},row.address),react_2.default.createElement(__1.Cell,{className:variable_size_columns_scss_1.default.cell},row.city),react_2.default.createElement(__1.Cell,{className:variable_size_columns_scss_1.default.cell},row.state),react_2.default.createElement(__1.Cell,{className:variable_size_columns_scss_1.default.cell},row.score))));react_1.storiesOf("Grid",module).addParameters({storySource:{source:__STORY__,locationsMap:__ADDS_MAP__}}).addDecorator(withSourceLoader(__STORY__,__ADDS_MAP__,"/variable-size-columns.story.tsx",[],{},"/Users/sali1/code/css-grid-reactjs/src/stories",{})).add("Variable Size Columns Example",()=>react_2.default.createElement(VariableSizeColumns,null))}).call(this,__webpack_require__(46)(module))},751:function(module,exports,__webpack_require__){var content=__webpack_require__(752);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(68)(content,options);content.locals&&(module.exports=content.locals)},752:function(module,exports,__webpack_require__){(exports=__webpack_require__(54)(!0)).push([module.i,".src-stories-variable-size-columns__grid--3Xqo5{box-shadow:0 5px 15px 0 rgba(0,0,0,0.2)}.src-stories-variable-size-columns__grid--3Xqo5 .src-stories-variable-size-columns__row--2zz7q,.src-stories-variable-size-columns__grid--3Xqo5 .src-stories-variable-size-columns__header-row--uzMBI{border-radius:0.5rem 0.5rem 0 0;grid-template-columns:40fr 30fr 10fr 10fr 10fr}\n","",{version:3,sources:["/Users/sali1/code/css-grid-reactjs/src/stories/variable-size-columns.scss"],names:[],mappings:"AAAA,gDACI,uCAA2C,CAD/C,qMAKQ,+BAAgC,CAChC,8CAA+C",file:"variable-size-columns.scss",sourcesContent:[".grid {\n    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);\n\n    .row,\n    .header-row {\n        border-radius: 0.5rem 0.5rem 0 0;\n        grid-template-columns: 40fr 30fr 10fr 10fr 10fr;\n    }\n}\n"]}]),exports.locals={grid:"src-stories-variable-size-columns__grid--3Xqo5",row:"src-stories-variable-size-columns__row--2zz7q","header-row":"src-stories-variable-size-columns__header-row--uzMBI",headerRow:"src-stories-variable-size-columns__header-row--uzMBI"},module.exports=exports},89:function(module,exports,__webpack_require__){"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){void 0===k2&&(k2=k),Object.defineProperty(o,k2,{enumerable:!0,get:function(){return m[k]}})}:function(o,m,k,k2){void 0===k2&&(k2=k),o[k2]=m[k]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,v){Object.defineProperty(o,"default",{enumerable:!0,value:v})}:function(o,v){o.default=v}),__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)"default"!==k&&Object.hasOwnProperty.call(mod,k)&&__createBinding(result,mod,k);return __setModuleDefault(result,mod),result},__exportStar=this&&this.__exportStar||function(m,exports){for(var p in m)"default"===p||exports.hasOwnProperty(p)||__createBinding(exports,m,p)};Object.defineProperty(exports,"__esModule",{value:!0}),exports.utils=void 0;const utils=__importStar(__webpack_require__(152));exports.utils=utils,__exportStar(__webpack_require__(722),exports)}},[[330,1,2]]]);
  //# sourceMappingURL=main.ea23202f2038d3448896.bundle.js.map