chore(docs): use static values in demos

[Mash707]

Closes #11768

[patternfly-build]

Preview: https://patternfly-react-pr-11769.surge.sh

A11y report: https://patternfly-react-pr-11769-a11y.surge.sh

[Mash707]

/patterns/right-to-left/react-demos/paginated-table should I create a sampleData.tsx for this similar to other demos?

[thatblindgeye]

We should make a similar update to the TimestampBasicFormats example file

[thatblindgeye]

@Mash707 for now we could just update those random values in the PaginatedTable file itself

[Mash707]

@Mash707 for now we could just update those random values in the PaginatedTable file itself

@thatblindgeye There are 25 entries for this example https://www.patternfly.org/patterns/right-to-left/react-demos/paginated-table/, this would make the source code pretty big with unnecessary information. Let me know what you think

[thatblindgeye]

@Mash707 Ah yeah fair, may not hurt to have a separate file for that data then

[Mash707]

/patterns/right-to-left/react-demos/paginated-table should I create a sampleData.tsx for this similar to other demos?

@thatblindgeye regarding this example I have few things to clarify:

• I have added a sampleData2.tsx file in the demos folder because only then it is getting build in the dist folder so that I can import it into RTL.md file.
• I am still trying to figure out how can we handle row translations with static values. Could you recommend an approach that I can work upon to make translations work? Previously every time the translation was switched new rows were created with the new transation.
  

  patternfly-react/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx

  Lines 133 to 137 in f2ef4f7

  	useEffect(() => {
  	const newRows = createRows();
  	setManagedRows(newRows);
  	setPaginatedRows(newRows.slice((page - 1) * perPage, page * perPage));
  	}, [translation]);

[thatblindgeye]

@Mash707 one idea could be instead of hard coding the data values in that new sampleData2 file, setting the values of each row's data to the keys of the translation file. So a row's data structure in sampleData2 could look like:

// Pretend this is dataItemOne
{
    status: 'running',
    location: 'raleigh',
    lastModified: 'oneHr'
  }

Then in the demo file itself, we would map over this data structure ^ to get the actual values we want (so something like translation.table.rows.status[dataItemOne.status] would get us the correct status from the appropriate translation structure), including adding the name and url properties based on the index (+ 1) of the current item -- the name property would also just need to reference the node property coming from translation.table.rows.

[Mash707]

@thatblindgeye great idea! its seems to work pushing the changes. Let me know what you think.

[Mash707]

I have made changes to PaginatedTable.tsx but PaginatedTable.jsx also exists. Should I make similar changes in it too?

[thatblindgeye]

Non-blocking nit below, I'll leave it up to you if you think it's worth changing or keeping as-is.

Can we also just rename the new data file to sampleDataRTL? Just to make it a little clearer its intent.

For the JSX file for this demo, we should be fine to just remove it. I'm assuming when it was converted to TS in #10164 we just forgot to remove the old JSX file.

[patternfly-build]

Your changes have been released in:

• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• [email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]

Thanks for your contribution! 🎉