flex auto adjustment by content

docs/iframe.html

@@ -130,4 +130,4 @@
 
 
 
-              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.429d3e20.iframe.bundle.js"></script><script src="vendors~main.deba960f.iframe.bundle.js"></script><script src="main.450ded48.iframe.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.9008d68e.iframe.bundle.js"></script><script src="vendors~main.a10ade60.iframe.bundle.js"></script><script src="main.c001fce4.iframe.bundle.js"></script></body></html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-awesome-table",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React-Native Simple Data Tables",
   "homepage": "https://github.com/garrylachman/react-native-awesome-table",
   "keywords": ["react", "react-native", "react tables", "react-native tables", "data tables", "table"],

src/components/Table.stories.tsx

@@ -20,6 +20,9 @@ export default {
         max: 100
       }
     },
+    flexAutoAdjustment: {
+      description: 'Auto adujst the column fkex by title/content length',
+    },
     showHeader: {
       description: 'Show/Hide Header',
       table: {
@@ -90,6 +93,7 @@ export const Basic = Template.bind({})
 Basic.args = {
   rowsCount: 1,
   showHeader: true,
+  flexAutoAdjustment: false,
   isLoading: false,
   data: [{id: 1, firstName: 'garry', lastName: 'lachman', country: 'Israel'}],
   columns: [
@@ -167,4 +171,12 @@ IsLoading.args = {
     { flex: 2, title: 'Last Name', dataKey: 'lastName'},
     { flex: 3, title: 'Country', dataKey: 'country'}
   ],
-};
+};
+
+export const FlexAutoAdjustment = Template.bind({});
+
+FlexAutoAdjustment.args = {
+  ...Basic.args,
+  rowsCount: 20,
+  flexAutoAdjustment: true
+}

src/components/Table.tsx

@@ -35,7 +35,8 @@ export type TableProps = {
   contentHeight?: number | string,
   isLoading:boolean,
   loadingText: string,
-  loaddingTextStyle?: {}
+  loaddingTextStyle?: {},
+  flexAutoAdjustment?: boolean
 }
 
 type StickyWrapperProps = {
@@ -75,14 +76,40 @@ const Table = (props: TableProps) => {
     contentHeight = "auto",
     isLoading = false,
     loadingText = "Loading...",
-    loaddingTextStyle = {}
+    loaddingTextStyle = {},
+    flexAutoAdjustment = false
   } = props;
 
+  const adjustColumns = React.useMemo<ColumnProps[]>(() => {
+    // No auto adjustment, return user definded columns
+    if (!flexAutoAdjustment)  {
+      return columns;
+    }
+    let totalLength:number, precent:number;
+    // No data, adjust columns by title only
+    if (data.length == 0) {
+      totalLength = columns.map(c => c.title.length).reduce((a,b) => a + b, 0);
+      precent = 100/totalLength;
+      return [...columns].map(c => ({...c, flex: c.title.length * precent}));
+    }
+    // Have data, adjust by title/data (first row)
+    const firstRow = data[0];
+    console.log("first Row", firstRow);
+    console.log("columns", columns)
+    totalLength = columns
+      .map(c => Math.max(c.title.length, `${firstRow[c.dataKey]}`.length))
+      .reduce((a,b) => a + b, 0);
+    console.log("totalLength", totalLength);
+    precent = 100/totalLength;
+    console.log("precent", precent)
+    return [...columns].map(c => ({...c, flex: Math.max(c.title.length, `${firstRow[c.dataKey]}`.length) * precent}));
+  }, [flexAutoAdjustment, columns, data])
+
   return (
     <SafeAreaView style={styles.container}>
       {showHeader &&
         <Row style={headerRowStyle}>
-        {columns.map((column, columnIndex) => (
+        {adjustColumns.map((column, columnIndex) => (
           <Cell key={`row-header-col-${columnIndex}`} flex={column.flex}>
             <Text style={headerRowTextStyle}>{column.title}</Text>
           </Cell>
@@ -95,7 +122,7 @@ const Table = (props: TableProps) => {
       }
       {!isLoading && data.map((dataRow, rowIndex) => (
         <Row key={`row-${rowIndex}`} style={rowStyle} onPress={onPress}>
-          {columns.map((column, columnIndex) => (
+          {adjustColumns.map((column, columnIndex) => (
             <Cell key={`row-${rowIndex}-col-${columnIndex}`} flex={column.flex}>
               <GetCellHandler
                 column={column}