feat(table): allow table actions

Author: assisrafael

README.md

@@ -6,10 +6,10 @@ A React implementation of Boostrap v4 components.
 
 ## Roadmap
 
-- [] Table
 - [] Dialogs
 - [] Tabs
 - [] Pagination
+- [] Smartable
 - [] Form validations (dependent field validation)
 - [] Form Autocomplete
 - [] Form Range
@@ -35,3 +35,8 @@ A React implementation of Boostrap v4 components.
 - [] Progress bar
 - [] Tooltip
 - [] Popovers
+- [] Table with row details
+- [] Table footer (sums, counters, etc)
+- [] Table with sticky footer
+- [] Table with sticky columns
+- [] Table with sticky header

demo/demo.jsx

@@ -147,6 +147,7 @@ function TableExamples() {
             ]}
           />
         </div>
+
         <div className="col">
           <h2>Table with formated colums</h2>
           <Table
@@ -162,10 +163,18 @@ function TableExamples() {
             ]}
           />
         </div>
+
         <div className="col">
           <h2>Table with formatted values </h2>
           <Table
             columns={[
+              {
+                attribute: 'selected',
+                label: '#',
+                format() {
+                  return <input type="checkbox" />;
+                },
+              },
               {
                 attribute: 'a',
                 label: 'A',
@@ -183,8 +192,8 @@ function TableExamples() {
               {
                 attribute: 'c',
                 label: 'C',
-                format(v, doc) {
-                  return v + doc.c;
+                format(_, __, docIndex) {
+                  return <strong>{docIndex + 1}</strong>;
                 },
               },
             ]}
@@ -215,6 +224,38 @@ function TableExamples() {
             rowClass={(doc) => (doc.b % 2 === 1 ? 'table-primary' : '')}
           />
         </div>
+
+        <div className="col">
+          <h2>Table with row actions</h2>
+          <Table
+            columns={[
+              { attribute: 'a', label: 'A', align: 'center' },
+              { attribute: 'b', label: 'B', align: 'right' },
+              { attribute: 'c', label: 'C' },
+            ]}
+            docs={[
+              { a: 1, b: 2, c: 3 },
+              { a: 4, b: 5, c: 6 },
+              { a: 7, b: 8, c: 9 },
+            ]}
+            actions={[
+              {
+                title: 'View details',
+                content: <span>V</span>,
+                link(doc) {
+                  return `#/${doc.a}`;
+                },
+              },
+              {
+                title: 'Remove item',
+                content: '-',
+                onClick(doc) {
+                  console.log('removing', doc);
+                },
+              },
+            ]}
+          />
+        </div>
       </div>
     </div>
   );

src/table/Table.jsx

@@ -3,7 +3,19 @@ import { TableHead } from './TableHead';
 import { TableBody } from './TableBody';
 import { normalizeColumns } from './table-helpers';
 
-export function Table({ docs, columns, striped, bordered, hover, small, dark, rowClass, caption }) {
+export function Table({
+  docs,
+  columns,
+  striped,
+  bordered,
+  hover,
+  small,
+  dark,
+  rowClass,
+  caption,
+  actions,
+  actionLabel,
+}) {
   const normalizedColumns = normalizeColumns(columns);
 
   const tableClasses = [
@@ -14,12 +26,13 @@ export function Table({ docs, columns, striped, bordered, hover, small, dark, ro
     small && 'table-sm',
     dark && 'table-dark',
   ].join(' ');
+
   return (
     <div className="table-responsive">
       <table className={tableClasses}>
         {caption && <caption>{caption}</caption>}
-        <TableHead columns={normalizedColumns} />
-        <TableBody docs={docs} columns={normalizedColumns} rowClass={rowClass} />
+        <TableHead {...{ actions, actionLabel }} columns={normalizedColumns} />
+        <TableBody {...{ docs, rowClass, actions }} columns={normalizedColumns} />
       </table>
     </div>
   );
@@ -31,5 +44,6 @@ Table.defaultProps = {
   hover: true,
   small: true,
   dark: false,
+  actionLabel: 'Actions',
   rowClass: () => '',
 };

src/table/TableBody.jsx

@@ -1,28 +1,60 @@
 import React from 'react';
 import { getColumnClass } from './table-helpers';
 
-export function TableBody({ columns, docs, rowClass }) {
+export function TableBody({ columns, docs, rowClass, actions }) {
   return (
     <tbody>
       {docs.map((doc, docIndex) => (
         <tr key={docIndex} className={rowClass(doc)}>
           {columns.map((column, columnIndex) => (
             <td key={columnIndex} className={getColumnClass(column)}>
-              {getColumnValue(doc, column)}
+              {getColumnValue(doc, column, docIndex)}
             </td>
           ))}
+
+          {actions && (
+            <td className="text-center">
+              {actions.map((action, actionIndex) => (
+                <a
+                  key={actionIndex}
+                  title={action.title}
+                  {...getActionProps(action, doc)}
+                  className={actionIndex > 0 ? 'ml-2' : ''}
+                >
+                  {action.content}
+                </a>
+              ))}
+            </td>
+          )}
         </tr>
       ))}
     </tbody>
   );
 }
 
-function getColumnValue(doc, column) {
+function getColumnValue(doc, column, docIndex) {
   let rawValue = doc[column.attribute];
 
   if (!column.format) {
     return rawValue;
   }
 
-  return column.format(rawValue, doc);
+  return column.format(rawValue, doc, docIndex);
+}
+
+function getActionProps(action, doc) {
+  const props = {};
+
+  if (action.onClick) {
+    props.href = '';
+    props.onClick = (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      action.onClick(doc);
+    };
+  } else if (action.link) {
+    props.href = action.link(doc);
+  }
+
+  return props;
 }

src/table/TableHead.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { getColumnClass } from './table-helpers';
 
-export function TableHead({ columns }) {
+export function TableHead({ columns, actions, actionLabel }) {
   return (
     <thead>
       <tr>
@@ -10,6 +10,7 @@ export function TableHead({ columns }) {
             {column.label}
           </th>
         ))}
+        {actions && <th className="text-center">{actionLabel}</th>}
       </tr>
     </thead>
   );