resolved conflicts

mbrn · Jun 26, 2020 · 54988de · 54988de
2 parents bab0675 + 95845ee
commit 54988de
Show file tree

Hide file tree

Showing 14 changed files with 96 additions and 24 deletions.
diff --git a/.github/ROADMAP.md b/.github/ROADMAP.md
@@ -0,0 +1,44 @@
+<p
+  align="center" 
+  style="box-shadow: 2px 2px;"
+>
+  <a 
+    href="https://material-table.com" 
+    rel="noopener" 
+    target="_blank"
+  >
+    <img 
+      width="200" 
+      src="https://raw.githubusercontent.com/mbrn/material-table.com/master/docs/assets/logo-back.png" 
+      alt="material-table" 
+    />
+  </a>
+</p>
+
+<h1 align="center">
+  🛣️ Material Table Roadmap 🛣️
+</h1>
+
+<small>
+  last updated: June 6, 2020
+</small>
+
+<p align="center">
+  <i>
+    <b>
+    Currently, we would like to gain control of open issues and smaller pull requests. Once we have control of issues and PR's we will begin to entertain new features and enhancements.
+    </b>
+  </i>
+</p>
+
+---
+
+<h3 align="center">
+  🚧 Help Wanted 🚧
+</h3>
+
+<p align="center">
+  <i>
+  If you have some free time and would like to contribute, we always welcome help with open issues and/or pull requests to help resolve open issues.
+  </i>
+</p>
diff --git a/README.md b/README.md
@@ -18,6 +18,10 @@ A simple and powerful Datatable for React based on [Material-UI Table](https://m
 
 </div>
 
+## Roadmap
+
+ - [More on our roadmap can be found here](https://github.com/mbrn/material-table/blob/master/.github/ROADMAP.md)
+
 ## Key features
 
 - [Actions](https://material-table.com/#/docs/features/actions)

diff --git a/demo/demo.js b/demo/demo.js
@@ -72,7 +72,7 @@ class App extends Component {
       { id: 64, name: 'A6', surname: 'C', isMarried: true, birthDate: new Date(1989, 1, 1), birthCity: 34, sex: 'Female', type: 'child', insertDateTime: new Date(2018, 1, 1, 12, 23, 44), time: new Date(1900, 1, 1, 14, 23, 35), parentId: 5 }
     ],
     columns: [
-      { title: 'Adı', field: 'name', filterPlaceholder: 'Adı filter', tooltip: 'This is tooltip text' },
+      { title: 'Adı', field: 'name', filterPlaceholder: 'Adı filter', tooltip: 'This is tooltip text', editPlaceholder: 'This is placeholder' },
       { width: 200, title: 'Soyadı', field: 'surname', initialEditValue: 'test', tooltip: 'This is tooltip text' },
       { title: 'Evli', field: 'isMarried' },
       { title: 'Cinsiyet', field: 'sex', disableClick: true, editable: 'onAdd' },
@@ -135,7 +135,7 @@ class App extends Component {
                           {
                             /* const data = this.state.data;
                             const index = data.indexOf(oldData);
-                            data[index] = newData;                
+                            data[index] = newData;
                             this.setState({ data }, () => resolve()); */
                           }
                           resolve();

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "material-table",
-  "version": "1.61.0",
+  "version": "1.62.0",
   "description": "Datatable for React based on https://material-ui.com/api/table/ with additional features",
   "main": "dist/index.js",
   "types": "types/index.d.ts",
@@ -80,7 +80,7 @@
     "fast-deep-equal": "2.0.1",
     "filefy": "0.1.10",
     "prop-types": "^15.6.2",
-    "react-beautiful-dnd": "11.0.3",
+    "react-beautiful-dnd": "^13.0.0",
     "react-double-scrollbar": "0.0.15"
   },
   "peerDependencies": {

diff --git a/src/components/m-table-body-row.js b/src/components/m-table-body-row.js
@@ -85,7 +85,7 @@ export default class MTableBodyRow extends React.Component {
 
     if (typeof this.props.detailPanel == 'function') {
       return (
-        <TableCell size={size} padding="none" key="key-detail-panel-column" style={{ width: 42, textAlign: 'center' }}>
+        <TableCell size={size} padding="none" key="key-detail-panel-column" style={{ width: 42, textAlign: 'center', ...this.props.options.detailPanelColumnStyle }}>
           <IconButton
             size={size}
             style={{ transition: 'all ease 200ms', ...this.rotateIconStyle(this.props.data.tableData.showDetailPanel) }}
@@ -102,7 +102,7 @@ export default class MTableBodyRow extends React.Component {
     else {
       return (
         <TableCell size={size} padding="none" key="key-detail-panel-column">
-          <div style={{ width: 42 * this.props.detailPanel.length, textAlign: 'center', display: 'flex' }}>
+          <div style={{ width: 42 * this.props.detailPanel.length, textAlign: 'center', display: 'flex', ...this.props.options.detailPanelColumnStyle }}>
             {this.props.detailPanel.map((panel, index) => {
 
               if (typeof panel === "function") {

diff --git a/src/components/m-table-body.js b/src/components/m-table-body.js
@@ -147,6 +147,7 @@ class MTableBody extends React.Component {
             hasDetailPanel={!!this.props.detailPanel}
             isTreeData={this.props.isTreeData}
             filterCellStyle={this.props.options.filterCellStyle}
+            filterRowStyle={this.props.options.filterRowStyle}
             hideFilterIcons={this.props.options.hideFilterIcons}
           />
         }

diff --git a/src/components/m-table-cell.js b/src/components/m-table-cell.js
@@ -99,7 +99,10 @@ export default class MTableCell extends React.Component {
     let cellStyle = {
       color: 'inherit',
       width: this.props.columnDef.tableData.width,
-      boxSizing: 'border-box'
+      boxSizing: 'border-box',
+      fontSize: "inherit",
+      fontFamily: "inherit",
+      fontWeight: "inherit",
     };
 
     if (typeof this.props.columnDef.cellStyle === 'function') {
@@ -118,13 +121,13 @@ export default class MTableCell extends React.Component {
   render() {
 
     const { icons, columnDef, rowData, ...cellProps } = this.props;
-
+    const cellAlignment = columnDef.align !== undefined ? columnDef.align : ['numeric', 'currency'].indexOf(this.props.columnDef.type) !== -1 ? "right" : "left";
     return (
       <TableCell
         size={this.props.size}
         {...cellProps}
         style={this.getStyle()}
-        align={['numeric','currency'].indexOf(this.props.columnDef.type) !== -1 ? "right" : "left"}
+        align={cellAlignment}
         onClick={this.handleClickCell}
       >
         {this.props.children}

diff --git a/src/components/m-table-edit-field.js b/src/components/m-table-edit-field.js
@@ -119,7 +119,7 @@ class MTableEditField extends React.Component {
             'aria-label': `${this.props.columnDef.title}: press space to edit`
           }
           }}
-          
+
         />
       </MuiPickersUtilsProvider>
     );
@@ -131,7 +131,7 @@ class MTableEditField extends React.Component {
         {...this.getProps()}
         style={this.props.columnDef.type === 'numeric' ? { float: 'right' } : {}}
         type={this.props.columnDef.type === 'numeric' ? 'number' : 'text'}
-        placeholder={this.props.columnDef.title}
+        placeholder={this.props.columnDef.editPlaceholder || this.props.columnDef.title}
         value={this.props.value === undefined ? '' : this.props.value}
         onChange={event => this.props.onChange(event.target.value)}
         InputProps={{
@@ -150,7 +150,7 @@ class MTableEditField extends React.Component {
     return (
       <TextField
         {...this.getProps()}
-        placeholder={this.props.columnDef.title}
+        placeholder={this.props.columnDef.editPlaceholder || this.props.columnDef.title}
         value={this.props.value === undefined ? '' : this.props.value}
         onChange={event => this.props.onChange(event.target.value)}
         inputProps={{

diff --git a/src/components/m-table-edit-row.js b/src/components/m-table-edit-row.js
@@ -5,6 +5,7 @@ import Typography from '@material-ui/core/Typography';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { byString, setByString } from '../utils';
+import * as CommonValues from "../utils/common-values";
 /* eslint-enable no-unused-vars */
 
 
@@ -24,8 +25,9 @@ export default class MTableEditRow extends React.Component {
       return prev;
     },{});
   }
-  
+
   renderColumns() {
+    const size = CommonValues.elementSize(this.props);
     const mapArr = this.props.columns.filter(columnDef => !columnDef.hidden && !(columnDef.tableData.groupOrder > -1))
       .sort((a, b) => a.tableData.columnOrder - b.tableData.columnOrder)
       .map((columnDef, index) => {
@@ -72,6 +74,7 @@ export default class MTableEditRow extends React.Component {
           const readonlyValue = this.props.getFieldValue(this.state.data, columnDef);
           return (
             <this.props.components.Cell
+              size={size}
               icons={this.props.icons}
               columnDef={columnDef}
               value={readonlyValue}
@@ -87,6 +90,7 @@ export default class MTableEditRow extends React.Component {
 
           return (
             <TableCell
+              size={size}
               key={columnDef.tableData.id}
               align={['numeric'].indexOf(columnDef.type) !== -1 ? "right" : "left"}
               style={getCellStyle(columnDef, value)}
@@ -115,6 +119,7 @@ export default class MTableEditRow extends React.Component {
   }
 
   renderActions() {
+    const size = CommonValues.elementSize(this.props);
     const localization = { ...MTableEditRow.defaultProps.localization, ...this.props.localization };
     const actions = [
       {
@@ -135,9 +140,9 @@ export default class MTableEditRow extends React.Component {
       }
     ];
     return (
-      <TableCell padding="none" key="key-actions-column" style={{ width: 42 * actions.length, padding: '0px 5px' }}>
+      <TableCell size={size} padding="none" key="key-actions-column" style={{ width: 42 * actions.length, padding: '0px 5px', ...this.props.options.editCellStyle }}>
         <div style={{ display: 'flex' }}>
-          <this.props.components.Actions data={this.props.data} actions={actions} components={this.props.components} />
+          <this.props.components.Actions data={this.props.data} actions={actions} components={this.props.components} size={size} />
         </div>
       </TableCell>
     );
@@ -159,6 +164,7 @@ export default class MTableEditRow extends React.Component {
   }
 
   render() {
+    const size = CommonValues.elementSize(this.props);
     const localization = { ...MTableEditRow.defaultProps.localization, ...this.props.localization };
     let columns;
     if (this.props.mode === "add" || this.props.mode === "update") {
@@ -168,6 +174,7 @@ export default class MTableEditRow extends React.Component {
       const colSpan = this.props.columns.filter(columnDef => !columnDef.hidden && !(columnDef.tableData.groupOrder > -1)).length;
       columns = [
         <TableCell
+          size={size}
           padding={this.props.options.actionsColumnIndex === 0 ? "none" : undefined}
           key="key-edit-cell"
           colSpan={colSpan}>

diff --git a/src/components/m-table-filter-row.js b/src/components/m-table-filter-row.js
@@ -45,8 +45,9 @@ class MTableFilterRow extends React.Component {
         multiple
         value={selectedFilter}
         onClose={event => {
+
           if(columnDef.filterOnItemSelect !== true)
-            this.props.onFilterChanged(columnDef.tableData.id, event.target.value);
+            this.props.onFilterChanged(columnDef.tableData.id, selectedFilter);
         }}
         onChange={event => {
           setSelectedFilter(event.target.value);
@@ -216,7 +217,7 @@ class MTableFilterRow extends React.Component {
       });
 
     return (
-      <TableRow style={{ height: 10 }}>
+      <TableRow style={{ height: 10, ...this.props.filterRowStyle }}>
         {columns}
       </TableRow>
     );
@@ -239,6 +240,7 @@ MTableFilterRow.propTypes = {
   isTreeData: PropTypes.bool.isRequired,
   onFilterChanged: PropTypes.func.isRequired,
   filterCellStyle: PropTypes.object,
+  filterRowStyle: PropTypes.object,
   selection: PropTypes.bool.isRequired,
   actionsColumnIndex: PropTypes.number,
   hasActions: PropTypes.bool,

diff --git a/src/components/m-table-header.js b/src/components/m-table-header.js
@@ -71,11 +71,11 @@ export class MTableHeader extends React.Component {
         if (columnDef.tooltip) {
           content = <Tooltip title={columnDef.tooltip}><span>{content}</span></Tooltip>;
         }
-
+        const cellAlignment = columnDef.align !== undefined ? columnDef.align : ['numeric', 'currency'].indexOf(columnDef.type) !== -1 ? "right" : "left";
         return (
           <TableCell
             key={columnDef.tableData.id}
-            align={['numeric', 'currency'].indexOf(columnDef.type) !== -1 ? "right" : "left"}
+            align={cellAlignment}
             className={this.props.classes.header}
             style={{ ...this.props.headerStyle, ...columnDef.headerStyle, boxSizing: 'border-box', width: columnDef.tableData.width }}
             size={size}
@@ -99,7 +99,7 @@ export class MTableHeader extends React.Component {
         className={this.props.classes.header}
         style={{ ...this.props.headerStyle, width: width, textAlign: 'center', boxSizing: 'border-box' }}
       >
-        <TableSortLabel disabled>{localization.actions}</TableSortLabel>
+        <TableSortLabel hideSortIcon={true} disabled>{localization.actions}</TableSortLabel>
       </TableCell>
     );
   }

diff --git a/src/material-table.js b/src/material-table.js
@@ -83,7 +83,9 @@ export default class MaterialTable extends React.Component {
       this.dataManager.setData(props.data);
     }
 
-    isInit && this.dataManager.changeOrder(defaultSortColumnIndex, defaultSortDirection);
+    // If the columns changed and the defaultSorting differs from the current sorting, it will trigger a new sorting
+    const shouldReorder = (isInit || (defaultSortColumnIndex !== this.dataManager.orderBy && defaultSortDirection !== this.dataManager.orderDirection));
+    shouldReorder && this.dataManager.changeOrder(defaultSortColumnIndex, defaultSortDirection);
     isInit && this.dataManager.changeSearchText(props.options.searchText || '');
     isInit && this.dataManager.changeCurrentPage(props.options.initialPage ? props.options.initialPage : 0);
     (isInit || this.isRemoteData()) && this.dataManager.changePageSize(props.options.pageSize);
@@ -331,7 +333,7 @@ export default class MaterialTable extends React.Component {
   }
 
   onEditingApproved = (mode, newData, oldData) => {
-    if (mode === "add") {
+    if (mode === "add"  && this.props.editable && this.props.editable.onRowAdd) {
       this.setState({ isLoading: true }, () => {
         this.props.editable.onRowAdd(newData)
           .then(result => {
@@ -346,7 +348,7 @@ export default class MaterialTable extends React.Component {
           });
       });
     }
-    else if (mode === "update") {
+    else if(mode === "update" && this.props.editable && this.props.editable.onRowUpdate) {
       this.setState({ isLoading: true }, () => {
         this.props.editable.onRowUpdate(newData, oldData)
           .then(result => {
@@ -366,7 +368,7 @@ export default class MaterialTable extends React.Component {
       });
 
     }
-    else if (mode === "delete") {
+    else if(mode === "delete" && this.props.editable && this.props.editable.onRowDelete) {
       this.setState({ isLoading: true }, () => {
         this.props.editable.onRowDelete(oldData)
           .then(result => {

diff --git a/src/prop-types.js b/src/prop-types.js
@@ -117,6 +117,8 @@ export const propTypes = {
   title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   options: PropTypes.shape({
     actionsCellStyle: PropTypes.object,
+    editCellStyle: PropTypes.object,
+    detailPanelColumnStyle: PropTypes.object,
     actionsColumnIndex: PropTypes.number,
     addRowPosition: PropTypes.oneOf(['first', 'last']),
     columnsButton: PropTypes.bool,
@@ -132,6 +134,7 @@ export const propTypes = {
     exportCsv: PropTypes.func,
     filtering: PropTypes.bool,
     filterCellStyle: PropTypes.object,
+    filterRowStyle: PropTypes.object,
     header: PropTypes.bool,
     headerStyle: PropTypes.object,
     hideFilterIcons: PropTypes.bool,

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -62,6 +62,7 @@ export interface Query<RowData extends object> {
   filters: Filter<RowData>[];
   page: number;
   pageSize: number;
+  totalCount: number;
   search: string;
   orderBy: Column<RowData>;
   orderDirection: "asc" | "desc";
@@ -112,6 +113,7 @@ export interface EditCellColumnDef {
 }
 
 export interface Column<RowData extends object> {
+  align?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
   cellStyle?: React.CSSProperties | ((data: RowData[], rowData: RowData) => React.CSSProperties);
   currencySetting?: { locale?: string, currencyCode?: string, minimumFractionDigits?: number, maximumFractionDigits?: number };
   dateSetting?: { locale?: string };
@@ -136,6 +138,7 @@ export interface Column<RowData extends object> {
   hideFilterIcon?: boolean;
   initialEditValue?: any,
   lookup?: object;
+  editPlaceholder?: string;
   editable?: ('always' | 'onUpdate' | 'onAdd' | 'never' | ((columnDef: Column<RowData>, rowData: RowData) => boolean));
   removable?: boolean;
   render?: (data: RowData, type: ('row' | 'group')) => any;
@@ -202,6 +205,8 @@ export interface Icons {
 
 export interface Options {
   actionsCellStyle?: React.CSSProperties;
+  detailPanelColumnStyle?: React.CSSProperties;
+  editCellStyle?: React.CSSProperties;
   actionsColumnIndex?: number;
   addRowPosition?: ('first' | 'last');
   columnsButton?: boolean;
@@ -218,6 +223,7 @@ export interface Options {
   exportCsv?: (columns: any[], renderData: any[]) => void;
   filtering?: boolean;
   filterCellStyle?: React.CSSProperties;
+  filterRowStyle?: React.CSSProperties;
   fixedColumns?: { left?: number; right?: number; };
   groupRowSeparator?: string;
   header?: boolean;