feat: FlatUiTable component API and docs improvements

packages/components/src/components/FlatUiTable.tsx

@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
 import Papa from 'papaparse';
 import { Grid } from '@githubocto/flat-ui';
 import LoadingSpinner from './LoadingSpinner';
+import { Data } from '../types/properties';
 
 const queryClient = new QueryClient();
 
@@ -36,30 +37,25 @@ export async function parseCsv(file: string, parsingConfig): Promise<any> {
 }
 
 export interface FlatUiTableProps {
-  url?: string;
+  data: Data;
-  data?: { [key: string]: number | string }[];
+  uniqueId?: number;
-  rawCsv?: string;
-  randomId?: number;
   bytes: number;
   parsingConfig: any;
 }
 export const FlatUiTable: React.FC<FlatUiTableProps> = ({
-  url,
   data,
-  rawCsv,
+  uniqueId,
   bytes = 5132288,
   parsingConfig = {},
 }) => {
-  const randomId = Math.random();
+  uniqueId = uniqueId ?? Math.random();
   return (
     // Provide the client to your App
     <QueryClientProvider client={queryClient}>
       <TableInner
         bytes={bytes}
-        url={url}
         data={data}
-        rawCsv={rawCsv}
+        uniqueId={uniqueId}
-        randomId={randomId}
         parsingConfig={parsingConfig}
       />
     </QueryClientProvider>
@@ -67,33 +63,32 @@ export const FlatUiTable: React.FC<FlatUiTableProps> = ({
 };
 
 const TableInner: React.FC<FlatUiTableProps> = ({
-  url,
   data,
-  rawCsv,
+  uniqueId,
-  randomId,
   bytes,
   parsingConfig,
 }) => {
-  if (data) {
+  const url = data.url;
+  const csv = data.csv;
+  const values = data.values;
+
+  if (values) {
     return (
       <div className="w-full" style={{ height: '500px' }}>
-        <Grid data={data} />
+        <Grid data={values} />
       </div>
     );
   }
   const { data: csvString, isLoading: isDownloadingCSV } = useQuery(
-    ['dataCsv', url, randomId],
+    ['dataCsv', url, uniqueId],
     () => getCsv(url as string, bytes),
     { enabled: !!url }
   );
   const { data: parsedData, isLoading: isParsing } = useQuery(
-    ['dataPreview', csvString, randomId],
+    ['dataPreview', csvString, uniqueId],
     () =>
-      parseCsv(
+      parseCsv(csv ? (csv as string) : (csvString as string), parsingConfig),
-        rawCsv ? (rawCsv as string) : (csvString as string),
+    { enabled: csv ? true : !!csvString }
-        parsingConfig
-      ),
-    { enabled: rawCsv ? true : !!csvString }
   );
   if (isParsing || isDownloadingCSV)
     <div className="w-full flex justify-center items-center h-[500px]">

packages/components/stories/FlatUiTable.stories.ts

@@ -10,23 +10,25 @@ const meta: Meta = {
   argTypes: {
     data: {
       description:
-        'Data to be displayed in the table, must be setup as an array of key value pairs',
+        'Data to be displayed. \n\n \
-    },
+Must be an object with one of the following properties: `url`, `values` or `csv` \n\n \
-    csv: {
+`url`: URL pointing to a CSV file. \n\n \
-      description: 'CSV data as string.',
+`values`: array of objects. \n\n \
-    },
+`csv`: string with valid CSV. \n\n \
-    url: {
+',
-      description:
-        'Fetch the data from a CSV file remotely. only the first 5MB of data will be displayed',
     },
     bytes: {
       description:
-        'Fetch the data from a CSV file remotely. only the first <bytes> of data will be displayed',
+        'Fetch the data from a CSV file remotely. Only the first <bytes> of data will be displayed. Defaults to 5MB.',
     },
     parsingConfig: {
       description:
         'Configuration for parsing the CSV data. See https://www.papaparse.com/docs#config for more details',
     },
+    uniqueId: {
+      description:
+        'Provide a unique ID to help with cache revalidation of the fetched data.',
+    },
   },
 };
 
@@ -36,34 +38,40 @@ type Story = StoryObj<FlatUiTableProps>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const FromColumnsAndData: Story = {
-  name: 'Table data',
+  name: 'Table from array or objects',
   args: {
-    data: [
+    data: {
-      { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
+      values: [
-      { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
+        { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
-      { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
+        { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
-      { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
+        { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
-      { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+        { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
-      { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+        { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
-      { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+        { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
-    ],
+        { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+      ],
+    },
   },
 };
 
 export const FromRawCSV: Story = {
-  name: 'Table from raw CSV',
+  name: 'Table from inline CSV',
   args: {
-    rawCsv: `
+    data: {
+      csv: `
     Year,Temp Anomaly
     1850,-0.418
     2020,0.923
     `,
+    },
   },
 };
 
 export const FromURL: Story = {
   name: 'Table from URL',
   args: {
-    url: 'https://storage.openspending.org/alberta-budget/__os_imported__alberta_total.csv',
+    data: {
+      url: 'https://storage.openspending.org/alberta-budget/__os_imported__alberta_total.csv',
+    },
   },
 };