Merge pull request #642 from jbetancur/feature/rowIndex

allows accessing the row index from selector, format and cell

README.md

@@ -110,11 +110,11 @@ Nothing new here - we are using an array of object literals and properties to de
 | Property | Type   | Required | Example                                                                                                       |
 |----------|--------|----------|---------------------------------------------------------------------------------------------------------------|
 | name     | string, component or number | no       | the display name of our Column e.g. 'Name'                                                                    |
-| selector | string or function | no      | a data set property in dot notation. e.g. <br /> `property1.nested1.nested2` <br /> `property1.items[0].nested2` <br /> or as a function e.g. <br /> `row => row.timestamp`. A `selector` is required anytime you want to display data but can be ommitted if your column does not require showing data (e.g. an actions column) |
+| selector | string or (row, index) => {} | no      | a data set property in dot notation. e.g. <br /> `property1.nested1.nested2` <br /> `property1.items[0].nested2` <br /> or as a function e.g. <br /> `row => row.timestamp`. A `selector` is required anytime you want to display data but can be ommitted if your column does not require showing data (e.g. an actions column) |
 | sortable | bool   | no       | if the column is sortable. note that `selector` is required for the column to sort                                                            |
 | sortFunction | function | no | custom sorting function e.g. `(rowA, rowB) => rowA.myIndex - rowB.myIndex` (see [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)) |
-| format   | func   | no       | apply formatting to the selector e.g. `row => moment(row.timestamp).format('lll')` without changing the actual selector value                                        |
-| cell     | func   | no       | for ultimate control use `cell` to render your own custom component! e.g `row => <h2>{row.title}</h2>` <br /> **negates  `format`*- |
+| format   | (row, index) => {}   | no       | apply formatting to the selector e.g. `row => moment(row.timestamp).format('lll')` without changing the actual selector value.                                        |
+| cell     | (row, index, column, id) => {}   | no       | for ultimate control use `cell` to render your own custom component! e.g `row => <h2>{row.title}</h2>` <br /> **negates  `format`*- |
 | grow     | number | no       | [flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) of the column. This is useful if you want a column to take up more width than its relatives (without having to set widths explicitly).  this will be affected by other columns where you have explicitly set widths |
 | width    | string | no       | give the column a fixed width                                                                                 |
 | minWidth | string | no       | give the column a minWidth                                                                                    |

index.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { CSSProperties } from 'styled-components';
 
-export interface IDataTableProps<T> {
+export interface IDataTableProps {
   title?: React.ReactNode;
-  columns: IDataTableColumn<T>[];
-  data: T[];
+  columns: IDataTableColumn[];
+  data: any[];
   keyField?: string;
   striped?: boolean;
   highlightOnHover?: boolean;
@@ -24,7 +24,7 @@ export interface IDataTableProps<T> {
   defaultSortAsc?: boolean;
   sortIcon?: React.ReactNode;
   onSort?: (
-    column: IDataTableColumn<T>,
+    column: IDataTableColumn,
     sortDirection: 'asc' | 'desc'
   ) => void;
   sortFunction?: (
@@ -96,18 +96,18 @@ export interface IDataTableProps<T> {
   subHeaderComponent?: React.ReactNode | React.ReactNode[];
   customStyles?: IDataTableStyles;
   theme?: string;
-  conditionalRowStyles?: IDataTableConditionalRowStyles<T>[];
+  conditionalRowStyles?: IDataTableConditionalRowStyles[];
   direction?: 'ltr' | 'rtl' | 'auto';
 }
 
-export interface IDataTableColumn<T> {
+export interface IDataTableColumn {
   id?: string | number;
   name: string | number | React.ReactNode;
-  selector?: string | ((row: T) => React.ReactNode);
+  selector?: string | ((row: T, rowIndex: number) => React.ReactNode);
   sortable?: boolean;
   sortFunction?: (a: T, b: T) => number;
-  format?: (row: T) => React.ReactNode;
-  cell?: (row: T) => React.ReactNode;
+  format?: (row: T, rowIndex: number) => React.ReactNode;
+  cell?: (row: T, rowIndex: number, column: IDataTableColumn, id: string | number) => React.ReactNode;
   grow?: number;
   width?: string;
   minWidth?: string;
@@ -122,7 +122,7 @@ export interface IDataTableColumn<T> {
   hide?: number | 'sm' | 'md' | 'lg';
   omit?: boolean;
   style?: CSSProperties;
-  conditionalCellStyles?: IDataTableConditionalCellStyles<T>[];
+  conditionalCellStyles?: IDataTableConditionalCellStyles[];
 }
 
 export interface IDataTableStyles {
@@ -185,12 +185,12 @@ export interface IDataTableStyles {
   };
 }
 
-export interface IDataTableConditionalCellStyles<T> {
+export interface IDataTableConditionalCellStyles {
   when: (row: T) => boolean;
   style: CSSProperties;
 }
 
-export interface IDataTableConditionalRowStyles<T> {
+export interface IDataTableConditionalRowStyles {
   when: (row: T) => boolean;
   style: CSSProperties;
 }
@@ -258,9 +258,9 @@ interface IDefaultThemes {
   dark: ITheme;
 }
 
-export function createTheme<T>(name: string, customTheme: T): ITheme;
+export function createTheme(name: string, customTheme: T): ITheme;
 export const defaultThemes: IDefaultThemes;
 
-export default function DataTable<T>(
-  props: IDataTableProps<T>
+export default function DataTable(
+  props: IDataTableProps
 ): React.ReactElement;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "6.9.8",
+  "version": "6.10.0",
   "description": "A declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -53,9 +53,9 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "@babel/preset-react": "^7.9.4",
+    "@babel/core": "^7.11.0",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-react": "^7.10.4",
     "@material-ui/core": "^4.9.12",
     "@material-ui/icons": "^4.9.1",
     "@storybook/addon-actions": "^5.3.19",
@@ -64,7 +64,7 @@
     "@storybook/addon-links": "^5.3.19",
     "@storybook/addon-options": "^5.3.19",
     "@storybook/addon-storysource": "^5.3.19",
-    "@storybook/react": "^5.3.18",
+    "@storybook/react": "^5.3.19",
     "@testing-library/react": "^10.0.4",
     "@typescript-eslint/eslint-plugin": "^2.30.0",
     "@typescript-eslint/parser": "^2.30.0",
@@ -73,7 +73,7 @@
     "babel-jest": "^25.5.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-module-resolver": "^4.0.0",
-    "babel-plugin-styled-components": "^1.10.7",
+    "babel-plugin-styled-components": "^1.11.1",
     "codecov": "^3.6.5",
     "cross-env": "^7.0.2",
     "eslint": "^6.8.0",
@@ -107,7 +107,7 @@
     "stylelint-config-standard": "^20.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.7"
   },
   "dependencies": {
     "deepmerge": "^4.2.2",

src/DataTable/DataTable.js

@@ -414,6 +414,7 @@ const DataTable = memo(({
                         conditionalRowStyles={conditionalRowStyles}
                         selected={selected}
                         selectableRowsHighlight={selectableRowsHighlight}
+                        rowIndex={i}
                       />
                     );
                   })}

src/DataTable/TableCell.js

@@ -20,7 +20,7 @@ const TableCellStyle = styled(Cell)`
   ${props => props.extendedCellStyle};
 `;
 
-const TableCell = memo(({ id, column, row }) => {
+const TableCell = memo(({ id, rowIndex, column, row }) => {
   if (column.omit) {
     return null;
   }
@@ -40,16 +40,17 @@ const TableCell = memo(({ id, column, row }) => {
     >
       {!column.cell && (
         <div data-tag={dataTag}>
-          {getProperty(row, column.selector, column.format)}
+          {getProperty(row, column.selector, column.format, rowIndex)}
         </div>
       )}
-      {column.cell && column.cell(row)}
+      {column.cell && column.cell(row, rowIndex, column, id)}
     </TableCellStyle>
   );
 });
 
 TableCell.propTypes = {
   id: PropTypes.string.isRequired,
+  rowIndex: PropTypes.number.isRequired,
   column: PropTypes.object.isRequired,
   row: PropTypes.object.isRequired,
 };

src/DataTable/TableRow.js

@@ -60,6 +60,7 @@ const TableRow = memo(({
   onRowExpandToggled,
   selected,
   selectableRowsHighlight,
+  rowIndex,
 }) => {
   const [expanded, setExpanded] = useState(defaultExpanded);
   useEffect(() => {
@@ -135,6 +136,7 @@ const TableRow = memo(({
             key={`cell-${column.id}-${row[keyField]}`}
             column={column}
             row={row}
+            rowIndex={rowIndex}
           />
         ))}
       </TableRowStyle>
@@ -157,6 +159,7 @@ TableRow.propTypes = {
   keyField: PropTypes.string.isRequired,
   columns: PropTypes.array.isRequired,
   row: PropTypes.object.isRequired,
+  rowIndex: PropTypes.number.isRequired,
   onRowClicked: PropTypes.func.isRequired,
   onRowDoubleClicked: PropTypes.func.isRequired,
   onRowExpandToggled: PropTypes.func.isRequired,

src/DataTable/util.js

@@ -13,7 +13,7 @@ export const sort = (rows, field = '', direction, sortFn) => {
   return orderBy(rows, field, direction);
 };
 
-export const getProperty = (row, selector, format) => {
+export const getProperty = (row, selector, format, rowIndex) => {
   if (!selector) {
     return null;
   }
@@ -23,11 +23,11 @@ export const getProperty = (row, selector, format) => {
   }
 
   if (format && typeof format === 'function') {
-    return format(row);
+    return format(row, rowIndex);
   }
 
   if (selector && typeof selector === 'function') {
-    return selector(row);
+    return selector(row, rowIndex);
   }
 
   return selector.split('.').reduce((acc, part) => {