feat(Table): Add row numbers feature

kronostechnologies · Nov 17, 2020 · 71511d8 · 71511d8
1 parent 42c0b9b
commit 71511d8
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/packages/react/src/components/table/table-row.tsx b/packages/react/src/components/table/table-row.tsx
@@ -20,6 +20,7 @@ export function TableRow({ row, onClick }: TableRowProps): ReactElement {
                 return (
                     <td
                         style={style}
+                        className={cell.column.className}
                         {...{ ...cell.getCellProps(), key: `${cell.column.id}-${cell.row.id}` }}
                     >
                         {cell.render('Cell')}

diff --git a/packages/react/src/components/table/table.tsx b/packages/react/src/components/table/table.tsx
@@ -52,6 +52,14 @@ const StyledTable = styled.table<StyledTableProps>`
     tr:last-child td {
         border-bottom: 0;
     }
+
+    .number-column {
+        box-sizing: border-box;
+        color: ${({ theme }) => theme.greys['dark-grey']};
+        font-size: 0.75rem;
+        text-align: center;
+        width: 40px;
+    }
 `;
 
 type CustomColumn = Column & {
@@ -79,6 +87,11 @@ interface TableProps<T> {
     /** Array of Objects that defines your table data.
      * See stories code or refer to react-table docs for more information */
     data: T[];
+    /**
+     * Adds row numbers
+     * @default false
+     **/
+    rowNumbers?: boolean;
     /**
      * Adds striped rows
      * @default false
@@ -88,8 +101,24 @@ interface TableProps<T> {
     onRowClick?(row: RowProps): void;
 }
 
-export function Table<T>({ columns, data, striped = false, onRowClick }: TableProps<T>): ReactElement {
+export function Table<T>({
+    columns,
+    data,
+    rowNumbers = false,
+    striped = false,
+    onRowClick,
+}: TableProps<T>): ReactElement {
     const { device } = useDeviceContext();
+
+    if (rowNumbers) {
+        columns.unshift({
+            Header: '',
+            id: 'number-column',
+            className: 'number-column',
+            Cell: (row) => <>{row.row.index + 1}</>,
+        });
+    }
+
     const {
         getTableProps,
         getTableBodyProps,
@@ -125,6 +154,7 @@ function getHeading(column: Column): ReactElement {
             <th
                 scope="col"
                 style={{ textAlign: column.textAlign }}
+                className={column.className}
                 {...column.getHeaderProps()}
             >
                 {column.render('Header')}