added render function for table cell

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.3",
+  "version": "0.6.4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/components/SearchBox/SearchBox.tsx

@@ -13,6 +13,7 @@ import { Button } from '../Button';
 export type SearchBoxProps = TextFieldProps & {
     width?: number;
     unadorned?: boolean;
+    onSearchButtonClick?: () => void;
 };
 
 const StyledTextField = styled(TextField)<SearchBoxProps>(() => ({
@@ -37,6 +38,7 @@ const SearchBox: React.FC<SearchBoxProps> = props => (
                     <Button
                         bvariant='filled'
                         btheme='light'
+                        onClick={props.onSearchButtonClick}
                     >
                         Search
                     </Button>

src/components/SearchBox/SearchBoxWithSelect.tsx

@@ -14,6 +14,7 @@ export type SearchBoxWithSelectProps = SearchBoxProps & {
     selectOptions: SearchBoxWithSelectOption[];
     onSelectChange?: (option: SearchBoxWithSelectOption) => void;
     onSearchChange?: (value: string) => void;
+    onSearchButtonClick?: () => void;
     reactiveThreshold?: number;
     reactiveWidth?: number;
     containerWidth?: number;

src/components/Table/Table.tsx

@@ -24,7 +24,7 @@ const StyledTableRow = styled(TableRow)(() => ({
 }));
 
 
-export type CustomizedTableProps = MUITableProps & { tabledata: Array<Object>, rowsPerPage?: number[] }
+export type CustomizedTableProps = MUITableProps & { tabledata: Array<{ header: string, value: any, render?: any }[]>, rowsPerPage?: number[] }
 
 const CustomizedTable:React.FC<CustomizedTableProps> = (props) => {
   const [page, setPage] = React.useState(0);
@@ -42,11 +42,11 @@ const CustomizedTable:React.FC<CustomizedTableProps> = (props) => {
   return (
     <>
       <TableContainer>
-        <Table stickyHeader aria-label="sticky table">
+        <Table stickyHeader aria-label="sticky table" >
           <TableHead >
             <TableRow>
-              {Object.keys(props.tabledata[0]).map(t=>{
-                  return <TableCell style={{textAlign:"center", fontWeight: "bold" ,border:"None"}}>{t}</TableCell>
+              {props.tabledata[0].map(t=>{
+                  return <TableCell key={t.header}  style={{textAlign:"center", fontWeight: "bold" ,border:"None"}}>{t.header}</TableCell>
               })}           
             </TableRow>
           </TableHead>
@@ -56,8 +56,8 @@ const CustomizedTable:React.FC<CustomizedTableProps> = (props) => {
                 .map((row,i) => {
                 return(
               <StyledTableRow key={i}>
-                  {Object.values(row).map(v=>{
-                      return <StyledTableCell> {v}</StyledTableCell>
+                  {row.map(v=>{
+                      return <StyledTableCell key={v.value}> { v.render ? v.render : v.value}</StyledTableCell>
                     })
                   }            
               </StyledTableRow>

stories/SearchBox.stories.tsx

@@ -84,5 +84,8 @@ const Template: Story<SearchBoxProps & { withSelect?: boolean }> = args => {
 export const Default = Template.bind({});
 export const WithSelect = Template.bind({});
 
-Default.args = {};
+const onSearch = () =>{
+  console.log('on search ')
+}
+Default.args = { onSearchButtonClick: onSearch};
 WithSelect.args = { withSelect: true };

stories/Table.stories.tsx

@@ -32,7 +32,8 @@ const Template: Story<any> = args => (
 export const Table = Template.bind({ });
 
 const tdata = Array.from(Array(1000).keys()).map((a)=> {
-  return {Symbol: 'S'+ a, 'Score 1':a, 'Score 2':1,'Score 3':4,'Score 4':6,'Score 5':9,'Score 6':0,'Score 7':9,'Score 8':1,'Score 9':2,'Score 10':5,'Score 11':12}
+  //return {  Symbol: 'S'+ a, 'Score 1':a, 'Score 2':1,'Score 3':4,'Score 4':6,'Score 5':9,'Score 6':0,'Score 7':9,'Score 8':1,'Score 9':2,'Score 10':5,'Score 11':12}
+  return [{header: 'Symbol', value: a},{ header: 'Score', value: 'score '+ a, render: <b>{'test'+a}</b>}]
 })
 
 Table.args = { rowsPerPage: [10,100],  tabledata: tdata};